Question
Directions Use the invitation.html file that you submitted in your previous assessment to add functionality to your form. This new functionality should allow the user
Directions
Use the invitation.html file that you submitted in your previous assessment to add functionality to your form. This new functionality should allow the user to enter in the number of volunteers, whereupon the form will display the corresponding number of input fields for the user to enter information for each volunteer. Once the form is submitted, the data should be stored in an array to be looped through to create separate invitations for each volunteer on a new page.
Make sure to do the following:
Add an input field that allows the user to input the number of volunteers as a numeric value.
Once the number of volunteers has been entered (by pressing the enter key while the cursor is in the input field), use JavaScript to display the volunteer input fields based upon the number of volunteers entered.
Write JavaScript that stores the form into an array of records once the form is submitted.
Write JavaScript to Loop through the array of records and then display the invitation message for each volunteer. (Unlike a simple array that contains a single variable for each index, an array of records allows us to store related data fields for each index in the array. If we were going to store this in simple arrays, we would need a separate array for each data field.)
function readData() {
// read input data
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
}
CapellaVolunteers
.org
-
Home
-
Invitation
-
Gallery
-
Registration
Hello
recipientName!
You have been invited to volunteer for an event held by
organizationName on
eventDate. Please come to the following website:
websiteURL to sign up as a volunteer.
Thanks!
hostName
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started