选中复选框并使用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();    // }}