Lately I have been working alot with Javascript to finish a web portal application for work. One of the features were to do a simple form validation based on an HTML Select drop down menu value. In this tutorial, I will quickly go over the simple Javascript techniques with code snippets to show you how it can be done.
How to do form validation and get value from HTML Select drop down menu using Javascript
The HTML Form
For form validation, the HTML form is definately the most basic and required piece. In this example, I will create a simple contact form. In the contact form, we will have a select drop down for the user to pick which department he or she wants to contact.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <form id="contactFormId" name="contactForm" method="post" onsubmit="return checkSure('<%=PresentationHelper.SERVERID%>')">
<SELECT NAME="<%=PresentationHelper.SERVER%>" id="<%=PresentationHelper.SERVERID%>" onChange="checkEnv('<%=PresentationHelper.SUBMIT%>','<%=PresentationHelper.SERVERID%>');">
<OPTION VALUE="a">Select an Environment...</OPTION>
<OPTION VALUE="D3">D3</OPTION>
<OPTION VALUE="PT148">PT148</OPTION>
<OPTION VALUE="PT168">PT168</OPTION>
</SELECT>
</spring:bind>
<br><br>
<input type="submit" class=smallButton name="<%=PresentationHelper.CANCEL%>" onClick="acceptAction=false" value="<fmt:message key="general.cancel"/>"/>
<input type="submit" class=smallButton name="<%=PresentationHelper.BACK%>" onClick="acceptAction=false" value="<fmt:message key="general.newRequest"/>"/>
<input type="submit" class=smallButton name="<%=PresentationHelper.ACCEPT%>" onClick="acceptAction=true" id="<%=PresentationHelper.SUBMIT%>" disabled="disable" value="<fmt:message key="general.accept"/>"/>
</form> |
1 2 3 | <script type="text/javascript"> document.write("This is my first JavaScript!"); </script> |
This entry was posted
on Wednesday, November 18th, 2009 and is filed under Coding, Javascript.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
Leave a Comment