SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    May 2001
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    checkbox question

    hi all,

    i have 6 checkboxes, all with the same name but different values. if i want to require that a textbox be required depending on which box was checked, how do i do this?

    here is what i have so far....


    if ((document.Testform.Principal_Job.checked == true) && (document.Testform.Other_Principal_Job.value == '')){
    alert("Please enter text.");
    document.Testform.Other_Principal_Job.focus();
    return false;}

    Principal_Job is the name of the checkboxes. the value for that box that makes 'Other_Principal_Job' required is 'Other Principal Job'. any suggestions?

    hopefully this is all clear

  2. #2
    SitePoint Zealot jonsteele's Avatar
    Join Date
    Jan 2001
    Location
    Toronto
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    If checkboxes have the same name, I think the values of all the checked ones are stores as a string delimited by ','. So to check if 'Other Principal Job' is checked you could do:

    if ((document.Testform.Principal_Job.value.indexOf('Other Principal Job') != -1) && (document.Testform.Other_Principal_Job.value == '')){
    alert("Please enter text.");
    document.Testform.Other_Principal_Job.focus();
    return false;}

    Do you need the checkboxes to have the same name? If you give'em different names, then your code would work.

    Jon.

  3. #3
    SitePoint Addict
    Join Date
    May 2000
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When you have multiple checkbox's with the same name you can treat them like an array.
    I think in your instance you will want to check each one individualy
    if(document.Testform.Principal_Job[0].checked&&document.Testform.Other_Principal_Job.value.length==0)
    {
    alert("PLease enter some text.")
    return false
    }
    if(document.Testform.Principal_Job[1].checked&&document.Testform.other_field.value.length==0)
    {
    alert("PLease enter some text.")
    return false
    }

    If you only have one text box field to enter something in or you only want to allow them to check just one
    check box then you should use a for loop to bump through the checkbox's and do some validating. Hope this helps and good luck.

  4. #4
    SitePoint Member
    Join Date
    May 2001
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thanks guys

    i tried both of your suggestions, but they didn't work. for whatever reason, the [0] doesn't work with checkboxes....i'll keep trying though....

  5. #5
    SitePoint Addict
    Join Date
    May 2000
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have a link to the page or could you post the code and form? That should work I have used it many times before.

  6. #6
    SitePoint Member
    Join Date
    May 2001
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is the code for the checkboxes and the text field i'm talking about...

    <p><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="80%">

    <TR>
    <TD COLSPAN="2"><P><b>Your principal job is/b></P></TD>
    </TR>

    <TR>
    <TD WIDTH="2%"><p><INPUT TYPE="checkbox" NAME="Principal_Job" VALUE="Design/Devel Eng"></p></TD>
    <TD><p>Design/Development Engineering</p></TD>
    </TR>

    <TR>
    <TD WIDTH="2%"><p><INPUT TYPE="checkbox" NAME="Principal_Job" VALUE="Component Eng/Sourcing"></p></td>
    <TD><p>Component Engineering/Sourcing</p></TD>
    </TR>

    <TR>
    <TD WIDTH="2%"><p><INPUT TYPE="checkbox" NAME="Principal_Job" VALUE="Qual Assurance"></p></td>
    <TD><p>Quality Assurance</p></TD>
    </TR>

    <TR>
    <TD WIDTH="2%"><p><INPUT TYPE="checkbox" NAME="Principal_Job" VALUE="Qual Mgmt Sys"></p></td>
    <TD><p>Quality Management System</p></TD>
    </TR>

    <TR>
    <TD WIDTH="2%"><p><INPUT TYPE="checkbox" NAME="Principal_Job" VALUE="Compliance Eng"></p></td>
    <TD><p>Compliance Engineering</p></TD>
    </TR>

    <TR>
    <TD WIDTH="2%"><p><INPUT TYPE="checkbox" NAME="Principal_Job" VALUE="OtherPrincipalJob" onClick="if (this.checked) this.form.Other_Principal_Job.focus()"></p></td>
    <TD><p>Other&nbsp;(<EM>Please enter other jobs</EM>)</p></TD>
    </TR>
    <TR>
    <TD WIDTH="2%"><p></p></td>
    <TD><p><input type="text" size="40" name="Other_Principal_Job" MAXLENGTH="200"></p></TD>
    </TR>

    </TABLE></p>

    thanks for taking an interest!

  7. #7
    SitePoint Addict
    Join Date
    May 2000
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From the looks of your form you only want to validate the text box if they check other job. You could do your script like this that could get performed with the onSubmit event in your form tag:
    <SCRIPT LANGUAGE="JavaScript">
    function checktxt()
    {
    if(document.Testform.Principal_Job[5].checked&&document.Testform.Other_Principal_Job.value.length==0)
    {
    alert("Please enter your other job.")
    retrun false
    }
    }
    </SCRIPT>

    With JavaScript you start counting at zero rather than one so the checkbox for other would be the 5th one in the series. Hope that helps and good luck.

  8. #8
    SitePoint Member
    Join Date
    May 2001
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    it works....in IE

    for some reason it won't work in Netscape.....

    thanks for your help!

  9. #9
    SitePoint Addict
    Join Date
    May 2000
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That should work in both browsers. How are you calling thie function?

  10. #10
    SitePoint Member
    Join Date
    May 2001
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    calling..

    i'm using an onChange method.....onChange="checktxt()"

  11. #11
    SitePoint Addict
    Join Date
    May 2000
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmmm....
    If you are using that on the text box then it should work in both browsers if they do enter something in the text box. If they don't and tab of then no it won't perform the functionv because nothing changed. Here is an example:
    <html>
    <head>
    <title>Form Testing</title>
    <SCRIPT LANGUAGE="JavaScript">
    function chktext(obj)
    {
    if(obj.value==0)
    {
    alert("Please enter something.")
    obj.focus()
    }
    }
    </SCRIPT>
    </head>
    <body>
    <FORM NAME="myform">
    <INPUT TYPE="checkbox" onClick="if(this.checked){this.form.txta.focus()}">
    <INPUT TYPE="text" NAME="txta" SIZE="30" onChange="chktext(this)">
    <INPUT TYPE="text" NAME="txtb" SIZE="30">
    </FORM>
    </body>
    </html>


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
  •