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

Question

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;
});

Answer 1

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);
    });
  

Answer 2