亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

選中復選框并使用ajax提交表格時,送貨地址與帳單地址相同

選中復選框并使用ajax提交表格時,送貨地址與帳單地址相同

神不在的星期二 2021-04-30 21:51:26
我有兩個地址表格。一種是計費,另一種是運輸。當用戶選中“到相同地址的發貨”復選框時,發貨表格將被隱藏。當我在單擊復選框之前通過表單時,未提交表單。選中該復選框時,將發送兩種形式的準確數據,但是當用戶取消選中該復選框時,帳單郵寄地址將發布三次。我使用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')          }        });     
查看完整描述

1 回答

?
阿波羅的戰車

TA貢獻1862條經驗 獲得超6個贊

您的代碼為事件處理程序分配了單擊復選框時單擊提交按鈕的事件。這意味著:

  • 如果未單擊該復選框,則不會設置這些按鈕單擊的事件處理程序。因此,單擊按鈕將不會執行任何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();

    // }

}


查看完整回答
反對 回復 2021-05-13
  • 1 回答
  • 0 關注
  • 169 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號