Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Check required multiselect and checkbox

    *Disclaimer - I am a total javascript noob and am piecing together examples from several days (and long nights) of googling.

    I'm dealing with a very long subscribe form for phplist, and am trying to write some validation code to check all of the required fields before the form is submitted.

    So far I've been successful with figuring out validating emails, select dropdowns, and checkboxes.
    The one part that is still kicking my a$$ is a combination multiselect and checkbox that needs to be "required".

    For simplicity I've reduced the javascript and the form down to just the part I'm still having trouble with.
    Here is a piece of the javascript that I'm trying to use:
    Code:
    <script language="Javascript" type="text/javascript">
    
    function checkform() {
      if(document.subscribeform.elements["attribute17[]"].value == "")
      {
        alert("Please select your Primary Work Locations");
        return false;
      }
    
      return true;
    
    }
    </script>
    Here is the part of the form that relates to:
    Code:
    <form method="post" action="http://www.mysite.com/phplist" name="subscribeform" onsubmit="return checkform();">
    * PRIMARY WORK LOCATIONS:<br>
    (Telephone Area Codes)
    <br>
    <br>
    Hold down CTRL while clicking to select more than one.
    <br>				
    <select name="attribute17[]" multiple size="7" class="attributeinput">
    <option value="1" >201	
    <option value="2" >202<option value="3" >203<option value="4" >205<option value="5" >
    206<option value="6" >207<option value="7" >208<option value="8" >209<option value="9" >
    210<option value="10" >212</select>	
    <br>
    or
    <input type=checkbox name="attribute17[]"  class="attributeinput" value="286"> 
    Check here if your business is Nationwide.
    <br>		
    <input type=submit name="subscribe" value="Submit Form" />
    </form>
    Any ideas?


    *Edited out all the needless font and structure tags to make it easier on the eyes.
    Last edited by loyalrogue; 06-01-2009 at 03:10 AM.

  • #2
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    To clarify on the requirement for both a multiselect and a checkbox...

    The user is required to make a selection from the multiselect list, check the box, or both.
    Either one can be left blank, but both cannot be left blank.

    I need the javascript to check if both are left blank, and popup an alert if they are.

    Both the multiselect and the checkbox pass values to the phplist script as if they were both part of the same multiselect using the name "attribute17[]".

    My thought was to just check if "attribute17[]" was equal to null when running the validation, but either my idea, or my grasp of javascript syntax is flawed here.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    You cannot give two form elements the same name.

    You must rename the checkbox to attribute17a and then:-

    Code:
    <script type="text/javascript">
    
    function checkform() {
    var a = document.subscribeform.elements["attribute17[]"].value;
    var b = document.subscribeform.elements["attribute17a[]"];
    if ((!a) && (b.checked==false)){
    alert ("Please select your Primary Work Locations");
    return false;
    }
    }
    
    </script>
    Or more preferably you could give the two elements separate id's att17 and att17a and use getElementById.

    Code:
    <script type="text/javascript">
    
    function checkform() {
    var a = document.getElementById("att17").value;
    var b = document.getElementById("att17a");
    if ((!a) && (b.checked==false)){
    alert ("Please select your Primary Work Locations");
    return false;
    }
    }
    
    </script>


    The html 4.01 specification clearly states that:

    "ID and NAME tokens must begin with a letter ([A-Za-z]) and may be
    followed by any number of letters, digits ([0-9]), hyphens ("-"),
    underscores ("_"), colons (":"), and periods (".")."

    Note: this does not suggest that you can add "[" or "]". So, in essence
    it would appear that you are violating the html specification.

    In addition the specification requires the NAME and ID attributes of an element to be identical.


    <script language="JavaScript"> is long deprecated and obsolete. Use <script type = "text/javascript"> instead.



    "There is hardly anything in the world that some man cannot make a little worse and sell a little cheaper, and the people who consider price only are this man's lawful prey." John Ruskin
    Last edited by Philip M; 06-01-2009 at 08:17 AM.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    function checkform(){
     var ips=document.getElementsByName('attribute17[]');
     if (ips[0].selectedIndex<0&&!ips[1].checked){
      alert('Complete');
      return false;
     }
      return true;
    
    }
    /*]]>*/
    </script></head>
    
    <body>
    <form method="post" action="http://www.mysite.com/phplist" name="subscribeform" onsubmit="return checkform();">
    * PRIMARY WORK LOCATIONS:<br>
    (Telephone Area Codes)
    <br>
    <br>
    Hold down CTRL while clicking to select more than one.
    <br>
    <select name="attribute17[]" multiple size="7" class="attributeinput">
    <option value="1" >201
    <option value="2" >202<option value="3" >203<option value="4" >205<option value="5" >
    206<option value="6" >207<option value="7" >208<option value="8" >209<option value="9" >
    210<option value="10" >212</select>
    <br>
    or
    <input type=checkbox name="attribute17[]"  class="attributeinput" value="286">
    Check here if your business is Nationwide.
    <br>
    <input type=submit name="subscribe" value="Submit Form" />
    </form>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    loyalrogue (06-02-2009)

  • #5
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks Vic!

    That worked perfectly!

    Damn, you are good.
    I posted this on several coding forums and you're the only one to come up with a working code that fits perfectly in with the rest of my requirements.
    ...And to top it off, you did it with only 2 lines of code compared to the several page long attempts I received elsewhere!
    You da man!

    Thank God (and Vic) that I will actually be able to go to bed on time tonight.


  •  

    Posting Permissions

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