<!DOCTYPE html>
<html>
<!--
================================================================================================
== This form inserts a row in a database based on he names of the form fields below
== Must provide a hidden field called _table
== The database table must have column names that are the same as the form field names below
================================================================================================
-->
<head>
<title>Full HTML entry from</title>
<style>
.show {visibility:visible; color:red; vertical-align:top}
.hide {visibility:hidden; }
</style>
</head>
<body bgcolor="lightyellow">
<h1><center>The Ice Cream Shop</center></h1>
<h2>Insert data in database more generically</h2>
<!-- In the form below you can simply call onsubmit=process() if you do not want to validate -->
<form id="form" method="GET" action="/~sultans/php/demo/3webDB/genericInsert.php" target="popup"
onsubmit="return validate()">
<fieldset style='width:580px; height:310px; border-color:gold'>
<legend>Enter Fields Below</legend>
<table bgcolor=lightgray width=570px>
<tr>
<td><b>Enter First Name
<td><input type="text" name="fname" id="fname"> <span id=f1 class=hide>*</span>
<tr>
<td><b>Last Name
<td><input type="text" name="lname" id="lname"> <span id=f2 class=hide>*</span>
<tr>
<td><b>Enter Address
<td><textarea name="address" id="addr" rows="4" cols="47"></textarea> <span id=f3 class=hide>*</span>
<tr>
<td><b>Choose a Brand
<td><select name="brand" id="brand">
<option value=''>- choose from below -</option>
<option>Basking-Robbins</option>
<option>Ben & Jerry"s</option>
<option>Carvel</option>
<option>Cold Stone</option>
<option>Haagen-Dazs</option>
<option>Hershey"s</option>
</select>
<span id=f4 class=hide>*</span>
<tr>
<td><b>Ice Cream Flavor
<td><select name="flavor[]" id="flavor" SIZE="4" multiple style='width:150px'>
<option>Vanilla</option>
<option>Chocolate</option>
<option>Strawberry</option>
<option>Butter Pecan</option>
<option>Rocky Road</option>
<option>French Vanilla</option>
<option>Pistachio</option>
</select>
<span id=f5 class=hide>*</span>
<tr>
<td><b>Select Topping
<td>
<input type="checkbox" name="topping[]" id="top1" value="hotFudge" /> Hot Fudge
<input type="checkbox" name="topping[]" id="top2" value="sprinkles" /> Sprinkles
<input type="checkbox" name="topping[]" id="top3" value="nuts" /> Nuts
<input type="checkbox" name="topping[]" id="top4" value="whippedCream" /> Whipped Cream
<span id=f6 class=hide>*</span>
<tr>
<td><b>Credit Card
<td>
<input type="radio" name="creditCard" id="cc1" value="MC" /> Master Card
<input type="radio" name="creditCard" id="cc2" value="VISA" /> Visa
<input type="radio" name="creditCard" id="cc3" value="AMEX" /> American Express
<input type="radio" name="creditCard" id="cc4" value="DISC" /> Discover
<span id=f7 class=hide>*</span>
<tr>
<td colspan=2>
<input type="submit" value=" Place Order " />
<input type="reset" value="Cancel" />
</table>
<input type=hidden name=_table value=generic_tbl>
</fieldset>
<div id=f8 class=hide>Please correct error fields above</div>
</form>
<script>
//====== JavaScript code to validate the form entry fields ========================
function validate()
{
var errorMsg = "";
document.getElementById("f1").className = "hide"; //--- hide all previous red *
document.getElementById("f2").className = "hide";
document.getElementById("f3").className = "hide";
document.getElementById("f4").className = "hide";
document.getElementById("f5").className = "hide";
document.getElementById("f6").className = "hide";
document.getElementById("f7").className = "hide";
document.getElementById("f8").className = "hide";
if (document.getElementById('fname').value == '') { //--- validate first name
document.getElementById("f1").className = "show";
errorMsg = "yes";
}
if (document.getElementById('lname').value == '') { //--- validate last name
document.getElementById("f2").className = "show";
errorMsg = "yes";
}
if (document.getElementById('addr').value == '') { //--- validate address
document.getElementById("f3").className = "show";
errorMsg = "yes";
}
if (document.getElementById('brand').value == '') { //--- validate brand
document.getElementById("f4").className = "show";
errorMsg = "yes";
}
if (document.getElementById('flavor').value == '') { //--- validate flavor
document.getElementById("f5").className = "show";
errorMsg = "yes";
}
if (document.getElementById('top1').checked == false && //--- validate topping
document.getElementById('top2').checked == false &&
document.getElementById('top3').checked == false &&
document.getElementById('top4').checked == false ) {
document.getElementById("f6").className = "show";
errorMsg = "yes";
}
if (document.getElementById('cc1').checked == false && //--- validate credit card
document.getElementById('cc2').checked == false &&
document.getElementById('cc3').checked == false &&
document.getElementById('cc4').checked == false ) {
document.getElementById("f7").className = "show";
errorMsg = "yes";
}
if (errorMsg != '') { //--- if there are errors
document.getElementById("f8").className = "show"; // show error message at bottom
return(false);
}
submit = confirm('Please confirm your order.....'); //--- confirm submission
if (submit == false) // if click on Cancel
return(false); // do not submit
process(); //call submit function
}
//====== JavaScript code to submit the form to the server ========================
function process()
{
nw = window.open('','popup','width=500,height=150') //open a window
//will be used for output of server
nw.document.write("Processing...");
}
</script>
</body>
</html>