0

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
3
Views
7 Years
Discussion Span
Last Post by Airshow
0

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: n/a

1

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: n/a

Votes + Comments
You are getting better. Keep it up.
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.