Always get the value "20" no matter which checkbox I clicked

JavaScript
1

After clicking the checkbox, I like to get the value of the checkbox submitted.
Why the following page always get the value “20” for checkboxChoice and checkboxvalue no matter which checkbox I clicked?
Please help.

 <tr> 
    <td> 
      <div class='fg1'> 
      <input type="checkbox" name="checkboxChoice" value="20" checked onclick="submit()"> 
      Choice
      </div> 
      <input type="hidden" name="checkboxvalue" value="20"> 
    </td> 
  </tr> 
  <tr> 
    <td> 
      <div class='fg1'> 
      <input type="checkbox" name="checkboxChoice" value="19" checked onclick="submit()"> 
      Choice
      </div> 
      <input type="hidden" name="checkboxvalue" value="19"> 
    </td> 
  </tr> 
  <tr> 
    <td> 
      <div class='fg1'> 
      <input type="checkbox" name="checkboxChoice" value="18" checked onclick="submit()"> 
      Choice
      </div> 
      <input type="hidden" name="checkboxvalue" value="18"> 
    </td> 
  </tr> 


<tr> 
    <td> 
      <div class='fg1'> 
      <input type="checkbox" name=" <tr> 
    <td> 
      <div class='fg1'> 
      <input type="checkbox" name="checkboxChoice" value="20" checked onclick="submit()"> 
      Choice
      </div> 
      <input type="hidden" name="checkboxvalue" value="20"> 
    </td> 
  </tr> 
  <tr> 
    <td> 
      <div class='fg1'> 
      <input type="checkbox" name="checkboxChoice" value="19" checked onclick="submit()"> 
      Choice
      </div> 
      <input type="hidden" name="checkboxvalue" value="19"> 
    </td> 
  </tr> 
  <tr> 
    <td> 
      <div class='fg1'> 
      <input type="checkbox" name="checkboxChoice" value="18" checked onclick="submit()"> 
      Choice
      </div> 
      <input type="hidden" name="checkboxvalue" value="18"> 
    </td> 
  </tr> 
" value="20" checked onclick="submit()"> 
      Choice
      </div> 
      <input type="hidden" name="checkboxvalue" value="20"> 
    </td> 
  </tr> 
  <tr> 
    <td> 
      <div class='fg1'> 
      <input type="checkbox" name="checkboxChoice" value="19" checked onclick="submit()"> 
      Choice
      </div> 
      <input type="hidden" name="checkboxvalue" value="19"> 
    </td> 
  </tr> 
  <tr> 
    <td> 
      <div class='fg1'> 
      <input type="checkbox" name="checkboxChoice" value="18" checked onclick="submit()"> 
      Choice
      </div> 
      <input type="hidden" name="checkboxvalue" value="18"> 
    </td> 
  </tr>
2

Inputs in a form cannot have the same name unless they are an array. There’s also no connection between your checkboxes and hidden inputs. When a form is submitted to its target, it’s simply a collection of independent name/value pairs.

You should try creating only ONE hidden input called “checkboxvalue”, and setting that input’s value in your submit() function before the form is submitted.

3

Unless there’s a purpose for having the hidden checkboxvalue, it tends to work best when you have just the checkboxes themself. That way the values of the selected checkboxes will be the only ones to be submitted.

4

With checkboxes it actually works best if you have a hidden field first and then the checkbox and give then both the same name (which is not used for anything else). That way if the checkbox is checked then the checkbox value gets passed and if it isn’t the hidden field value gets passed.

For example:

<input type=“hidden” name=“checkboxOne” value=“no”>
<input type=“checkbox” name=“checkboxOne” value=“yes”>

passes “yes” in checkboxOne if the checkbox is checked and “no” if it isn’t.

5

That’s an interesting alternative.

Nomally I just use the single checkbox and check for the expected name of the checkbox. Anything else is then considered to be unchecked.

6

That sounds like relying on a specific browser implementation which may not hold true in other and future browsers. Unless that’s codified somewhere?

7

I should clarify, that check that the expected name of the checkbox contains the checked value.

Without a separate helper to abstract away the details, that would be:


$checkboxValue = '';
if (isset($_GET['checkboxName'])) {
    $checkboxValue = $_GET['checkboxName'];
}
if ($checkboxValue === 'normallyCheckedValue') {
    // checkbox is checked
} else {
    // checkbox is not checked
}

When using a helper method, that just becomes


if ($helper->get('checkboxName') === 'normallyCheckedValue') {
    // checkbox is checked
} else {
    // checkbox is not checked
}

and when using filter_input that becomes:


$checkboxValue = 
if (filter_input(INPUT_GET, 'checkboxName'), FILTER_SANITIZE_STRING) === 'normallyCheckedValue') {
    // checkbox is checked
} else {
    // checkbox is not checked
}
8

Sorry, I meant to reply to felgall

Relying on the browser to choose among multiple form fields with the same name dependent on the order they appear in the form seems like relying on a specific browser implementation

9

I like to have an array of checkboxes and clicking each checkbox will submit its value (either a normal or hidden value) and the JSP will find out which checkbox(es) is/are clicked.
Please review the following html.
What will the JSP (or PHP) look like?

<tr> 
    <td> 
      <input type="hidden" name="checkboxChoice" value=""> 
      <input type="checkbox" name="checkboxChoice" value="20" checked onclick="document.myform.checkboxChoice.submit()"> 
      OK
     </td> 
  </tr> 
  <tr> 
    <td> 
      <input type="hidden" name="checkboxChoice" value=""> 
      <input type="checkbox" name="checkboxChoice" value="19" checked onclick="document.myform.checkboxChoice.submit()"> 
      OK
    </td> 
  </tr> 
  <tr> 
    <td> 
    <td> 
      <input type="hidden" name="checkboxChoice" value=""> 
      <input type="checkbox" name="checkboxChoice" value="18" checked onclick="document.myform.checkboxChoice.submit()"> 
      OK
    </td> 
    </td> 
  </tr>
10

The PHP code will be unchanged from my prior examples.

The hidden elements with the same name as the checkbox provide no useful purpose.

11

I haven’t been able to find a browser where it doesn’t work that way. In every case where multiple fields with the same name exist in a form it is always the last one referenced in the form that is the one that gets passed when the form is submitted. I don’t know whether this is a part of a standard somewhere or whether all the browsers just implemented it that way by accident but it does work correctly in the several dozen different browsers I have tried it with.

12

Here’s some example code from W3C that shows several checkboxes with the same name. From their usage, it appears that the W3C expects them to all be submittable.

The form is in the second half of the legend section
http://www.w3.org/TR/html401/interact/forms.html#h-17.10

Is it that a hidden input field is successful only if no other input field of the same name is also successful?