Connecting Tech Pros Worldwide Help | Site Map
Reply
 
LinkBack Thread Tools Search this Thread
  #1  
Old September 17th, 2008, 01:02 AM
Newbie
 
Join Date: Sep 2008
Posts: 2
Default Validation of text field upon radio button selection

Hey Guys,

Please could anyone help me out with the following form I need to create a validation on the email field only if the user checked the radio button named Email.

Thanks in advance.


[HTML]<form action="" method="get">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Name:</td>
<td>
<input type="text" name="textfield" id="textfield" />
</td>
</tr>
<tr>
<td>Phone Number:</td>
<td><input type="text" name="textfield2" id="textfield2" /></td>
</tr>
<tr>
<td>E-mail Address:</td>
<td><input type="text" name="textfield3" id="textfield3" /></td>
</tr>
<tr>
<td>Contact Method:</td>
<td>
<input type="radio" name="radio" id="radio" value="radio" /> Phone <input type="radio" name="radio" id="radio" value="radio" />
Email
</td>
</tr>
<tr>
<td>Type of Inquiry:</td>
<td><label><select name="select" id="select" >
<option selected="selected">Question</option>
<option >Comment</option>
</select></label></td>
</tr>
<tr>
<td>Content:</td>
<td><textarea name="textarea" id="textarea" cols="45" rows="5"></textarea></td>
</tr>
</table>
<input name="Submit" type="button" value="Submit Form" />
</div></form>[/HTML]

Last edited by acoder; September 18th, 2008 at 12:04 AM. Reason: Added [code] tags
Reply
  #2  
Old September 17th, 2008, 05:04 AM
stepterr's Avatar
Familiar Sight
 
Join Date: Nov 2007
Age: 26
Posts: 135
Default

Quote:
Originally Posted by pureadrenaline
Hey Guys,

Please could anyone help me out with the following form I need to create a validation on the email field only if the user checked the radio button named Email.

Thanks in advance.


<form action="" method="get">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Name:</td>
<td>
<input type="text" name="textfield" id="textfield" />
</td>
</tr>
<tr>
<td>Phone Number:</td>
<td><input type="text" name="textfield2" id="textfield2" /></td>
</tr>
<tr>
<td>E-mail Address:</td>
<td><input type="text" name="textfield3" id="textfield3" /></td>
</tr>
<tr>
<td>Contact Method:</td>
<td>
<input type="radio" name="radio" id="radio" value="radio" /> Phone <input type="radio" name="radio" id="radio" value="radio" />
Email
</td>
</tr>
<tr>
<td>Type of Inquiry:</td>
<td><label><select name="select" id="select" >
<option selected="selected">Question</option>
<option >Comment</option>
</select></label></td>
</tr>
<tr>
<td>Content:</td>
<td><textarea name="textarea" id="textarea" cols="45" rows="5"></textarea></td>
</tr>
</table>
<input name="Submit" type="button" value="Submit Form" />
</div></form>

pureadrenaline,
First thing you will need to do is set the value of the radio button to something unique so that you can tell if they selected "phone" or "email". Currently you have the value for both of them set to "radio".

Now, to get the value of the radio button you'll need to iterate through all the radio buttons in that set, those that have the same name, and then get the value from the one that is checked.

Here's an example of this:

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript>
  2. <!--
  3.  
  4. function get_radio_value()
  5. {
  6. for (var i=0; i < document.formname.radio.length; i++)
  7.    {
  8.    if (document.formname.radio[i].checked)
  9.       {
  10.       var rad_val = document.formname.radio[i].value;
  11.       }
  12.    }
  13. }
  14.  
  15. //-->
  16. </script>
Now you can check what rad_val is equal to and if it is "email" then you can do your email validation.
Reply
  #3  
Old September 17th, 2008, 08:03 AM
Newbie
 
Join Date: Sep 2008
Posts: 2
Default

ok, Could you please give me the whole code of the page?

Thanks a lot.
Reply
  #4  
Old September 17th, 2008, 03:15 PM
stepterr's Avatar
Familiar Sight
 
Join Date: Nov 2007
Age: 26
Posts: 135
Default

Quote:
Originally Posted by pureadrenaline
ok, Could you please give me the whole code of the page?

Thanks a lot.
Here's an example to get you started. You can expand upon it further. In the example I've changed the field names as I find it helpful to name them something meaningful, especially if you will be doing validation on them.

The form (only with the fields in question for this example):
Expand|Select|Wrap|Line Numbers
  1. <form name="contactform" method="post">
  2. <table border="0" cellspacing="0" cellpadding="0" align="center">
  3.     <tr>
  4.         <td>Phone Number:</td>
  5.         <td><input type="text" name="Phone" id="Phone" /></td>
  6.     </tr>
  7.     <tr>
  8.         <td>E-mail Address:</td>
  9.         <td><input type="text" name="Email" id="Email" /></td>
  10.     </tr>
  11.     <tr>
  12.         <td>Contact Method:</td>
  13.         <td>
  14.         <input type="radio" name="Method" id="Method" value="Phone" />Phone 
  15.         <input type="radio" name="Method" id="Method" value="Email" />Email 
  16.         </td>
  17.     </tr>
  18. </table>
  19. <input name="Submit" type="button" value="Submit Form" onclick="get_radio_value()" />
  20. </form>

The javascript:

Expand|Select|Wrap|Line Numbers
  1. <script language="javascript">
  2.  
  3. var f=document.contactform;
  4.  
  5. function get_radio_value()
  6. {
  7.    for (var i=0; i < f.Method.length; i++)
  8.    {
  9.       if (f.Method[i].checked)
  10.       {
  11.           var rad_val = f.Method[i].value;
  12.            if(rad_val == "Email")
  13.          {
  14.              if(bad_email(f.Email.value))
  15.              {
  16.                 alert("Sorry, You entered an invalid email address.");
  17.                 f.Email.focus();
  18.                 return false;
  19.             }
  20.          }
  21.       }
  22.    }
  23. }
  24.  
  25. function bad_email(emailaddr)
  26. {
  27.     var emailFilter=/^.+@.+\..{2,3}$/;
  28.     if (!(emailFilter.test(emailaddr)))
  29.     {
  30.            return true;
  31.     }
  32.     var illegalChars= /[\(\)\<\>\,\;\:\\\/\"\[\]]/
  33.     if (emailaddr.match(illegalChars))
  34.     {
  35.           return true;
  36.     }
  37.     return false;
  38. }
  39. </script>
This is just a basic example and it's only doing the validation for you at this point. Don't forget that once your validation passes, you'll actually want this form to submit to something, at least I'm assuming you would. :-)
Reply
  #5  
Old September 18th, 2008, 03:26 PM
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 12,964
Default

Note that IDs must be unique. If it's the email button you want, give it a unique ID, e.g. "email", and then access using document.getElementById().

PS. please use code tags when posting code.
Reply
Reply

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Popular Articles

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 205,248 network members.