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处理程序进行表单提交（reset），则需要明确action=""表单。

类似的东西：

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是HTML DOM元素方法（即普通js函数），而不是一个jQuery，所以$('selector')[0]用于将jquery对象转换为DOM元素。或者你可以使用普通的js

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

这是一个演示：

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>

复选框不起作用

2 个答案: