16.7 Create an ajax-enabled version of the form from fig. 2.15 (code below). As
ID: 3685020 • Letter: 1
Question
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
<!DOCTYPE html>
<!-- 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
<!--
an AJAX enabled feedback form.
-->
<!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>
// validEmails.xml
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.