Member Avatar for albertkao

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>
  • 3 Contributors
  • 2 Replies
  • 135 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by Airshow

Dani AI

Generated

The markup in 's post has two related issues that make the submitted value unpredictable. As pointed out, many inputs share the same names (both the visible checkboxes and the hidden fields) and all boxes are marked checked in the HTML. Browsers serialize every name=value pair in document order, and server frameworks differ in how they expose duplicates (some return an array only if the name is written with [], others collapse duplicates into a single scalar). 's hint about using an editor with highlighting is also useful here — the posted HTML has duplicated/garbled fragments that can hide the real problem.

Simple, reliable fixes

  • If exactly one choice is required, use radio inputs instead of checkboxes.
  • If multiple choices are allowed and the server needs all checked values, name the checkboxes as an array so the server gets every checked value in a predictable structure:
<input type="checkbox" name="checkboxChoice[]" value="20">
<input type="checkbox" name="checkboxChoice[]" value="19">
<input type="checkbox" name="checkboxChoice[]" value="18">

Server-side handling (PHP example)

$selected = $_POST['checkboxChoice'] ?? []; // will be an array when any boxes are checked
foreach ($selected as $val) {
    // process each checked value
}

If the intent is to submit immediately when a user clicks one box and send only that single value, remove duplicate hidden inputs and use a single hidden field that is updated from JavaScript, triggered by the change event (reliable for checkboxes). Use event listeners and call this.form.submit() (avoid naming functions or elements submit). Example pattern:

document.querySelectorAll('input[type=checkbox]').forEach(cb => {
  cb.addEventListener('change', function () {
    if (this.checked) {
      document.getElementById('picked').value = this.value;
      this.form.submit();
    }
  });
});

Note: the HTML checked attribute sets the default state; the runtime checked state is what should be read on submit.

Recommended Answers

All 2 Replies

Member Avatar for almostbob

look at your code in the post above, at line 33 you see the colors change, one of the benefits of code highlighting is it shows you when you are missing quotes
there are editors available with code highlighting that make debuging easier
other than than it is unusual to have checked on more than one checkbox with the same name, My head doesnt seem to be working at the moment
gone to think

5 minutes, back
thoughts, unGuaranteed,

the onclick handler likely reacts before the value is set, so the first 'checked" value is sent perhaps onclick='this.checked;submit();' or similar code
remove all "checked" values but one
perhaps use input type = 'radio' to get the one/only

just thoughts

Edited by almostbob because: n/a
Member Avatar for Airshow

Albertkao,

All your checkboxes have the same name ("checkboxChoice") and all your hidden fields have the same name ("checkboxvalue").

Browser behaviour is undefined (and therefore unpredictable) when form element names are dulpicated (except for radio buttons formed into mutually exclusive groups by giving all members of the group the same name).

I guess your browser is choosing to submit the first "checkboxChoice", with value 20.

If for whatever reason you must use checkboxes rather than radio buttons, then you can get round the probelm with something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
{}
</style>

<script>
function itemChecked(checkbox){
	var hiddenField = document.myForm.checkboxvalue;
	if(checkbox.checked && hiddenField) {
		hiddenField.value = checkbox.value;
		checkbox.form.submit();
	}
}
</script>
</head>

<body>

<form name="myForm" action="whatever.php">
	<input type="hidden" name="checkboxvalue" value="">
	<div class='fg1'><input type="checkbox" value="20" checked onclick="itemChecked(this)"> Choice</div>
	<div class='fg1'><input type="checkbox" value="19" checked onclick="itemChecked(this)"> Choice</div>
	<div class='fg1'><input type="checkbox" value="18" checked onclick="itemChecked(this)"> Choice</div>
</form>

</body>
</html>

Then you can read checkboxvalue server-side in php/jsp/asp/cgi etc.

Note that I avoided function name submit() . It's best not to use native javascript keywords as some browsers may not cooperate.

Airshow

Edited by Airshow because: n/a
commented: You are getting better. Keep it up. +4
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.