Question

使用jQuery，我有一个按钮，可以在点击时添加输入字段，每个字段都有唯一的id和name，由函数和计数器变量var count = 0;确定。如何在将表单提交到数据库后重置计数器，以便输入字段的id和name从默认值开始，而不刷新页面？

以下是表单的摘录：

$(document).ready(function() {
        var wrapper = $(".input_fields_wrap");
        var count = 0;

        $('p#add_field').click(function(e) {
            e.preventDefault();
            count += 1;
            $('#container').append(
                '<div>\n\
                   <label>Weight</label><input type="text" id="weight_' + count + '" name="weight[]' + '"/>\n\
                <a href="#" class="remove_field" id="removebtn">Remove</a><br>'
            );
        });

        $(wrapper).on("click", ".remove_field", function(e) { 
            e.preventDefault();
            $(this).parent('div').remove();
            x--;
        })
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST" id="productForm">
   <div id="container" class="input_fields_wrap">
      <div>
         <p id="add_field"><button type="button" href="#"><span>Add new</span></button></p>
      </div>
   </div>
   <button type="submit" name="btnSubmit">Save to database</button>
</form>

以下是我在成功提交后删除动态元素的工作。（我是以正确的方式做到这一点吗？）现在我如何在这里将var count重置回= 0？提前谢谢。

$.ajax({
      url: form.attr('action'),
      type: form.attr('method'),
      data: form.serialize(),
      dataType: 'json',
      success: function(response) {

          if (response.success == true) {
            $("[id*='weight']").each(function() {
              $(this).parent("div").remove();
            });

            $("[id*='removebtn']").each(function() {
              $(this).parent("div").remove();
            });

Answer 1

您的代码将如下所示

$(document).ready(function() {
        var wrapper = $(".input_fields_wrap");
        var count = 0;

        $('p#add_field').click(function(e) {
            e.preventDefault();
            count += 1;
            $('#container').append(
                '<div>\n\
                   <label>Weight</label><input type="text" id="weight_' + count + '" name="weight[]' + '"/>\n\
                <a href="#" class="remove_field" id="removebtn">Remove</a><br>'
            );
        });

        $(wrapper).on("click", ".remove_field", function(e) { 
            e.preventDefault();
            $(this).parent('div').remove();
            x--;
       })
//Send data to database  on a click of a button

$('#sendDataTodb').click( function(){
$.ajax({
      url: form.attr('action'),
      type: form.attr('method'),
      data: form.serialize(),
      dataType: 'json',
      success: function(response) {

          if (response.success == true) {
            $("[id*='weight']").each(function() {
              $(this).parent("div").remove();
            });

            $("[id*='removebtn']").each(function() {
              $(this).parent("div").remove();
                });
}
});
    //reset counter
    count =0;
    });

    });

成功提交到数据库后，将函数变量重置为默认值

1 个答案: