CODEWITHSUNDEEP
javascriptphpcheckbox
user2837858
user2837858

Reputation: 349

How do I reset a checkbox thats checked value is set by php?

I have a web form with a bazillion check boxes. If the form is filled out incorrectly, none of the check boxes are reset (as an anti-frustration feature).

Problem is, the reset button doesn't work to uncheck all the boxes if the form has been submitted before. How do I fix this?

document.getElementById("form").reset() doesn't work if the form has been submitted beforehand either.

Sample code below:

<body>

<script>
function resetData() {
    document.getElementById("deleteContactFlag").checked=false;
    document.getElementById("userAdministrationFlag").checked=false;
}
</script>

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post" id="form">
    <input type="checkbox" name="deleteContactFlag" id="deleteContactFlag" <?php if (isset($_POST["deleteContactFlag"])) echo 'checked="checked"'; ?>/> Delete Contacts<br>
    <input name="userAdministrationFlag" type="checkbox" id="userAdministrationFlag" <?php if (isset($_POST["userAdministrationFlag"])) echo 'checked="checked"'; ?>/> User Administration<br><br>

    <input type="submit" name="submit" id="submit" value="Submit">
    <button type="button" onClick="resetData()">Reset</button>
</form>

</body>

Upvotes: 2

Views: 9700

Answers (3)

edcs
edcs

Reputation: 3879

You can use JavaScript to check and un-check checkbox inputs if you're finding the form reset functionality to be unreliable. (I believe the resetting the form should just set it back to it's initial state on page load which is why you might be having this problem?). Here's an example:

function checkAll(formname, checktoggle)
{
  var checkboxes = new Array(); 
  checkboxes = document[formname].getElementsByTagName('input');

  for (var i=0; i<checkboxes.length; i++)  {
    if (checkboxes[i].type == 'checkbox')   {
      checkboxes[i].checked = checktoggle;
    }
  }
}

<a onclick="javascript:checkAll('form', true);" href="javascript:void();">check all</a>
<a onclick="javascript:checkAll('form', false);" href="javascript:void();">uncheck all</a>

Code from here (there's a jQuery example in there too): http://www.webdevdoor.com/javascript-ajax/javascript-function-check-uncheck-checkboxes/

Upvotes: 0

Wolfgang Stengel
Wolfgang Stengel

Reputation: 2856

The form reset does not clear all the values in the form, but sets the form back to it's initial state, which it had when the page first loaded. (In this initial state some checkboxes are already checked.)

Try resetting all checkboxes manually:

var inputs=document.getElementsByTagName("input");
for (var i in inputs)
    if (inputs[i].type=="checkbox") inputs[i].checked=false;

Or if you use jQuery:

$("input[type=checkbox]").each(function() { this.checked=false; });

Upvotes: 4

cyberoot
cyberoot

Reputation: 340

Try to use Php code outside of the html elements

HTML

<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>"method="post" id="form">

    <input type="checkbox" name="deleteContactFlag" id="deleteContactFlag" /> Delete Contacts
    <input name="userAdministrationFlag" type="checkbox" id="userAdministrationFlag" /> User Administration

    <input type="submit" name="submit" id="submit" value="Submit">
    <button type="button" onClick="resetData()">Reset</button>
</form>

Upvotes: 1

Related Questions