选中复选框并使用ajax提交表格时，送货地址与帐单地址相同

Question

我有两个地址表格。一种是计费，另一种是运输。当用户选中“到相同地址的发货”复选框时，发货表格将被隐藏。当我在单击复选框之前通过表单时，未提交表单。选中该复选框时，将发送两种形式的准确数据，但是当用户取消选中该复选框时，帐单邮寄地址将发布三次。我使用jQuery和Ajax代码提交表单。    $(document).ready(function(){      $('.le-checkbox').click(function(){        if(this.checked) {          $("#deliveryadd").hide();          $(".le-checkbox").attr("checked", "checked");          $('#submit').click(function(){            var address= $('#address').val();            var city_id= $('#city_id').val();            var user = {{Auth::user()->id}};            console.log(address,city_id,user);            console.log(address,city_id,user);            billing(address,city_id,user);            shipping(daddress,dcity_id,user);          });        }         else {          $("#deliveryadd").show();          $(".le-checkbox").removeAttr("checked");          $('#submit').click(function(){            var address= $('#address').val();            var city_id= $('#city_id').val();            var user = {{Auth::user()->id}};            console.log(address,city_id,user);            billing(address,city_id,user);          });          $('#deliverySubmit').click(function(){                var daddress= $('#de_address').val();            var dcity_id= $('#de_city_id').val();            var user = {{Auth::user()->id}};            console.log(daddress,dcity_id,user);                shipping(daddress,dcity_id,user);          });        }      });      function billing(baddress,bcity,buser){        $.ajaxSetup({          headers: {            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')          }        });     

Answer 1

您的代码为事件处理程序分配了单击复选框时单击提交按钮的事件。这意味着：

• 如果未单击该复选框，则不会设置这些按钮单击的事件处理程序。因此，单击按钮将不会执行任何JS提交工作，但可能会执行常规的非JS表单提交；

• 如果您单击一次复选框（例如，将其选中），则将事件处理程序添加到您的#submit按钮。如果现在取消选中该复选框，则向按钮添加另一个事件处理程序#submit，然后在#deliverySubmit按钮上添加一个事件处理程序！取消选中该复选框不会删除您之前添加的事件处理程序。因此，如果您单击#submit，两个处理程序都将触发。如果您多次勾选和取消勾选该复选框，则只需继续堆积其他事件处理程序，当最终单击该按钮时，所有这些事件处理程序都将运行。

这不是一个好方法。相反，您应该独立于用户交互设置事件处理程序，并使代码根据复选框状态确定要执行的操作。

其他一些观察：

• 要跟踪复选框的点击次数，您应该使用$('.le-checkbox').on('change', function() {，而不是click;

• 我不确定为什么$(".le-checkbox").attr("checked", "checked");在勾选复选框时为什么要手动设置复选框状态（例如）？我不会那样做，它肯定会引起问题，实际上并没有做任何事情。

• 在#submit处理程序中，选中此复选框时，您具有shipping(daddress,dcity_id,user);，但未设置这些变量。如果勾选该复选框，则表示运费==结算，所以我认为您的意思是shipping(address, city_id, user);对吧？

• 我不确定为什么您的复选框文本是实际的链接？这只会使事情复杂化-仅使用label，以便单击文本将正确切换复选框。

• 您尚未向我们显示您的#submit按钮HTML，所以我不知道-您为什么有2个按钮？还不够吗？

将所有这些放在一起，尝试如下操作：

$('#submit').click(function(){

    var $checkbox=$('.le-checkbox'),

        address= $('#address').val(),

        city_id= $('#city_id').val(),

        daddress= $('#de_address').val(),

        dcity_id= $('#de_city_id').val(),

        user = {{Auth::user()->id}};

    // Billing address is always sent, no matter the checkbox state

    billing(address, city_id, user);

    // Shipping address depends on checkbox state

    if ($checkbox.is(':checked') {

        shipping(address, city_id, user);

    } else {

        shipping(daddress, dcity_id, user);

    }

});

$('.le-checkbox').on('change', function(){

    $("#deliveryadd").toggle();

    // .toggle() is simpler than .show() and .hide()

    // if (this.checked) {

    //     $("#deliveryadd").hide();

    // } else {

    //     $("#deliveryadd").show();

    // }

}