Solved

value of multiple check boxes with same name

Posted on 2003-11-10
10
3,566 Views
Last Modified: 2007-11-27
i have the following as part of a form

<tr>
      <td><input type="checkbox" name="unaccReason" value="Clarity-Image is not clear">Image is not Clear</td>
</tr>
<tr>
      <td><input type="checkbox" name="unaccReason" value="Background is not plain">Background is not plain</td>
</tr>
<tr>
      <td><input type="checkbox" name="unaccReason" value="Not acceptable business attire">Not acceptable business attire</td>
</tr>
<tr>
      <td><input type="checkbox" name="unaccReason" value="Image exceeds head and shoulder view">Image exceeds head and shoulder view</td>
</tr>
<tr>
      <td><input type="checkbox" name="unaccReason" value="Other">Other - Please Specify</td>
</tr>
<tr>
      <td><input type="text" name="txtUnaccReason" value=""></td>
</tr>

i need to validate if 'Other' is selected, if only 'Other' is selected it works fine but if 'Other' is selected along with any other value the form submits, even though txtUnaccReasonis empty. which must be completed if other is indicated.
0
Comment
Question by:James Rodgers
10 Comments
 
LVL 25

Accepted Solution

by:
devic earned 250 total points
Comment Utility
hi Jester_48,

here:
================================
<script>
function checkForm(theform)
{
      if(theform.unaccReason[4].checked && theform.txtUnaccReason.value=="")
      {
            alert("Please Specify");
            return false;
      }
      return true;
}
</script>
<form action=http://www.google.com onsubmit="return checkForm(this)">
<table>
<tr>
    <td><input type="checkbox" name="unaccReason" value="Clarity-Image is not clear">Image is not Clear</td>
</tr>
<tr>
    <td><input type="checkbox" name="unaccReason" value="Background is not plain">Background is not plain</td>
</tr>
<tr>
    <td><input type="checkbox" name="unaccReason" value="Not acceptable business attire">Not acceptable business attire</td>
</tr>
<tr>
    <td><input type="checkbox" name="unaccReason" value="Image exceeds head and shoulder view">Image exceeds head and shoulder view</td>
</tr>
<tr>
    <td><input type="checkbox" name="unaccReason" value="Other">Other - Please Specify</td>
</tr>
<tr>
    <td><input type="text" name="txtUnaccReason" value=""></td>
</tr>
<tr>
    <td><input type=submit></td>
</tr>


</table>
</form>
0
 
LVL 15

Assisted Solution

by:JakobA
JakobA earned 50 total points
Comment Utility
it is not proper html to use the same name for different fields in a form. Few browser fail if you do so but the handle the situation very differently så javascript code written to handle those fields are pretty certain to fail in all but one brand of browser.

Would you consider a solution that uses different names for those checkboxes ?

regards JakobA
0
 
LVL 25

Author Comment

by:James Rodgers
Comment Utility
devic, is there no other way than using the index, i had considered this and rejected it as the list of reasons may expand and that would require changing the code

also considered was using the length of the checkboxes as in theform.unaccReason[document.all.unacccReason.length].checked, but i rejected that too

i know document.all is ie only but (un)fortunately i only need to code for ie 5+

is there no beter way to deal with this situation such as a collection of some type?

>>Would you consider a solution that uses different names for those checkboxes ?
the original code had them as radio buttons, but then i changed them to checks as there could be more than 1 type of error with the image.

thanks
0
 
LVL 25

Expert Comment

by:devic
Comment Utility
length-1

because begin from 0 (in your example until 4)
but length is  5

theform.unaccReason[theform.unaccReason.length-1].checked
0
 
LVL 25

Author Comment

by:James Rodgers
Comment Utility
i'm not getting the results i was hoping for from the input, i guess i will have to redesign the form.

Thanks for the suggestions and input
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 58

Assisted Solution

by:amit_g
amit_g earned 150 total points
Comment Utility
Would this help ...

<script>
function getElementByValue(ElementCollection, Value)
{
      var i, Element;

      for (i = 0 ; i < ElementCollection.length ; i++)
      {
            if (ElementCollection[i].value == Value)
            {
                  return ElementCollection[i];
            }
      }

      return null;
}

function checkForm(theform)
{
      var OtherCheckBox = getElementByValue(theform.unaccReason, "Other")

      if(OtherCheckBox.checked && theform.txtUnaccReason.value == "")
      {
            alert("Please Specify");

            return false;
      }

      return true;
}
</script>
<form action=http://www.google.com onsubmit="return checkForm(this)">
<table>
<tr>
    <td><input type="checkbox" name="unaccReason" value="Clarity-Image is not clear">Image is not Clear</td>
</tr>
<tr>
    <td><input type="checkbox" name="unaccReason" value="Background is not plain">Background is not plain</td>
</tr>
<tr>
    <td><input type="checkbox" name="unaccReason" value="Not acceptable business attire">Not acceptable business attire</td>
</tr>
<tr>
    <td><input type="checkbox" name="unaccReason" value="Image exceeds head and shoulder view">Image exceeds head and shoulder view</td>
</tr>
<tr>
    <td><input type="checkbox" name="unaccReason" value="Other">Other - Please Specify</td>
</tr>
<tr>
    <td><input type="text" name="txtUnaccReason" value=""></td>
</tr>
<tr>
    <td><input type=submit></td>
</tr>


</table>
</form>
0
 
LVL 15

Assisted Solution

by:VincentPuglia
VincentPuglia earned 50 total points
Comment Utility
Hi Jester,

  And yet another variation that uses elements[i]:

function checkForm(formObj)
{
  var isOk2Send = true;
  for (var i = 0; i < formObj.length; i++)
  {
     el = formObj.elements[i];
     if (el.type == 'checkbox' && el.value == 'Other')
     {
        if (formObj.txtUnaccReason.length == 0) //or value==""
        {
          isOk2Send = false;
          alert("You need to specify 'Other'");
          formObj.txtUnaccReason.focus();
          formObj.txtUnaccReason.select();
        }
    }
 
  }
  return (isOk2Send);
}

<form action=http://www.google.com onsubmit="return checkForm(this)">

Vinny
0
 
LVL 25

Author Comment

by:James Rodgers
Comment Utility
I haven't forgotten this question

I had to completely redesign the form so i ended up throwing out the checkboxes, so i never tested the code, now here is the question is there a way to have a third party(moderator, other user) review this thread and select the answer(s)?

apologies for taking so long to get back to this one

0
 
LVL 4

Expert Comment

by:ZeroPage
Comment Utility
Split the points to four equal parts (fifty points) and grant them to every contributor.

The only one who can decide which solution does help is: YOU
If you do not test, then it is your good right, but next time do not expect too much efforts from other experts.
The only fair thing now is to at least honor every contributors efforts to help you.
I, in your place, would even increase the offered points to max for the apologise.

This advise was for free :)

Cheers,
ZeroPage


0
 
LVL 25

Author Comment

by:James Rodgers
Comment Utility
thanks for the input ZeroPage

ok , i tested all the submissions and amit_g and devic's both worked, but VincentPuglia's submitted without the txtUnaccReason being filled in

so i will do the following

250 for devic - shorter code, only one function
150 for amit_g - viable working alternative
and 50 each for JakobA and VincentPuglia for their time and input

sorry it took so long to close this one and thanks to all for their input

0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now