Html Question posted in
Some basic documentation can be found here.

Html – How to display dom elements through a function that works onsubmit?

I am making greeting cards with user input using Javascript and CSS. I need to be able to have the information that the user submits in the form populate as a card underneath. I have some CSS assigned though this isnt the issue currently. I have a lot of the javascript bones there but I cant figure out how to return those elements once submitted.

  let form = document.createElement('form');
form.setAttribute('id','card-form');



let nameInput = document.createElement('input');
nameInput.setAttribute('type','text');
nameInput.setAttribute('id','name-input');
nameInput.setAttribute('placeholder','Your Name');
nameInput.required = true;
form.appendChild(nameInput);





let messageTextArea = document.createElement('textarea');
messageTextArea.setAttribute('id','message-input');
messageTextArea.setAttribute('placeholder','Your Message');
messageTextArea.required = true;
form.appendChild(messageTextArea);


let imageInput = document.createElement('input');
imageInput.setAttribute('type','url');
imageInput.setAttribute('id','url-input');
imageInput.setAttribute('placeholder','Image or GIF URL');
imageInput.required = true;
form.appendChild(imageInput);



let submitButton = document.createElement('button');
submitButton.setAttribute('type','submit');
submitButton.innerText = 'Finish';
form.appendChild(submitButton);


document.body.appendChild(form);







let cardContainer = document.createElement('div');
cardContainer.setAttribute('id','card-container');
document.body.appendChild('cardContainer');
document.body.appendChild(form);
document.body.appendChild(div);

I tried simply returning the item on submit but this isnt returning anything

document.getElementById('card-form').addEventListener('submit', function (onSubmit) {
 document.getElementById('card-container');
 return div;
});
Tags:

2

Answers


  1. 0

    Couple of issues I see with this,

    • You’re not creating the card element itself and appending it to the cardContainer after the form submission.

    • Stop default behavior of the form submission to prevent the page from reloading.

        let form = document.createElement('form');
  form.setAttribute('id', 'card-form');

  // input for name
  let nameInput = document.createElement('input');
  nameInput.setAttribute('type', 'text');
  nameInput.setAttribute('id', 'name-input');
  nameInput.setAttribute('placeholder', 'Your Name');
  nameInput.required = true;
  form.appendChild(nameInput);

  // textarea for greeting msg
  let messageTextArea = document.createElement('textarea');
  messageTextArea.setAttribute('id', 'message-input');
  messageTextArea.setAttribute('placeholder', 'Your Message');
  messageTextArea.required = true;
  form.appendChild(messageTextArea);

  //input for image URL
  let imageInput = document.createElement('input');
  imageInput.setAttribute('type', 'url');
  imageInput.setAttribute('id', 'url-input');
  imageInput.setAttribute('placeholder', 'Image or GIF URL');
  imageInput.required = true;
  form.appendChild(imageInput);

  // submit button
  let submitButton = document.createElement('button');
  submitButton.setAttribute('type', 'submit');
  submitButton.innerText = 'Finish';
  form.appendChild(submitButton);

  // Append form to the document body
  document.body.appendChild(form);

  // Create card container
  let cardContainer = document.createElement('div');
  cardContainer.setAttribute('id', 'card-container');
  document.body.appendChild(cardContainer);

  // Event listener for form submission
  document.getElementById('card-form').addEventListener('submit', function (event) {
      event.preventDefault(); // Prevent default form submission behavior

      // Get form values
      let name = document.getElementById('name-input').value;
      let message = document.getElementById('message-input').value;
      let imageUrl = document.getElementById('url-input').value;

      // Create card element
      let card = document.createElement('div');
      card.classList.add('card'); // You can add CSS classes or styles here
      card.innerHTML = `
          <h2>${name}</h2>
          <p>${message}</p>
          <img src="${imageUrl}" alt="User Image">
      `;

      // Append card to the card container
      cardContainer.appendChild(card);
  });
    Login or Signup to reply.
  2. 0

    First of all you have to fix the append container error in your code. you are appending string instead of the real container, so pay attention for that.

    let cardContainer = document.createElement('div');
cardContainer.setAttribute('id', 'card-container');
document.body.appendChild(cardContainer);

    Remove redundant or incorrect appends: You appended both form and div (which isn’t defined anywhere) to the body after appending cardContainer.

    for the submit you can use this way to get the values:

    document.getElementById('card-form').addEventListener('submit', function (event) {
event.preventDefault();  // Prevent the default form submission

// Retrieve input values
let name = document.getElementById('name-input').value;

}

    you can do the same for the rest of the inputs.

    then you can create you custom card to display the data in the way you want.

    finally if you like to clear the inputs you can use :

    form.reset();

    I hope this answer your question

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search