SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist ColinHughes's Avatar
    Join Date
    Sep 2004
    Location
    Spain
    Posts
    473
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop down validation

    Hii

    How do I validate a drop down? I can validate my text fields using:

    Code:
    	function checkOut(hire) {
                    if (hire.ampm.value == "") {
    		alert("Please enter AM or PM in the space provided")
    		hire.numberpass.select()
    		return false
    		}
                    return true
    		}
    but it does not work on the drop boxes.

    Using

    Code:
     if (!hire.ampm.value.length)
            alert("nothing selected in ampm!");
    as suggested on this forum works in a fashion but when clicking OK on the popup it then submits the form immediately without being able to return to the page to insert some value into the drop down.

    Help please.

    Regards

    Colin

  2. #2
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    drop downs are validated by their selectIndex like this

    If (dropdown.selectedIndex == 1) {
    alert("select something");
    return false;
    }

    thats why 99.9% of the select boxes have something besides a real value in the first spot - REAL easy to test!

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you meant:

    if (document.my_form.dropdown.selectedIndex == 0) {
    alert("select something");
    return false;
    }

    A <select> element's options[] array is a 0 based array, and the selectedIndex property returns the position in the array of the <option> that was selected.

  4. #4
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah .... i was just using the dropdown. as an example - I assumed we all understood the rest.......... didnt get more specific cause we ALL know everyone likes to grab their form objects differently!

  5. #5
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...it was the ==1 part that I was questioning.

  6. #6
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ya know ........ Ive done WAY too much Java & sql this week! (zero based arrays and elements THEN 1 BASED ARRAYS). ............ thats what happens when you write code in 4 different langauges on a constant basis!

    I dont know how many times I will write a line of code, or even a whole block, only to look up and realize I switched languages 1/2 way thru without realizing it.

    I spent all day getting MySQL month values out and converting them to Java based month values (for the Calendar object) - so I all screwed up!

    thanks for the check - your 100% right!

  7. #7
    SitePoint Evangelist ColinHughes's Avatar
    Join Date
    Sep 2004
    Location
    Spain
    Posts
    473
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    My understanding of javascript is minimal so your statement about "all understand the rest" is not true here

    So if I use:

    Code:
                      if (document.hire.ampm.selectedIndex == 0) {
            alert("Please select AM or PM in the drop down list");
            return false;
            }
    it does not work? I also have 3 drop downs within this form, does this affect things?

    Sorry to bring you back to basics, I think I understand the syntax of what is going on here.

    Regards
    Colin

  8. #8
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What does your html look like?

  9. #9
    SitePoint Evangelist ColinHughes's Avatar
    Join Date
    Sep 2004
    Location
    Spain
    Posts
    473
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Thanks for the reply. html as follows:

    This is the js:

    Code:
     
    <SCRIPT LANGUAGE="JavaScript" TYPE="TEXT/JAVASCRIPT">
    
    function validEmail(email) {
    		invalidChars = " /:,;"
    	
    		if (email == "") {
    			return false
    		}
    		for (i=0; i<invalidChars.length; i++) {
    			badChar = invalidChars.charAt(i)
    			if (email.indexOf(badChar,0) > -1) {
    				return false
    			}
    		}
    		atPos = email.indexOf("@",1)
    		if (atPos == -1) {
    			return false
    		}
    		if (email.indexOf("@",atPos+1) > -1) {
    			return false
    		}
    		periodPos = email.indexOf(".",atPos)
    		if (periodPos == -1) {
    			return false
    		}
    		if (periodPos+3 > email.length)	{
    			return false
    		}
    		return true
    	}
    
    
    	function checkOut(hire) {
    
    
    		if (!validEmail(hire.email.value)) {
    		alert("Please enter a valid e-mail address.")
    		hire.email.focus()
    		hire.email.select()
    		return false
    		}
    			
    		if (hire.name.value == "") {
    		alert("Please enter your name in the space provided")
    		hire.name.select()
    		return false
    		}
    
                    if (hire.address.value == "") {
    		alert("Please enter your address in the space provided")
    		hire.address.select()
    		return false
    		}
    
                    if (hire.city.value == "") {
    		alert("Please enter your Town/City in the space provided")
    		hire.city.select()
    		return false
    		}
    
                    if (hire.county.value == "") {
    		alert("Please enter your County in the space provided")
    		hire.county.select()
    		return false
    		}
    
                    if (hire.postcode.value == "") {
    		alert("Please enter your Postcode in the space provided")
    		hire.postcode.select()
    		return false
    		}
    
                    if (hire.country.value == "") {
    		alert("Please enter your Country in the space provided")
    		hire.country.select()
    		return false
    		}
    
                    if (hire.telephone.value == "") {
    		alert("Please enter your Telephone Number in the space provided")
    		hire.telephone.select()
    		return false
    		}
    
                    if (hire.pickuppoint.value == "") {
    		alert("Please enter your Pickup point in the space provided")
    		hire.pickuppoint.select()
    		return false
    		}
    
                    if (hire.dateofhire.value == "") {
    		alert("Please enter your Date of hire in the space provided")
    		hire.dateofhire.select()
    		return false
    		}
    
                    if (hire.pickuptime.value == "") {
    		alert("Please enter your Pickup time in the space provided")
    		hire.pickuptime.select()
    		return false
    		}
    
                    if (hire.destination.value == "") {
    		alert("Please enter your Destination in the space provided")
    		hire.destination.select()
    		return false
    		}
    
                    if (hire.returndate.value == "") {
    		alert("Please enter your Return date in the space provided")
    		hire.returndate.select()
    		return false
    		}
    		
    		
    		if (hire.returntime.value == "") {
    		alert("Please enter your Return time in the space provided")
    		hire.returntime.select()
    		return false
    		}
    
                    if (hire.droppoint.value == "") {
    		alert("Please enter your Dropoff point in the space provided")
    		hire.droppoint.select()
    		return false
    		}
    
                    if (hire.size.value == "") {
    		alert("Please enter your Vehicle size in the space provided")
    		hire.size.select()
    		return false
    		}
    
                    if (hire.numberpass.value == "") {
    		alert("Please enter your Passengers numbers in the space provided")
    		hire.numberpass.select()
    		return false
    		}
    		
    		 
    		
    		                 if (document.hire.ampm.selectedIndex == 0) {
            alert("Please select AM or PM in the drop down list");
            return false;
            }
    
    		
    
    		return true
    		} 
    
    </SCRIPT>





    This is the form:

    Code:
    <form name="hire" id="hire" method="post" action="hire2.php" onsubmit="return checkOut(this)">
    
                  <table align="center">
                    <!--DWLayoutTable-->
                    <tr> 
                      <td width="216" height="26" class="labelcell"> <label for="name">Name 
                        * </label> </td>
                      <td colspan="4" class="fieldcell"> <input type="text" name="name" id="name" tabindex="1"></td>
                    </tr>
    
                    <tr> 
                      <td height="26" class="labelcell"> <label for="company_name">Company 
                        Name</label> </td>
                      <td colspan="4" class="fieldcell"> <input type="text" name="company_name" id="company_name" tabindex="2"></td>
                    </tr>
    
                    <tr> 
                      <td height="26" class="labelcell"> <label for="address">Address 
                        *</label> </td>
                      <td colspan="4" class="fieldcell"> <input type="text" name="address" id="address" tabindex="3"></td>
                    </tr>
    
                    <tr> 
                      <td height="26" class="labelcell"> <label for="city">Town/City 
                        *</label> </td>
                      <td colspan="4" class="fieldcell"> <input type="text" name="city" id="city" tabindex="4"></td>
                    </tr>
    
                    <tr> 
                      <td height="26" class="labelcell"> <label for="county">County 
                        *</label> </td>
                      <td colspan="4" class="fieldcell"> <input type="text" name="county" id="county" tabindex="5"></td>
                    </tr>
    
                    <tr> 
                      <td height="26" class="labelcell"> <label for="postcode">Postcode 
                        *</label> </td>
                      <td colspan="4" class="fieldcell"> <input type="text" name="postcode" id="postcode" tabindex="6"></td>
                    </tr>
    
                    <tr> 
                      <td height="26" class="labelcell"> <label for="country">Country 
                        *</label> </td>
                      <td colspan="4" class="fieldcell"> <input type="text" name="country" id="country" tabindex="7"></td>
                    </tr>
    
                    <tr> 
                      <td height="26" class="labelcell"> <label for="telephone">Telephone 
                        (incl dialling code)* </label> </td>
                      <td colspan="4" class="fieldcell"> <input type="text" name="telephone" id="telephone" tabindex="8"></td>
                    </tr>
    
                    <tr> 
                      <td height="26" class="labelcell"> <label for="fax">Fax</label> 
                      </td>
                      <td colspan="4" class="fieldcell"> <input type="text" name="fax" id="fax" tabindex="9"></td>
                    </tr>
    
                    <tr> 
                      <td height="26" class="labelcell"> <label for="email">Email 
                        Address *</label> </td>
                      <td colspan="4" class="fieldcell"><input type="text" name="email" id="email" tabindex="10"></td>
                    </tr>
    
                    <tr> 
                      <td height="22" colspan="5" valign="top"><p class="bold">Coach 
                          Hire Requirements</p></td>
                    </tr>
    
                    <tr> 
                      <td height="26" class="labelcell"> <label for="pickuppoint">Pick 
                        up Point(s) * </label> </td>
                      <td colspan="4" class="fieldcell"><input type="text" name="pickuppoint" id="pickuppoint" tabindex="11"></td>
                    </tr>
    
                    <tr> 
                      <td height="26" class="labelcell"> <label for="dateofhire">Date 
                        of Hire (dd/mm/yyyy)*</label> </td>
                      <td colspan="4" class="fieldcell"><input type="text" name="dateofhire" id="dateofhire" tabindex="12"></td>
                    </tr>
    
                    <tr> 
                      <td height="26" class="labelcell"> <label for="pickuptime">Pickup 
                        Time *</label> </td>
                      <td width="183" valign="middle" class="smallfieldcell input"><input type="text" name="pickuptime" id="pickuptime" tabindex="16"></td>
                      <td width="4" valign="middle" class="fieldcell"><select name="ampm" id="ampm">
                          <option value="am">am</option>
                          <option value="pm">pm</option>
                          <option selected>select</option>
                        </select></td>
                    </tr>
    
                    <tr> 
                      <td height="26" class="labelcell"> <label for="destination">Destination 
                        *</label> </td>
                      <td colspan="4" class="fieldcell"><input type="text" name="destination" id="destination" tabindex="14"></td>
                    </tr>
    
                    <tr> 
                      <td height="26" class="labelcell"> <label for="returndate">Return 
                        Date(dd/mm/yyyy)*</label>
                        </td>
                      <td colspan="4" class="fieldcell"><input type="text" name="returndate" id="returndate" tabindex="15"></td>
                    </tr>
    
                    <tr> 
                      <td height="26" class="labelcell"> <label for="returntime">Return 
                        Time *</label> </td>
                      <td width="183" valign="middle" class="smallfieldcell input"><input type="text" name="returntime" id="returntime" tabindex="16"></td>
                      <td width="4" valign="middle" class="fieldcell"><select name="pmam" id="pmam">
                          <option value="am">am</option>
                          <option value="pm">pm</option>
                          <option selected>select</option>
                        </select></td>
                    </tr>
    
                    <tr> 
                      <td height="26" class="labelcell"> <label for="droppoint">Drop 
                        Off Point(s) *</label> </td>
                      <td colspan="4" class="fieldcell"><input type="text" name="droppoint" id="droppoint" tabindex="17"></td>
                    </tr>
    
                    <tr> 
                      <td height="26" class="labelcell"> <label for="size">Vehicle Size (6, 19 or 25)*</label> </td>
                      <td colspan="4" class="fieldcell"><input type="text" name="size" id="size" tabindex="18"></td>
                    </tr>
    
                    <tr> 
                      <td height="26" class="labelcell"> <label for="numberpass">Number 
                        Of Passengers *</label> </td>
                      <td colspan="4" class="fieldcell"><input type="text" name="numberpass" id="numberpass" tabindex="19"></td>
                    </tr>
    
                    <tr> 
                      <td height="32" class="labelcell">Would You Like to Be Added 
                        To Our Mailing List *</td>
                      <td colspan="4" class="fieldcell"><select name="maillist" id="maillist">
                          <option value="Yes">Yes</option>
                          <option value="No">No</option>
                          <option selected>select</option>
                        </select></td>
                    </tr>
    
                    <tr> 
                      <td height="106" class="labelcell"> <label for="additional">Additional 
                        Comments</label> </td>
                      <td colspan="4" class="fieldcell"><textarea name="additional" id="additional" rows="5" cols="20" tabindex="20"></textarea></td>
                    </tr>
    
                    <tr> 
                      <td height="30" colspan="5" valign="top"><input name="Submit" type="submit" class="button" tabindex="21" value="Send"></td>
                    </tr>
    
                  </table>
    </form>
    Thanks

    Colin

  10. #10
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have this as your 3rd option in your boxes

    <option selected>select</option>

    so your am / pm fields are ALWAYS loaded with selectedIndex of 2 - move these to before am and things will be just fine. ....... also by moving them to the 1st position in the select boxes you can remove the selected from them as the default load for a select box is to display the first one..

    If you do want to keep them last for some reason you would then check them based on their position counting from 0 to the one you have selected .... so in this case (what you have right now) you would test

    dropdown.selectedIndex == 2

  11. #11
    SitePoint Evangelist ColinHughes's Avatar
    Join Date
    Sep 2004
    Location
    Spain
    Posts
    473
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks

    Works a treat! So close yet so far away

    Colin

  12. #12
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah well - look how far off I was by not having the brain 100% engaged (my first two posts) ..... happens to all of us and usually another set of eyes is just the trick!

    Glad its fixed and Ive "redeemed myself"


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •