フォームでチェックボックスが機能しない

Question

小文字のチェックボックスがあります。フォームに入力してデータをデータベースに保存し、別のデータでデータベースに保存しようとすると、チェックボックスが機能しません。これは、ページを更新するときにのみ機能します。ここにコードです。

<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

フォームのためのjsハンドラを使用している場合は、（action=""）提出明示reset形にする必要があります。

のような何か：

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(); 
} 

注：resetは、そう$('selector')[0] DOM要素にjQueryオブジェクトを変換するために使用されたjQueryの1つのHTML DOM要素法（すなわち、プレーンJS機能）で、そしてない 。

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>