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
  • 115 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by Airshow

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.