SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Non-Member
    Join Date
    Aug 2007
    Posts
    494
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Required fields in the form

    Hi all.

    I have this web page:

    Code:
    <html>
    
    <head>
    
    </head>
    
    <body>
    
    <form method="POST" action="go.asp">
    
    <select size="1" name="A">
    <option>Select</option>
    <option value="POSITIVE">POSITIVE</option>
    <option value="NEGATIVE">NEGATIVE</option>
    </select>
    
    <select size="1" name="B">
    <option>Select</option>
    <option value="0">Open</option>
    <option value="1">Close</option>
    </select>
    
    <input type="submit" value="GO" name="B1">
    
    </form>
    </body>
    
    </html>
    If select value positive or negative in the select "A", in the select "B" required value 1, ( would say "Close" ).

    If select value 0 ( would say "Open" ) in the select "B" stop the form, its possible?

    Can you help me ?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    The form should not be submitted if the selected option of either select field is the first one, or if the second select field shows open (with a value of 0)

    Let's give the form an identifier so that we can access it from the script. I'm going to call it "polaritySwitch" but if you know of a more descriptive name for what the form does, please call it that instead.

    Code html4strict:
    <form id="polaritySwitch" method="POST" action="go.asp">

    Now we can ask the form to do something for us when it's been submitted, but we can't ask it if the form hasn't been loaded yet, so you should place the script at the end of the body, just before the </body> tag. If you want to run it from somewhere before the form, you will need to use your own favourite technique to run the script after the page has loaded. There are many to choose from.

    Code javascript:
    document.getElementById('polaritySwitch').onsubmit = function () {
        // get info
        if (condition) {
            // not ok to submit
            return false;
        }
    };

    So what are we wanting to check. First, that each select field is not on the default first choice, which has an index of 0. And secondly, that the B select field is not Open.

    Some people might get the form fields by using document.getElementsByName('A')[0] but there are better ways. because the form called the function that we're using, the this keyword already refers to the form, so we can use this.elements['A'] to get that named field.

    Code javascript:
    document.getElementById('polaritySwitch').onsubmit = function () {
        var selectA = this.elements['A'];
    	var selectB = this.elements['B'];
        if (selectA.selectedIndex === 0 || selectB.selectedIndex === 0) {
            return false;
        }
    	if (selectB.options[selectB.selectedIndex].value === '0') { // Open
    		return false;
    	}
    };
    Last edited by paul_wilkins; Jun 9, 2008 at 14:26.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Non-Member
    Join Date
    Aug 2007
    Posts
    494
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks...


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
  •