Hi,

I have created the javascript code below and it isn't working the way I need it to and I am not sure what I need to change in order to get it to work like it should. The recipients name should not be in an alert pop up, the user should enter the number of recipients and then click a submit button that dynically display the number of recipient fields entered and the rest of the form fields. Then when I click the next submit button, it should display the invitations individually on the screen. Any help to at least get me to the point of the the user entering the number of recipients and the number of recipients field displaying would be extremely helpful.

Within assessment 2 you present the user with a question to define how many recipients invitations they would need. Once the user defines the number of recipients, they hit the enter button, and the number of recipient form boxes are generated. For example, if I entered three users, I would see the following form boxes on the same page Recipient 1, Recipient 2, Recipient 3, Organization Name, Event Date, URL, Host Name.

The recipients' information should be stored in an array that you can manipulate and cycle through within your script. Storing in an array stops the use of excess if statements and loops. Once the user hits the submit button, it should populate all of the recipients' names in the multiple paragraphs you have shown.

You can display the question of recipients when you first go to the page and when the user hits the enter key it would generate the rest of the form with all of the recipients. After the user hits the submit it should display all the information at the bottom of the page.

HTML:

CapellaVolunteers.org

• Home
• Invitation
• Gallery
• Registration

Number of Recipients: Organization name: Event Date: URL: Host name:

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

This events site is for IT-FP3215 tasks.

Javascript:

let invitation = {}; //Create invitation object that properties will be added to later let recipientNames = []; //Create array for recipient names to be added to later

//Creating function to disable the form function disableForm(n) { document.getElementById("form").style.display = "none"; var html = ""; for (var i = 0; i < n; i++) { html += "recipientNumber-form " + (i + 1) + " "; } html += "" var special = document.getElementById("RecipientNamesForm"); special.innerHTML = html; }

function completeInvitations() { //Console log method to log an object in the console console.log("Start here"); /*converts its first argument to a string, parses that string, then returns an integer or NaN*/ n = parseInt(invitation["NumberOfRecipient"]); for (var i = 0; i < n; i++) { var name = document.getElementsByClassName("name")[i].value; if (name == "") { alert("All fields are required!."); return false; } //method to get the names recipientNames.push(name); } console.log(recipientNames) var html = ""; //looping through the recipients entered by the user and then creating the invitation for each entry. for (var i = 0; i < n; i++) { html += "Hello " + recipientNames[i] + " You have been invited to volunteer for an event held by organization " + invitation["OrganizationName"] + " on " + invitation["EventDate"] + " Please come on the following website: " + invitation["WebsiteURL"] + " to sign up as a volunteer. Thanks! " + invitation["HostName"] + " "; } document.getElementById("placeholderContent").style.display = "none"; var special = document.getElementById("Content"); special.innerHTML = html; return false; }

function create_invitation() //Function to replace placeholders in invitation { // Storing Number of Recipient in a dictionary invitation.NumberOfRecipient = document.getElementById("recipientNumber_form").value;

// Storing Organization Name invitation.OrganizationName = document.getElementById("organizationName_form").value;

// Storing Event Date invitation.EventDate = document.getElementById("eventDate_form").value;

// Storing Website URL invitation.WebsiteURL = document.getElementById("websiteURL_form").value;

// Storing Host Name invitation.HostName = document.getElementById("hostName_form").value;

//Checking the number of recipients input is a number if (isNaN(invitation.NumberOfRecipient)) { alert("Enter a Numeric for the Number Of Recipient Field."); return false; } disableForm(invitation.NumberOfRecipient); return false; }

CSS if needed:

body { font: 15px arial, sans-serif; color: #808080; } input[type=text], select ,input[type=password],radio{ width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { width: 100%; background-color: #800D1E; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #802F1E; } section { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } article { border-radius: 5px; background-color: #CCCCCC; padding: 20px; color: #222222; } ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.topnav li { float: left; } ul.topnav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } ul.topnav li a:hover:not(.active) { background-color: #111; } ul.topnav li a.active { background-color: #CCCCCC; color: #333 } ul.topnav li.right { float: right; } @media screen and (max-width: 600px) { ul.topnav li.right, ul.topnav li { float: none; } } .top { position: relative; background-color: #ffffff; height: 68px; padding-top: 20px; line-height: 50px; overflow: hidden; z-index: 2; } .logo { font-family: arial; text-decoration: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 37px; letter-spacing: 3px; color: #555555; display: block; position: absolute; top: 17px; } .logo .dotcom { color: #800D1E } .topnav { position: relative; z-index: 2; font-size: 17px; background-color: #5f5f5f; color: #f1f1f1; width: 100%; padding: 0; letter-spacing: 1px; } .top .logo { position: relative; top: 0; width: 100%; text-align: left; margin: auto } footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center; } div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; }

div.gallery:hover { border: 1px solid #777; }

div.gallery img { width: 100%; height: auto; }

div.desc { padding: 15px; text-align: center; }

Thanks,

Annette