Depends on the pull down list selection, I use script.aculo.us to validate the user input before submit and pass the necessary data, such as contact type, contact information and ranking to a php program for updating. This form should allow multiple contacts being added or edited, thus there are multiple pull-down lists, and corresponding input fields and ranking.
I run into several problems with my form -
(1) Build a flexible JavaScript function, so every time when an user selects a contact type from anyone of the pull down list, and enters contact information to the input field, the form will validate the input to make sure the user entered valid data type.
(2) So far with the switch statement, I was able to pass the correct validation variable to the first input class, however, the input field does not get validated and I cannot figure out why?
(3) What is the best way to pass the contact information to the php program for database update?
Here is my code:
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html>
- <head>
- <title>Testing Dynamic input field</title>
- <script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
- <script src="scriptaculous/src/effects.js" type="text/javascript"></script>
- <script type="text/javascript" src="fabtabulous.js"></script>
- <script type="text/javascript" src="validation.js"></script>
- <link rel="stylesheet" type="text/css" href="style.css" />
- <link rel="stylesheet" type="text/css" href="poc.css" />
- <script language="javascript">
- function validatetext(Dropdown_Val, Dropdown_Val_SI)
- {
- switch (Dropdown_Val[Dropdown_Val_SI].value)
- {
- case 'email' :
- //document.MyForm.TextField.value="Email";
- document.MyForm.TextField.className="required validate-email";
- break
- case 'workphone' :
- //document.MyForm.TextField.value="Work Phone";
- document.MyForm.TextField.className="required validate-workphone";
- break
- case 'cellphone' :
- //document.MyForm.TextField.value="Cell Phone";
- document.MyForm.TextField.className="required validate-phone";
- break
- case 'homephone' :
- //document.MyForm.TextField.value="Home Phone";
- document.MyForm.TextField.className="required validate-phone";
- break
- case 'pager' :
- //document.MyForm.TextField.value="Pager";
- document.MyForm.TextField.className="required validate-phone";
- break
- case 'address' :
- //document.MyForm.TextField.value="Address";
- document.MyForm.TextField.className="required";
- break
- case 'room' :
- //document.MyForm.TextField.value="Building and Room";
- document.MyForm.TextField.className="required";
- break
- default :
- document.MyForm.TextField.className="No Value";
- break
- }
- }
- </script>
- </head>
- <body>
- <center>
- <div id="container"> <br>
- <h1>Update My Contacts </h1>
- <div id="mainmenu">
- <form name="MyForm" action="updatemycontact.php" method="post">
- <fieldset>
- <legend>Update contact information Form</legend>
- <table>
- <tr>
- <th>Type</th>
- <th>Contact Input</th>
- <th> Ranking </th>
- </tr>
- <tr>
- <td><select name="DropField01" onChange="validatetext(DropField01,DropField01.selectedIndex);">
- <option value="">Please select one ...</option>
- <option value="email">Email</option>
- <option value="cellphone">Cell Phone</option>
- <option value="workphone">Work Phone</option>
- <option value="homephone">Home Phone</option>
- <option value="pager">Pager</option>
- <option value="address">Address</option>
- <option value="room">Building and Room</option>
- </select>
- </td>
- <td><div class="form-row">
- <div class="field-widget">
- <input type="text" name="TextField" class="">
- </div>
- </div></td>
- <td> 01 </td>
- </tr>
- <tr>
- <td><select name="DropField02" onChange="validatetext(DropField02,DropField02.selectedIndex);">
- <option value="">Please select one ...</option>
- <option value="email">Email</option>
- <option value="cellphone">Cell Phone</option>
- <option value="workphone">Work Phone</option>
- <option value="homephone">Home Phone</option>
- <option value="pager">Pager</option>
- <option value="address">Address</option>
- <option value="room">Building and Room</option>
- </select>
- </td>
- <td><div class="form-row">
- <div class="field-widget">
- <input type="text" name="TextField02" class="">
- </div>
- </div></td>
- <td> 02 </td>
- </tr>
- <tr>
- <td><select name="DropField03" onChange="validatetext(DropField03,DropField03.selectedIndex);">
- <option value="">Please select one ...</option>
- <option value="email">Email</option>
- <option value="cellphone">Cell Phone</option>
- <option value="workphone">Work Phone</option>
- <option value="homephone">Home Phone</option>
- <option value="pager">Pager</option>
- <option value="address">Address</option>
- <option value="room">Building and Room</option>
- </select>
- </td>
- <td><div class="form-row">
- <div class="field-widget">
- <input type="text" name="TextField03" class="" title="Enter new contact info">
- </div>
- </div></td>
- <td> 03 </td>
- </tr>
- </table>
- </fieldset>
- <input value="Update Contact Information" type="submit">
- <input type="reset" name="Reset" value="Reset">
- </form>
- <script type="text/javascript">
- function formCallback(result, form) {
- window.status = "valiation callback for form '" + form.id + "': result = " + result;
- }
- var valid = new Validation('test', {immediate : true, onFormValidate : formCallback});
- </script>
- </div>
- </div>
- </center>
- </body>
- </html>
SkipNRun