Ajax form submit
form-submit.html
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<HTML>
<HEAD>
<title>Demo: Ajax form submit</title>
<script type=”text/javascript” src=”js/form-submit.js”></script>
<script type=”text/javascript” src=”js/ajax.js”></script>
<style type=”text/css”>
body{
margin:0px;
font-size:0.8em;
font-family:Trebuchet MS
}
#mainContainer{
width:840px;
margin:5px;
}
table,tr,td{
vertical-align:top;
}
.textInput{
width:300px;
}
html{
margin:0px;
}
.formButton{
width:75px;
}
textarea,input,select{
font-family:Trebuchet MS;
}
i{
font-size:0.9em;
}
</style>
</head>
<body>
<div id=”mainContainer” style=”">
<fieldset>
<legend>Ajax form submit</legend>
<form action=”someplace.html” method=”post” name=”myForm”>
<div id=”formResponse”>
<table>
<tr>
<td><label for=”firstname”>First name:</label></td>
<td id=”_firstname”></td>
<td><input type=”text” class=”textInput” name=”firstname” id=”firstname”></td>
</tr>
<tr>
<td><label for=”lastname”>Last name:</label></td>
<td id=”_lastname”></td>
<td><input type=”text” class=”textInput” name=”lastname” id=”lastname”></td>
</tr>
<tr>
<td><label for=”address”>Address:</label></td>
<td id=”_address”></td>
<td><textarea class=”textInput” name=”address”></textarea></td>
</tr>
<tr>
<td><label for=”zipCode”>Zip code:</label>
<td id=”_zipCode”></td>
<td><input type=”text” name=”zipCode” size=”10″ id=”zipCode” minLength=”4″ maxlength=”10″></td>
</tr>
<tr>
<td><label for=”age”>Age:</label></td>
<td id=”_age”></td>
<td><input type=”text” name=”age” id=”age” maxlength=”3″ size=”3″ minlength=”2″></td>
</tr>
<tr>
<td><label for=”email”>Email:</label></td>
<td id=”_email”></td>
<td><input class=”textInput” type=”text” name=”email” id=”email” maxlength=”255″></td>
</tr>
<tr>
<td><label for=”url”>Url:</label></td>
<td id=”_url”></td>
<td><input class=”textInput” type=”text” name=”url” id=”url” maxlength=”255″></td>
</tr>
<tr>
<td><label for=”alpha”>Alpha chars:</label></td>
<td id=”_alpha”></td>
<td><input type=”text” class=”textInput” id=”alpha” name=”alpha” maxlength=”255″></td>
</tr>
<tr>
<td><label for=”custom”>Code:</label></td>
<td id=”_custom”></td>
<td><input type=”text” class=”textInput” id=”custom” name=”custom” maxlength=”255″></td>
</tr>
<tr>
<td><label for=”custom”>Code 2:</label></td>
<td id=”_custom2″></td>
<td><input type=”text” class=”textInput” id=”custom2″ name=”custom2″ maxlength=”255″></td>
</tr>
<tr>
<td>Country:</td>
<td id=”_country”></td>
<td><select name=”country”>
<option value=”"></option>
<option value=”NO”>Norway</option>
<option value=”DK”>Denmark</option>
<option value=”SE”>Sweden</option>
<option value=”UK”>United Kingdom</option>
<option value=”US”>United States</option>
</select>
</td>
</tr>
<tr>
<td colspan=”2″><label for=”comments”>Comments:</label></td>
<td><textarea class=”textInput” name=”comments”></textarea> </td>
</tr>
<tr>
<td>Gender:</td>
<td id=”_gender”></td>
<td>
<table cellpadding=”0″ cellspacing=”0″>
<tr>
<td><input type=”radio” name=”gender” value=”F” id=”genderFemale”></td>
<td><label for=”genderFemale”> Female</label></td>
<td> <input type=”radio” name=”gender” value=”M” id=”genderMale”></td>
<td><label for=”genderMale”> Male</label></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Hobbies:<br></td>
<td id=”_hobbies[]“></td>
<td>
<input type=”checkbox” name=”hobbies[]” value=”games” id=”hobby_games”><label for=”hobby_games”>Computer games</label><br>
<input type=”checkbox” name=”hobbies[]” value=”soccer” id=”hobby_soccer”><label for=”hobby_soccer”>Soccer</label><br>
<input type=”checkbox” name=”hobbies[]” value=”stamps” id=”hobby_stamps”><label for=”hobby_stamps”>Stamps</label><br>
<input type=”checkbox” name=”hobbies[]” value=”shopping” id=”hobby_shopping”><label for=”hobby_shopping”>Shopping</label><br>
</tr>
<tr>
<td></td>
<td id=”_agree”></td>
<td><input type=”checkbox” name=”agree” id=”agree” value=”agree”> <label for=”agree”>I agree</label></td>
</tr>
<tr>
<td colspan=”2″>
</td>
<td>
<input type=”button” id=”mySubmit” class=”formButton” value=”Send” onclick=”formObj.submit()”>
<input type=”reset” class=”formButton” value=”Reset”>
</td>
</tr>
</table>
</div>
</form>
</div>
<script type=”text/javascript”>
var formObj = new DHTMLSuite.form({ formRef:’myForm’,action:’formSubmit.php’,responseEl:’formResponse’});
</script>
</body>
</html>
formSubmit.php
<?
echo “<h1>Form posted with Ajax</h1>”;
echo “<h4>POST variables</h4>”;
foreach($_POST as $key=>$value){
if(is_array($value)){
for($no=0;$no<count($value);$no++){
echo “<b>”.$key.”[$no]</b>: “.$value[$no].”<br>”;
}
}else{
echo “<b>”.$key.”</b>: “.$value.”<br>”;
}
}
echo “<h4>GET variables:</h4>”;
foreach($_GET as $key=>$value){
if(is_array($value)){
for($no=0;$no<count($value);$no++){
echo “<b>”.$key.”[$no]</b>: “.$value[$no].”<br>”;
}
}else{
echo “<b>”.$key.”</b>: “.$value.”<br>”;
}
}
?>
