I have seen an answeron this site regarding this question but cannot get it to w
ID: 3685898 • Letter: I
Question
I have seen an answeron 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
<!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
<html>
<head>
<script type="text/javascript">
var http_request; //global variable
function makePOSTRequest(url, parameters) {
http_request = false;
/* For Firefox*/
if (window.XMLHttpRequest) {
http_request = new XMLHttpRequest();
} else /*For IE*/
if (window.ActiveXObject) {
try {
/*For some versions of IE*/
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
/*For some other versions of IE*/
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
function AjaxFunction(email)
{
alert(email);
xmlhttp = createXMLHttpRequest() ;
xmlhttp.open("GET","regist_pro.php?email=" + email, true);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState = 4)
{
return;
}
document.getElementById("emailtext").innerHTML=xmlhttp.responseText;
};
xmlhttp.send(null);
}
function createXMLHttpRequest() {
try
{
return new XMLHttpRequest();
}
catch(e)
{}
try
{
return new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{}
alert("XMLHttpRequest not supported");
return null;
</script>
</head>
<body>
<table cellpadding="2" height='3'>
<div id="user">
<form method="get" action="regist_pro.php"name="name">
<tr>
<td><font size='2'>First name: </font></td>
<td><input name="firstname" type="text" /></td>
<td><font size='2'>Email Address: </font></td>
<td><input name="email" type="text"/></td>
<td><font size='2'>Sex:</font>
<select name="sex">
<option>Female</option>
<option>Male</option>
</td>
</tr>
<tr>
<td><font size='2'>Last name: </font></td>
<td><input name="lastname" type="text" /></td>
<td><font size='2'>Password: </font></td>
<td><input name="password" type="password" /></td>
<td><font size='2'>Birthday: </font></td>
<td>
</tr>
<tr>
<td colspan='2' align='right'><input type="submit" name="submit" value="Register" size='5'/></td>
<td align='right'><input type="reset" name="reset" value="Reset" size='5'/></td>
</tr>
</form>
</div>
<div id="emailtxt">esfs</div>
</table>
</body>
</html>
Hope this code helps you