Uncheck all checkbboxes after form is submitted

Question

Hi I have a form that already clears other inputs but I'm having a hard time with the checkboxes. Could someone help me. This is my form inputs.

<input type="hidden" name="admissionassessmentfee" value="0">
<input type="hidden" name="admissionassessmentexam" value="0">
<input type="checkbox" class="checkbox-inline" style="width: 25px; height: 17px;" name="admissionassessmentfee" value="1">Assessment Fee
<input type="checkbox" class="checkbox-inline" style="width: 25px; height: 17px;" name="admissionassessmentexam" value="1">Assessment Exam

Now, this is my javascript. As you will see the bottom I have already a clearForm Function where it clears other inputs when submitted.

var manageAdmissionTable;

$(document).ready(function() {

/*
*-------------------------------------------------
* click on the add admission model button
*-------------------------------------------------
*/
$("#addAdmissionModelBtn").unbind('click').bind('click', function() {

    /*remove error messages*/
    $(".form-group").removeClass('has-success').removeClass('has-error');
    $(".text-danger").remove();
    $("#add-admission-messages").html('');

    $("#createAdmissionForm").unbind('submit').bind('submit', function() {
        var form = $(this);
        var formData = new FormData($(this)[0]);
        var url = form.attr('action');
        var type = form.attr('method');

        $.ajax({
            url : url,
            type : type,
            data: formData,
            dataType: 'json',
            cache: false,
            contentType: false,
            processData: false,
            async: false,
            success:function(response) {                    

                if(response.success == true) {                      
                    $("#add-admission-messages").html('<div class="alert alert-success alert-dismissible" role="alert">'+
                  '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                  '<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+response.messages+
                '</div>');

                    manageAdmissionTable.ajax.reload(null, false);
                    $('.form-group').removeClass('has-error').removeClass('has-success');
                    $('.text-danger').remove();

                    clearForm(); // THE CLEAR FORM WHEN SUBMITTED
                }   
                else {                                  
                    if(response.messages instanceof Object) {                           
                        $.each(response.messages, function(index, value) {
                            var key = $("#" + index);

                            key.closest('.form-group')
                            .removeClass('has-error')
                            .removeClass('has-success')
                            .addClass(value.length > 0 ? 'has-error' : 'has-success')
                            .find('.text-danger').remove();                         

                            key.after(value);

                        });
                    }
                    else {                          
                        $("#add-admission-messages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+
                      '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                      '<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+
                    '</div>');                      
                    }                           
                } // /else
            } // /success
        }); // /ajax

        return false;
    }); 
}); // /click on the add admission button   
});

function clearForm() // THE CLEAR FORM FUNCTION
{
 $('input[type="text"]').val('');
 $('select').val('');
 $('input[type="date"]').val('');
 $(".fileinput-remove-button").click(); 
}

The simplest way to clear a form is to call it's [*reset*](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset) method. — RobG, Apr 22 '17 at 13:48

score 1 · Answer 1 · answered Apr 22 '17 at 13:24

Something like this with jQuery 1.9.1+ ? Add the following to your function clearForm():

$('input[type="checkbox"]').prop('checked', false); // Uncheck

$(document).ready(function() {
  $('#test').on('click', function() {
    clearForm();
  });
});

function clearForm() // THE CLEAR FORM FUNCTION
{
  $('input[type="text"]').val('');
  $('input[type="checkbox"]').prop('checked', false); // Uncheck
  $('select').val('');
  $('input[type="date"]').val('');
  $(".fileinput-remove-button").click();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input type="hidden" name="admissionassessmentfee" value="0">
<input type="hidden" name="admissionassessmentexam" value="0">
<input type="checkbox" class="checkbox-inline" style="width: 25px; height: 17px;" name="admissionassessmentfee" value="1">Assessment Fee
<input type="checkbox" class="checkbox-inline" style="width: 25px; height: 17px;" name="admissionassessmentexam" value="1">Assessment Exam


<button id="test">
  TEST SUBMIT
</button>

Thanks it worked. I've done all the methods in the marked duplicate thread and I don't know why its not working. Its just I just need to clear cache. But thanks anyways :) — Cecatrix, Apr 22 '17 at 14:20

Uncheck all checkbboxes after form is submitted

1 Answers1