By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,668 Members | 1,481 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,668 IT Pros & Developers. It's quick & easy.

Validate input data type base on pull down selection

P: 1
I am a novice when comes to JavaScript, AJAX. I am working on a form, which will allow users to update their contact information. In order to make the form flexible, I need to use pull down list.

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. <title>Testing Dynamic input field</title>
  5. <script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
  6. <script src="scriptaculous/src/effects.js" type="text/javascript"></script>
  7. <script type="text/javascript" src="fabtabulous.js"></script>
  8. <script type="text/javascript" src="validation.js"></script>
  9. <link rel="stylesheet" type="text/css" href="style.css" />
  10. <link rel="stylesheet" type="text/css" href="poc.css" />
  11. <script language="javascript">
  12. function validatetext(Dropdown_Val, Dropdown_Val_SI)
  13.  
  14. switch (Dropdown_Val[Dropdown_Val_SI].value)
  15. {
  16. case 'email' :
  17. //document.MyForm.TextField.value="Email";
  18. document.MyForm.TextField.className="required validate-email";
  19. break
  20. case 'workphone' :
  21. //document.MyForm.TextField.value="Work Phone";
  22. document.MyForm.TextField.className="required validate-workphone";
  23. break
  24. case 'cellphone' :
  25. //document.MyForm.TextField.value="Cell Phone";
  26. document.MyForm.TextField.className="required validate-phone";
  27. break
  28. case 'homephone' :
  29. //document.MyForm.TextField.value="Home Phone";
  30. document.MyForm.TextField.className="required validate-phone";
  31. break
  32. case 'pager' :
  33. //document.MyForm.TextField.value="Pager";
  34. document.MyForm.TextField.className="required validate-phone";
  35. break
  36. case 'address' :
  37. //document.MyForm.TextField.value="Address";
  38. document.MyForm.TextField.className="required";
  39. break
  40. case 'room' :
  41. //document.MyForm.TextField.value="Building and Room";
  42. document.MyForm.TextField.className="required";
  43. break
  44. default :
  45. document.MyForm.TextField.className="No Value";
  46. break
  47. }
  48.  
  49. }
  50. </script>
  51. </head>
  52. <body>
  53. <center>
  54.   <div id="container"> <br>
  55.     <h1>Update My Contacts </h1>
  56.     <div id="mainmenu">
  57.       <form name="MyForm" action="updatemycontact.php" method="post">
  58.         <fieldset>
  59.         <legend>Update contact information Form</legend>
  60.         <table>
  61.           <tr>
  62.             <th>Type</th>
  63.             <th>Contact Input</th>
  64.             <th> Ranking </th>
  65.           </tr>
  66.           <tr>
  67.             <td><select name="DropField01" onChange="validatetext(DropField01,DropField01.selectedIndex);">
  68.                 <option value="">Please select one ...</option>
  69.                 <option value="email">Email</option>
  70.                 <option value="cellphone">Cell Phone</option>
  71.                 <option value="workphone">Work Phone</option>
  72.                 <option value="homephone">Home Phone</option>
  73.                 <option value="pager">Pager</option>
  74.                 <option value="address">Address</option>
  75.                 <option value="room">Building and Room</option>
  76.               </select>
  77.             </td>
  78.             <td><div class="form-row">
  79.                 <div class="field-widget">
  80.                   <input type="text" name="TextField" class="">
  81.                 </div>
  82.               </div></td>
  83.             <td> 01 </td>
  84.           </tr>
  85.           <tr>
  86.             <td><select name="DropField02" onChange="validatetext(DropField02,DropField02.selectedIndex);">
  87.                 <option value="">Please select one ...</option>
  88.                 <option value="email">Email</option>
  89.                 <option value="cellphone">Cell Phone</option>
  90.                 <option value="workphone">Work Phone</option>
  91.                 <option value="homephone">Home Phone</option>
  92.                 <option value="pager">Pager</option>
  93.                 <option value="address">Address</option>
  94.                 <option value="room">Building and Room</option>
  95.               </select>
  96.             </td>
  97.             <td><div class="form-row">
  98.                 <div class="field-widget">
  99.                   <input type="text" name="TextField02" class="">
  100.                 </div>
  101.               </div></td>
  102.             <td> 02 </td>
  103.           </tr>
  104.           <tr>
  105.             <td><select name="DropField03" onChange="validatetext(DropField03,DropField03.selectedIndex);">
  106.                 <option value="">Please select one ...</option>
  107.                 <option value="email">Email</option>
  108.                 <option value="cellphone">Cell Phone</option>
  109.                 <option value="workphone">Work Phone</option>
  110.                 <option value="homephone">Home Phone</option>
  111.                 <option value="pager">Pager</option>
  112.                 <option value="address">Address</option>
  113.                 <option value="room">Building and Room</option>
  114.               </select>
  115.             </td>
  116.             <td><div class="form-row">
  117.                 <div class="field-widget">
  118.                   <input type="text" name="TextField03" class="" title="Enter new contact info">
  119.                 </div>
  120.               </div></td>
  121.             <td> 03 </td>
  122.           </tr>
  123.         </table>
  124.         </fieldset>
  125.         <input value="Update Contact Information" type="submit">
  126.         <input type="reset" name="Reset" value="Reset">
  127.       </form>
  128.       <script type="text/javascript">
  129.             function formCallback(result, form) {
  130.                 window.status = "valiation callback for form '" + form.id + "': result = " + result;
  131.             }
  132.  
  133.             var valid = new Validation('test', {immediate : true, onFormValidate : formCallback});
  134.  
  135.         </script>
  136.     </div>
  137.   </div>
  138. </center>
  139. </body>
  140. </html>
Any help on resolving the problems I encountered is greatly appreciated!

SkipNRun
Jul 30 '07 #1
Share this Question
Share on Google+
1 Reply


pbmods
Expert 5K+
P: 5,821
Heya, SkipNRun. Welcome to TSDN!

I award 15 points for creative use of [i] tags. However, I have to deduct 15 points for not using [code] tags.

Better luck next time.

Please use CODE tags when posting source code. See the REPLY GUIDELINES on the right side of the page next time you post.
Jul 30 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.