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>
