Java Script: Using Variables in a Form Overview In this assessment, use the Web page called “invitation.html” found in t

Post by **answerhappygod** » Mon Jun 06, 2022 6:22 pm

Java Script: Using Variables in a
Form
Overview
In this assessment, use the Web page called “invitation.html”
found in the Required Resources (in the zip file called
IT-FP3215.zip) to add functionality to an interactive form
that generates an invitation to volunteers for an event. The file
will have the following invitation message placeholder and a form
below it. You will add JavaScript to the form that will allow a
user to dynamically fill out the invitation.
Hello __recipientName_____!
You have been invited to volunteer for an event held by
__organizationName_____ on ___eventDate_____.
Please come to the following website: to sign up as a
volunteer.
Thanks!
__hostName__
Hints:
Directions
Read the Overview. Use the invitation.html
file in the Resources as a template for completing this
assessment.
Write JavaScript that enables the invitation to be dynamically
completed using the form. Make sure to do each of the
following:
Ok I followed the given direction and created this code below
but I still cannot get the functionality:
<!DOCTYPE html>
invitation.html
<html lang="en-US">
<head>
<title>Invitation Page</title>
<link rel"stylesheet" type = "text/css" href =
"css/main.css"/>
<script type =
"text/javascript">
var
invitation = "Hello__recipientName____!\n You have been invited to
volunteer for an event held
by__organizationName____on__eventDate____.Please come to the
following website: to sign up as a volunteer.\n
Thanks!\n__hostName__";
//Now is the time
to create alert messages;
function
checkPageForm(){

//Now is the time to create the alert for hello

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

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

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

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

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

//Now is the time to create an alert for recipientName,
organizationName, eventDate,hostName

invitation =
invitation.replace("recipientName",recipientName);

invitation =
invitation.replace("organizationName",organizationName);

invitation =
invitation.replace("eventDate",eventDate);

invitation = invitation.replace("hostName",hostName);

//Now with invitation.replace I have replaced recipientName,
organizatioName, eventDate, and hostName

alert(invitation);

//Now I will begin to create the
document.getElementByID("abc").innerHTML
}
</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 = "pageForm">

<form onsubmit =
"checkPageForm()">

<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 = "checkPageForm()">

</form>
</section>
</body>
</html>