New to JS...Need help with form submission!

I am brand new at JS and I am attempting to use JS to allow a form to be submitted with user data and replace the generic place holder data at the bottom of the page with the submitted data. Below is what I have so far, but it does not seem to work. Any help is greatly appreciated!

<script>
    
function readData(pageForm) {

// This function is to read input data at the bottom of the invitation page

var recipientName = document.getElementsByName("recipientName")[0].value;

var organizationName = document.getElementsByName("organizationName")[0].value;

var eventDate = document.getElementsByName("eventDate")[0].value;

var websiteURL = document.getElementsByName("websiteURL")[0].value;

var hostName = document.getElementsByName("hostName")[0].value;

// validating the input data (trim is user truncate the whitespaces)

if (

recipientName.trim() == "" ||

organizationName.trim() == "" ||

eventDate.trim() == "" ||

websiteURL.trim() == "" ||

hostName.trim() == ""

) {

alert("Please fill the data.");

} else {

// set all value to display content

document.getElementById("recipientName").innerText = recipientName;

document.getElementById("organizationName").innerText = organizationName;

document.getElementById("eventDate").innerText = eventDate;

document.getElementById("websiteURL").innerText = websiteURL;

document.getElementById("hostName").innerText = hostName;

}

return false; // making browser not to refresh

}


</script>    

<section id="pageForm">
        <form action="#">
            <label for="recipientName">Recipient name:</label>
            <input type="text" name="recipientName" placeholder="Enter your Recipient Name" />

            <label for="organizationName">Organization name:
            </label>
            <input type="text" name="organizationName" placeholder="Enter your Organization Name" />

            <label for="eventDate">Event Date:
            </label>
            <input type="text" name="eventDate" placeholder="Enter your Event Date" />

            <label for="websiteURL">URL:
            </label>
            <input type="text" name="websiteURL" placeholder="Enter your Website URL" />

            <label for="hostName">Host name:
            </label>
            <input type="text" name="hostName" placeholder="Host Name" />

            <input type="submit" value="Submit" onclick="readData(pageForm)>

        </form>
        
    </section>


<article id="placeholderContent">

Hello

<span id="recipientName">recipientName</span>!

<br/>

<br/> You have been invited to volunteer for an event held by

<span id="organizationName">organizationName</span> on

<span id="eventDate">eventDate</span>. Please come to the following website:

<span id="websiteURL">websiteURL</span> to sign up as a volunteer.

<br/>

<br/> Thanks!

<br/>

<br/>

<span id="hostName">hostName</span>

</article>

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Thank you! I will keep this handy for future post.

You have created a function named readData, but where do you call it? It will not run on its own.

Sorry, I’m not sure I know exactly what you mean by calling it. I am still very wet behind the ears.

I have since updated the above original code and I believe I am very close to getting my desired response when clicking the form submit button. As you can see in the screenshot, the text at the bottom of the page will update briefly before the page reloads but it does not hold the input data from the form.

When a form is submitted, the default action is to attempt to go to the url specified in the action attribute. If you want to submit to the url specified (currently #), then you should read about the preventDefault method.

That worked! Thank you so very much Randell!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.