I have seen an answer on this site regarding this question but cannot get it to
ID: 3686795 • Letter: I
Question
I have seen an answer on this site regarding this question but cannot get it to work. Will rate for working answer
16.7 Create an ajax-enabled version of the form from fig. 2.15 (code below). As the user moves between form fields, ensure that each field is non-empty.
1. For the e-mail field ensure the e-mail has a valid format.
2. Create an xml file that contains a list of e-mail addresses that are not allowed to post feedback.
3. Each time a user enters an e-mail address, check if its on the list; if so display an appropriate message.
Fig 2.15 CODE
<!-- Fig. 2.15: form2.html -->
<!-- Form using a variety of components. -->
<html>
<head>
<meta charset = "utf-8">
<title>More Forms</title>
</head>
<body>
<h1>Feedback Form</h1>
<p>Please fill out this form to help
us improve our site.</p>
<form method = "post" action = "http://www.deitel.com">
<input type = "hidden" name = "recipient"
value = "deitel@deitel.com">
<input type = "hidden" name = "subject"
value = "Feedback Form">
<input type = "hidden" name = "redirect"
value = "main.html">
<p><label>Name:
<input name = "name" type = "text" size = "25">
</label></p>
<!-- <textarea> creates a multiline textbox -->
<p><label>Comments:<br>
<textarea name = "comments"
rows = "4" cols = "36">Enter comments here.</textarea>
</label></p>
<!-- <input type = "password"> inserts a -->
<!-- textbox whose display is masked with -->
<!-- asterisk characters -->
<p><label>E-mail Address:
<input name = "email" type = "password" size = "25">
</label></p>
<p>
<strong>Things you liked:</strong><br>
<label>Site design
<input name = "thingsliked" type = "checkbox"
value = "Design"></label>
<label>Links
<input name = "thingsliked" type = "checkbox"
value = "Links"></label>
<label>Ease of use
<input name = "thingsliked" type = "checkbox"
value = "Ease"></label>
<label>Images
<input name = "thingsliked" type = "checkbox"
value = "Images"></label>
<label>Source code
<input name = "thingsliked" type = "checkbox"
value = "Code"></label>
</p>
<!-- <input type = "radio"> creates a radio -->
<!-- button. The difference between radio buttons -->
<!-- and checkboxes is that only one radio button -->
<!-- in a group can be selected. -->
<p>
<strong>How did you get to our site?:</strong><br>
<label>Search engine
<input name = "howtosite" type = "radio"
value = "search engine" checked></label>
<label>Links from another site
<input name = "howtosite" type = "radio"
value = "link"></label>
<label>Deitel.com Web site
<input name = "howtosite" type = "radio"
value = "deitel.com"></label>
<label>Reference in a book
<input name = "howtosite" type = "radio"
value = "book"></label>
<label>Other
<input name = "howtosite" type = "radio"
value = "other"></label>
</p>
<p>
<label>Rate our site:
<!-- the <select> tag presents a drop-down -->
<!-- list with choices indicated by the -->
<!-- <option> tags -->
<select name = "rating">
<option selected>Amazing</option>
<option>10</option>
<option>9</option>
<option>8</option>
<option>7</option>
<option>6</option>
<option>5</option>
<option>4</option>
<option>3</option>
<option>2</option>
<option>1</option>
<option>Awful</option>
</select>
</label>
</p>
<p>
<input type = "submit" value = "Submit">
<input type = "reset" value = "Clear">
</p>
</form>
</body>
</html>
Explanation / Answer
Hi below i have given the code for your reference, Please try it out.
--> <!DOCTYPE html> <!-- Internal hyperlinks to make pages more navigable. --> <html> <head> <title>More Forms</title> <meta charset="utf-8"> <script type="text/javascript"> function validateEmail() { document.getElementById("displayEmailError").innerHTML = ""; // var re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([azA-Z-0-9]+.)+[a-zA-Z]{2,}))$/; document.getElementById("email").value = document.getElementById("email").value.toLowerCase(); var re = /^[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$/; if (!re.test(document.getElementById("email").value)){ document.getElementById("displayEmailError").innerHTML = "<font color="red">Invalid E-mail address. Please verify it</font>"; // alert("Invalid E-mail address. Please verify it"); return false; } return true; } function validateField(ref) { document.getElementById(ref.name + 'RequiredError').innerHTML = ""; if (ref.value.length == 0){ document.getElementById(ref.name + 'RequiredError').innerHTML = "<font color="red">Field is required</font>"; return false; } if ((ref.name == "comments") && (ref.value == "Enter comments here.")){ document.getElementById(ref.name + 'RequiredError').innerHTML = "<font color="red">Field is required</font>"; return false; } return true; } function validateAll(){ var passed = validateField(document.getElementById("name")); if (passed){ passed = validateField(document.getElementById("email")); if (passed){ passed = validateEmail(); }else{ validateEmail(); } }else{ validateField(document.getElementById("email")); } if (passed){ passed = validateField(document.getElementById("comments")); }else{ validateField(document.getElementById("comments")); } if (passed){ ajaxFile.readFile(); } return passed; } //A simple Ajax request function function ajaxRequest(url, cbFunc) { //parameters: the url of the data, the callback function if (document.getElementById) { // does browser support this property? // if so, determine which browser and create a new ajaxObj obj var ajaxObj = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest(); } if (ajaxObj) { // if the ajaxObj object was successfully created? ajaxObj.onreadystatechange = function() { // before making the request, set up a function to run whenever readyState changes if (ajaxObj.readyState == 4 && ajaxObj.status == 200) { // if true, then the request data has arrived cbFunc(ajaxObj.responseXML); // pass the data to the callback function } } ajaxObj.open("GET", url, true); // open server connection - GET request, requested URL, Asychronous set to true ajaxObj.send(null); // send the request } } // use the Ajax request function // call to Ajax function ajaxFile = { readFile:function () { // makes the call to the ajaxObj ajaxFile.firstName = (document.getElementById("name").value); ajaxFile.email = document.getElementById("email").value; ajaxRequest('validEmails.xml',ajaxFile.cbReadFile); }, // callback function cbReadFile:function (theData) { // process response from Ajax function emails = theData.getElementsByTagName("email"); var validEmail = false; var i=0; for (i=0;i<emails.length;i++){ if (ajaxFile.email.toLowerCase() == emails[i].childNodes[0].nodeValue.toLowerCase()) { validEmail = true; break; } } if (validEmail==false) document.getElementById('displayEmailError').innerHTML = "<font color="red">E-mail is not registered !</font>"; else document.getElementById('displayEmailError').innerHTML = "<font color="blue">E-mail is registered into the valid emails XML file!</font>"; } } </script> </head> <body> <h1>Feedback Form</h1> <p>Please fill out this form to help us improve our site.</p> <form method="post" action="#"> <p><label>Name:</label><br /> <input name="name" id="name" type="text" size="25" /> <label id="nameRequiredError"/> </p> <!-- <textarea> creates a multiline textbox --> <p><label>Comments:</label><br /> <textarea name="comments" id="comments" placeholder="Enter comments here." rows="4" cols="36"></textarea> <label id="commentsRequiredError"/> </p> <p><label>E-mail Address:</label><br /> <input name="email" id="email" type="text" size="25" placeholder="Please type a valid registered e-mail here" /> <label id="emailRequiredError"></label> <b><label id="displayEmailError"></label></b> </p> <p> <strong>Things you liked:</strong><br /> <label>Site design</label> <input name="thingsliked" id="thingsliked" type="checkbox" value="Design"/> <label>Links</label> <input name="thingsliked" id="thingsliked" type="checkbox" value="Links"/> <label>Ease of use</label> <input name="thingsliked" id="thingsliked" type="checkbox" value="Ease"/> <label>Images</label> <input name="thingsliked" id="thingsliked" type="checkbox" value="Images"/> <label>Source code</label> <input name="thingsliked" id="thingsliked" type="checkbox" value="Code"/> </p> <!-- <input type = "radio" /> creates a radio --> <!-- button. The difference between radio buttons --> <!-- and checkboxes is that only one radio button --> <!-- in a group can be selected. --> <p> <strong>How did you get to our site?:</strong><br /> <label>Search engine</label> <input name="howtosite" id="howtosite" type="radio" value="search engine" checked="checked"/> <label>Links from another site</label> <input name="howtosite" id="howtosite" type="radio" value="link" /> <label>Deitel.com Web site</label> <input name="howtosite" id="howtosite" type="radio" value="deitel.com" /> <label>Reference in a book</label> <input name="howtosite" id="howtosite" type="radio" value="book" /> <label>Other</label> <input name="howtosite" id="howtosite" type="radio" value="other" /> </p> <p> <label>Rate our site:</label> <!-- the <select> tag presents a drop-down --> <!-- list with choices indicated by the --> <!-- <option> tags --> <select name = "rating"> <option selected = "selected">Amazing</option> <option>10</option> <option>9</option> <option>8</option> <option>7</option> <option>6</option> <option>5</option> <option>4</option> <option>3</option> <option>2</option> <option>1</option> <option>Awful</option> </select> </p> <p> <input type="submit" value="Submit" /> <input type="reset" value="Clear" /> </p> </form> </body> </html>