473,396 Members | 1,933 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

Validate input data type base on pull down selection

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
1 3951
pbmods
5,821 Expert 4TB
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

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

Similar topics

1
by: John Smith | last post by:
Ok, I have 2 xml files that are really similar. They have the exact same structure exept that in one XML some element are required and in the other they are simply absent from the xml. Problem...
9
by: chuck | last post by:
I need some help with validating user input. I am writing a C computer program for an intro to C course. Here is the situation. I am creating an application that will do currency conversions. ...
1
by: rajarameshvarma | last post by:
Hi, I have two user controls in an asp.net webpage each contains a DropDownList. Depending on the selection of the drop down in one user control i need to populate data in the other drop down...
11
by: TokyoJ | last post by:
I run a small camp in Alaska for kids and my director is asking for a web form. Could someone please have a look and offer some advice on where I'm making mistake(s)? I'm using the RegExp function...
14
by: n3o | last post by:
Hello Comp.Lang.C Members, I have an issue with user input that I have been trying to figure out for the longest. For instance, let's say you have something like this: void foo() { int num;...
3
by: manxie | last post by:
Dear All Readers, I'm supposed to create a program with a switch and using voids to execute number of codes, that includes finding sum, average, maximum, and minimum, please read my code:...
7
by: ammweb | last post by:
How would you validate a page that had several drop down menus. When the submit button is submitted, and NO selection has been made? See code below: <html> <head> </head> <body> <table...
5
by: cstansbu | last post by:
This is the item selection piece for a Sharepoint knowledge base. If you type a valid plan code you get info, but if you type garbage you get a 404 file not found. I want to check user input against...
5
by: lolodede | last post by:
i would like to make sure user at least one checkbox and if it select otherand need to make sure to write something in text box <?php $name = 0; $cusID=0; $hobbies =0 ; if (isset ($_POST)) {...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.