Checkbox doesn't work in form

Question

I have small form with checkbox. When I fill the form and save data to database and try to fill it with another data to save it to database my checkbox doesn't work. It works only when I refresh page. here is code.

<form action="javascript:saveNewBreakfast();" name="basic_validate"
            id="breakfast_validate" novalidate="novalidate">
            <div class="control-group" id="add_breakfast" style="display: none">
                <div class="control-group">
                    <label class="control-label">Select new one</label>
                    <div class="controls">
                        <select name="required" id="breakfast_select">
                        </select>
                    </div>
                </div>
                <div class="control-group">
                    <label class="checkbox-inline"><input
                        id="is_free_breakfast" type="checkbox" checked>Is
                        free ? </label>
                </div>
                <div class="control-group" id="price_breakfast" style="display: none">
                    <label class="control-label">Price</label>
                    <div class="controls">
                        <input type="number" min="0"
                            style="border-radius: 5pc; height: 30px; width: 280px; margin-bottom: 0px;"
                             id="breakfast_price"> EUR
                    </div>
                </div>
                <div class="control-group">
                    <button type="submit" class="btn btn-mini; btn-success">Save</button>
                </div>

            </div>
        </form>


$('#is_free_breakfast').change(function(){
    getIsFree = $('#is_free_breakfast').is(':checked');
    if(getIsFree){
        $('#price_breakfast').hide();
    }else{
        $('#price_breakfast').show();
    }
});

Answer 1

You will need to explicit reset the form if you are using js handler for form submit ( action="" ).

Something like:

function saveNewBreakfast() {
    // submit handler code

    // reset the form to initial values
    $('#breakfast_validate')[0].reset();

    // show/hide the input based on checkbox's initial values
    $('#is_free_breakfast').change();
}

NOTE: reset is a HTML DOM Element method (ie plain js function), and not a jQuery one, so $('selector')[0] is used to convert jquery object to DOM element. Or you can use plain js

document.getElementById('breakfast_validate').reset();

---

Here's a demo:

 function saveNewBreakfast() { // submit hanlder code alert('saved with price: ' + ($('#breakfast_price').val() || 'free')); $('#breakfast_validate')[0].reset(); $('#is_free_breakfast').change(); } $('#is_free_breakfast').change(function() { getIsFree = $('#is_free_breakfast').is(':checked'); if (getIsFree) { $('#price_breakfast').hide(); } else { $('#price_breakfast').show(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="javascript:saveNewBreakfast();" name="basic_validate" id="breakfast_validate" novalidate="novalidate"> <div class="control-group" id="add_breakfast"> <div class="control-group"> <label class="control-label">Select new one</label> <div class="controls"> <select name="required" id="breakfast_select"> </select> </div> </div> <div class="control-group"> <label class="checkbox-inline"><input id="is_free_breakfast" type="checkbox" checked>Is free ? </label> </div> <div class="control-group" id="price_breakfast" style="display: none"> <label class="control-label">Price</label> <div class="controls"> <input type="number" min="0" style="border-radius: 5pc; height: 30px; width: 280px; margin-bottom: 0px;" id="breakfast_price"> EUR </div> </div> <div class="control-group"> <button type="submit" class="btn btn-mini; btn-success">Save</button> </div> </div> </form> 

Answer 2

 $(document).ready(function () { var html_content = '<label class="control-label">Price</label>' + '<div class="controls">' + '<input type="number" min="0"' + 'style="border-radius: 5pc; height: 30px; width: 280px; margin-bottom: 0px;"' + 'name="breakfast_price" id="breakfast_price"> EUR' + '</div> '; $('#is_free_breakfast').change(function () { getIsFree = $('#is_free_breakfast').is(':checked'); if (getIsFree) { $('#price_breakfast').empty(); } else { $('#price_breakfast').html(html_content); } }); }); function form_submit(){ var queryString = $('#breakfast_validate').serialize(); console.log(queryString); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="javascript:saveNewBreakfast();" name="basic_validate" id="breakfast_validate" novalidate="novalidate"> <div class="control-group" id="add_breakfast"> <div class="control-group"> <label class="control-label">Select new one</label> <div class="controls"> <select name="required" id="breakfast_select"> <option>option 1</option> <option>option 2</option> <option>option 3</option> </select> </div> </div> <div class="control-group"> <label class="checkbox-inline"> <input id="is_free_breakfast" type="checkbox" checked>Is free ? </label> </div> <div class="control-group" id="price_breakfast"> </div> <div class="control-group"> <button type="button" onclick="form_submit()" class="btn btn-mini; btn-success">Save</button> </div> </div> </form>