asked on

Javascript form validation

I'm having an issue closing out this "simple" form validation script.
My form has a radio button that allows the user to choose phone or email as the way to contact them. If they select email, but then don't enter an email address, i want to make the alert specific to that error.

It's not registereing. When i run the code, the alert displays "undefined"... I can't seem to see what I'm doing wrong. I've included the javascript and the form.

Any ideas would be appreciated!!!

function formCheck(){
		if (document.sendRequest.theName.value == "") {
			alert("Oops! Please enter a name!");
				document.sendRequest.theName.focus();
			return false;
		}
		
		if (document.sendRequest.theInfo.value == ""){
			alert(document.sendRequest.contactType.value);
			if (document.sendRequest.contactType.value == "email"){
			   alert("Oops!  Please enter an email address!");
			   document.sendRequest.theInfo.focus();
			} else {
			   alert("Oops!  Please enter a phone number!");
			   document.sendRequest.theInfo.focus();
			} 
			return false;
		}
		
	}

<form name="sendRequest" action="gethelp.asp" method="post" onSubmit="return formCheck()">
                                      <table border="0" cellspacing="0" style="color:#FFFFFF">
                                            	<tr>
                                                	<td width="99"><div align="left">Name:</div></td><td width="10"></td>
                                               	  <td width="165"><div align="left">
                                               	    <input type="text" id="theName" name="theName" />
                                           	      </div></td>
                                        </tr>
                                                <tr>
                                                	<td colspan="3"><div align="left">Contact me by:
                                               	      <input type="radio" name="contactType" value="phone" checked onClick="selCheck('Phone:');" />
                                               	      Phone&nbsp;&nbsp;&nbsp;
                                               	      <input type="radio" name="contactType" value="email" onClick="selCheck('Email:');"/>
                                           	        Email</div></td>
                                                </tr>
                          <tr>
                                                	<td><div align="left" id="conType">Phone:</div></td><td width="10"></td>
                               	<td><div align="left">
                               	  <input type="text" name="theInfo" />
                           	    </div></td>
                                                </tr>
                                                <tr>
                                                	<td colspan="3"><div align="left"><BR />
                                                	    <textarea cols="31" name="theProblem" id="theProblem" onFocus="clearText();">Briefly explain your issue.</textarea>
                                                    </div></td>
                                                </tr>
                                                
                          <tr>
                                                	<td colspan="3" style="padding-right:2px;"><div align="right">
                                                	  <input type="image" value="" src="images/save.jpg" />
                                                      
                                                	</div></td>
                                                </tr>
                                            </table>
                                            </form>

Open in new window

leakim971

Hello slightlyoff,

Replace line 9 and 10 :
alert(document.sendRequest.contactType.value);
if (document.sendRequest.contactType.value == "email"){

By :

var contactType_value = "";
			var contacttypes = document.getElementsByTagName("input");
			for(var i=0;i<contacttypes.length;i++) {
				try {
					if(contacttypes[i].type == "radio" && contacttypes[i].name == "contactType" && contacttypes[i].checked ) {
						contactType_value = contacttypes[i].value; 
					}
				}
				catch(e) {}
			}
			alert(contactType_value);
			if (contactType_value == "email"){

Open in new window

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Gagan_Jaura

As you are using document.formName.controlname, the email control will not be detected by javascript as it is not rendered on the page. I believe you should you document.getElementById() method to check if the email textbox is empty or not. Do the following modification and see if it works
change
if (document.sendRequest.theInfo.value == ""){
to
if (document.getElementByName("theInfo").value == ""){
or give an id to "theInfo" textbox, say, "theInfoId" and use
if (document.getElementById("theInfoId").value == ""){

slightlyoff

ASKER

Thank you very much!

Not only did it work, but it was in a different way than I had thought about.

Something to add to my thought process for doing javascript, which I'm pretty new to.

leakim971

You're welcome! Thanks a lot for the points! Have a good week!