Prevent multiple checkboxes with same name from getting reset after form submit

user_6916744 0
Viewed 299

I have multiple classes/groups of checkboxes and each class/group contain multiple checkboxes in it with same name. When form submitted, all checkboxes get reset. I have tried many solutions available on this site but these are not working for group of checkboxes. For example:-

<form method="post" action="" name="SearchForm"   >

  <input type="checkbox" name="color[]" value="Black">
  <input type="checkbox" name="color[]" value="White">
  <input type="checkbox" name="color[]" value="Green">

  <input type="checkbox" name="language[]" value="Punjabi">
  <input type="checkbox" name="language[]" value="Sindhi">
  <input type="checkbox" name="language[]" value="Saraiki">

</form>

How can I prevent checkboxes from getting reset after form submitted?

html php jquery javascript
2 Answers

When the form sent, the page reloads, so all changes in the document will be lost. But you can easily do it with PHP:

<form method="post" action="" name="SearchForm">

  <input type="checkbox" name="color[]" value="Black" <?php echo $_POST['color'][0]?'checked="checked"':'';?>>
  <input type="checkbox" name="color[]" value="White" <?php echo $_POST['color'][1]?'checked="checked"':'';?>>
  <input type="checkbox" name="color[]" value="Green" <?php echo $_POST['color'][2]?'checked="checked"':'';?>>

  <input type="checkbox" name="language[]" value="Punjabi" <?php echo $_POST['language'][0]?'checked="checked"':'';?>>
  <input type="checkbox" name="language[]" value="Sindhi" <?php echo $_POST['language'][1]?'checked="checked"':'';?>>
  <input type="checkbox" name="language[]" value="Saraiki" <?php echo $_POST['language'][2]?'checked="checked"':'';?>>

</form>

Something like this should work.

I hope that this will help you!

user_83761840

To keep the checkboxes from clearing, you can use the preventDefault method. But then you'll be responsible for handling the form data yourself.
Here's what that might look like:

<form method="post" action="" name="myForm"   >    
  <input class="color" type="checkbox" name="color[]" value="Black"> // Class matches name
  <input class="color" type="checkbox" name="color[]" value="White">
  <input class="color" type="checkbox" name="color[]" value="Green">    
  <input class="language" type="checkbox" name="language[]" value="Punjabi">
  <input class="language" type="checkbox" name="language[]" value="Sindhi">
  <input class="language" type="checkbox" name="language[]" value="Saraiki">
  <!-- The onclick attribute calls our processForm function -->
  <input type="submit" onclick="processForm(event)" value="Submit" />
</form>  

<script>
    function processForm(event) {
      event.preventDefault(); // Keeps the form from being submitted/cleared
      let checkedColorBoxes = document.querySelectorAll(".color:checked"); // Find checked boxes
      let checkedLanguageBoxes = document.querySelectorAll(".language:checked");
      // Store the values from the checked boxes 
      let selectedColors = [], selectedLanguages = [];
      for(let i = 0; i < checkedColorBoxes.length; i++){
        selectedColors.push(checkedColorBoxes[i].value); 
      }
      for(let i = 0; i < checkedLanguageBoxes.length; i++){
        selectedLanguages.push(checkedLanguageBoxes[i].value); 
      }
      // Now we have the values that would have been submitted, and can do what we like with them
      // If nothing better comes to mind, one (very kludgy) option is to populate another (hidden) 
      //   form with them and secretly submit that.
      console.log(`colors: ${selectedColors}`);
      console.log(`languages: ${selectedLanguages}`);         
    }
</script>

Another approach would be to listen for when the checkboxes change and keep track of their states (checked or unchecked). Then, in processForm(), you could skip the preventDefault() call and just re-check the appropriate boxes programmatically.

user_82230700
Related