In the previous assessment, you used a static set of named variables to store the data that was entered in a form to be output in a message. For this assessment, you will use the invitation.html file that you modified in the previous assessment to create a more effective process for entering information and creating invitations for volunteers. Rather than having to enter each volunteer and create an invitation one at a time, you will create a script that will prompt the user to enter in the number of volunteers, event date, organization name, and host name. Using the number of volunteers entered (5–10), the script should loop through to ask the user to enter the recipient name and store it in an array. Once the user has entered all of the names and pressed submit, the page should display each of the invitations one after another at the bottom of the page.
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:
THis is what i have now but this is not correct
HTML
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Invitation Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers
<span class="dotcom">.org</span>
</a>
</div>
<nav>
<ul class="topnav">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="invitation.html" class="active">Invitation</a>
</li>
<li>
<a href="gallery.html">Gallery</a>
</li>
<li>
<a href="registration.html">Registration</a>
</li>
</ul>
</nav>
</header>
<form>
<input type="number" name="numberOfGuests" placeholder="Enter your Number of Guests" />
<button type="button" value="Submit" onclick="writeDataToSection();">Submit </button>
</form>
<section id="pageForm"><h2>Complete All Fields</h2>
</section>
<article id="placeholderContent"><h3>_</h3>
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>
<script src="js/in.js"></script>
<footer>This events site is for IT-FP3215 tasks.
</footer>
</body>
</html>
JavaScript
function writeDataToSection(e){
var number=document.getElementsByName("numberOfGuests")[0].value;
for(let i=0;i<number;i++){
document.getElementById("pageForm").innerHTML +="<form onsubmit=\"return readData()\"><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\"></form>";
}
}
function readData() {
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;
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
}
Was this answer helpful?
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Invitation Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css"
/>
<script>
// Global data
var invitations = [];
var numberOfVolunteers = null;
var organizationName = null;
var eventDate = null;
var hostName = null;
function processForm() {
// Read number of volunteers, event date, organization name, and
host name
numberOfVolunteers =
parseInt(document.getElementsByName("numberOfVolunteers")[0].value);
organizationName =
document.getElementsByName("organizationName")[0].value;
eventDate = document.getElementsByName("eventDate")[0].value;
hostName = document.getElementsByName("hostName")[0].value;
createForm();
return false;
}
// Based upon number of volunteers, loop to ask recipient
name
function createForm() {
let htmlForm = `<form onsubmit="return readData()">`;
for (let i = 0; i < numberOfVolunteers; i++) {
htmlForm += `<label for="recipientName${i}">Recipient ${i +
1} name:</label>
<input type="text" name="recipientName${i}" placeholder="Enter
your Recipient ${i + 1} Name" /><br/>`;
}
htmlForm += `<input type="submit"
value="Submit"><br/><br/></form>`;
document.getElementById("pageForm").innerHTML = htmlForm;
}
function readData() {
// Reset invitation array
invitations = [];
// read input data
for (let i = 0; i < numberOfVolunteers; i++) {
const recipientName =
document.getElementsByName(`recipientName${i}`)[0].value;
// validating the input data (trim is user truncate the
whitespaces)
if (recipientName.trim() == "") {
alert(`Please fill the data for recipient ${i + 1}.`);
return false;
}
// Add to invitations array
invitations.push({ recipientName, eventDate, organizationName,
hostName });
}
displayInvitations();
return false; // making browser not to refresh
}
// Display all invitations in the invitations array
function displayInvitations() {
const article =
document.getElementById("placeholderContent");
if (invitations.length === 0) { // If invitations array is
empty
article.innerHTML = 'No invitations to display';
return;
}
let html = "";
for (let i = 0; i < invitations.length; i++) {
html += `Hello ${invitations[i].recipientName}!
<br />
<br /> You have been invited to volunteer for an event held
by
${invitations[i].organizationName} on
${invitations[i].eventDate}.
<br />
<br />Thanks!<br />
<br />
${invitations[i].hostName}<br /><br />`;
}
article.innerHTML = html;
}
</script>
</head>
<body>
<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers
<span class="dotcom">.org</span>
</a>
</div>
<nav>
<ul class="topnav">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="invitation.html"
class="active">Invitation</a>
</li>
<li>
<a href="gallery.html">Gallery</a>
</li>
<li>
<a href="registration.html">Registration</a>
</li>
</ul>
</nav>
</header>
<section id="pageGlobalForm">
<form onsubmit="return processForm()">
<label for="numberOfVolunteers">Number of
volunteers:</label>
<input type="number" min="1" name="numberOfVolunteers"
placeholder="Enter number of volunteers" /><br />
<label for="organizationName">Organization
name:</label>
<input type="text" name="organizationName" placeholder="Enter
your Organization Name" /><br />
<label for="eventDate">Event Date:</label>
<input type="text" name="eventDate" placeholder="Enter your
Event Date" /><br />
<label for="hostName">Host name:</label>
<input type="text" name="hostName" placeholder="Host Name"
/><br />
<input type="submit" value="Submit"></form><br
/>
</form>
</section>
<section id="pageForm"></section>
<article id="placeholderContent"></article>
<footer>This events site is for IT-FP3215 tasks.
</footer>
</body>
</html>
Get Answers For Free
Most questions answered within 1 hours.