Адрес доставки совпадает с адресом выставления счета, когда установлен флажок, и отправьте форму, используя ajax - PullRequest
0 голосов
/ 26 апреля 2019

У меня есть две формы адреса.Один - это биллинг, а другой - доставка.Когда пользователь устанавливает флажок «отправить по тому же адресу», форма доставки скрывается.

Когда я передаю форму перед установкой флажка, форма не отправляется.Когда флажок установлен, точные данные отправляются для обеих форм, но когда пользователь снимает флажок, адрес выставления счета отправляется три раза.

Я использую 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')
          }
        });
        $.ajax({
          url: '{{url("/billing-address")}}',
          type: 'post',
          dataType: 'html',
          data: {
            address:baddress,
            city_id:bcity,
            user_id:buser
          },
          success: function(result){
            $('#billing').html(result);
          }
        }).fail(function(jqXHR, textStatus, error){
          console.log(jqXHR.responseText);
        });
      }

      function shipping(saddress,scity,suser){
        $.ajaxSetup({
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
        });
        $.ajax({
          url: '{{url("/shipping-address")}}',
          type: 'post',
          dataType: 'html',
          data: {
            address:saddress,
            city_id:scity,
            user_id:suser
          },
          success: function(result){
            $('#shipping').html(result);
          }
        }).fail(function(jqXHR, textStatus, error){
          console.log(jqXHR.responseText);
        });
      }
    });

это код формы ДОСТАВКА


        <h2 class="border h1">shipping address</h2>
        @if(App\Address::where('user_id',Auth::user()->id)->where('type','Delivery')->exists())
        <address class="bold" id="addr">
            @foreach ($collection = Auth::user()->address as $item)
            @if ($item->type == 'Delivery')
                {{$item->street}},<br>
                {{$item->city->name}},<br>
                {{$item->city->parent->name}}
                @endif    
            @endforeach
            </address>
        @else
    <div class="billing-address" id="deliveryadd">
                               <div class="row field-row">
                                <div class="col-xs-12">
                                    <label>address*</label>
                                    <input class="le-input" type="text" id="de_address" data-placeholder="Street address" name="de_address">
                                </div>
                            </div><!-- /.field-row -->

                            <div class="row field-row">
                                <div class="col-xs-12 col-sm-6">
                                    <label>City*</label>
                                    <select class="le-input">
                                        <option>Lahore</option>
                                    </select>
                                </div>
                                <div class="col-xs-12 col-sm-6">
                                    <label>&nbsp;</label>
                                    <select class="le-input" id="de_city_id">
                                    <option value="null">Select Town</option>
                                    @foreach ($collection = App\City::where('parent_id','!=', '0')->get() as $item)
                                    <option value="{{$item->id}}">{{$item->name}}</option>
                                    @endforeach
                                </select>
                                </div>
                            </div><!-- /.field-row -->

                            <button id="deliverySubmit" class="le-button big">Save</button>
        </div><!-- /#shipping-address -->
        <div class="row field-row">
                <div class="col-xs-12">
                    <input name="same" class="le-checkbox big" type="checkbox" />
                    <a class="simple-link bold" href="#">ship to Same address?</a>
                </div>
            </div><!-- /.field-row -->
            @endif

и его форма для выставления счетов HTML код

<h2 class="border h1">billing address</h2>
{{-- <a style="float: right;" href="javascript:;" id="edit">Edit</a> --}}
                @if(App\Address::where('user_id',Auth::user()->id)->where('type','Billing')->exists())
                <address class="bold" id="addr">
                    @foreach ($collection = Auth::user()->address as $item)
                    @if ($item->type == 'Billing')
                        {{$item->street}},<br>
                        {{$item->city->name}},<br>
                        {{$item->city->parent->name}}
                        @endif    
                    @endforeach
                    </address>
                @else
                    <div class="row field-row">
                        <div class="col-xs-12">
                            <label>address*</label>
                            <input class="le-input" type="text" id="address" data-placeholder="Street address">
                        </div>
                    </div><!-- /.field-row -->

                    <div class="row field-row">
                        <div class="col-xs-12 col-sm-6">
                            <label>City*</label>
                            <select class="le-input">
                                <option>Lahore</option>
                            </select>
                        </div>
                        <div class="col-xs-12 col-sm-6">
                            <label>&nbsp;</label>
                            <select class="le-input" id="city_id">
                            <option value="null">Select Town</option>
                            @foreach ($collection = App\City::where('parent_id','!=', '0')->get() as $item)
                            <option value="{{$item->id}}">{{$item->name}}</option>
                            @endforeach
                        </select>
                        </div>
                    </div><!-- /.field-row -->

                    <button id="submit" class="le-button big">Save</button>
                @endif

1 Ответ

2 голосов
/ 26 апреля 2019

Ваш код назначает обработчики событий для кликов на кнопках отправки, когда установлен флажок.Это означает:

  • , если флажок не установлен, никакие обработчики событий для этих нажатий кнопок не устанавливаются.Таким образом, нажатие кнопок не приведет к выполнению каких-либо действий по отправке JS, но, вероятно, будет выполнено с обычной формой, не связанной с JS;

  • , если вы установите флажок один раз, например, чтобы поставить галочкуэто, вы добавляете обработчик событий к вашей кнопке #submit.Если вы сейчас снимите флажок, вы добавите еще один обработчик событий к своей кнопке #submit, а один к своей кнопке #deliverySubmit!Снятие флажка не удаляет обработчик событий, который вы добавили ранее.Поэтому, если вы нажмете #submit, оба обработчика сработают.Если вы установите и снимите флажок несколько раз, вы просто продолжите накапливать дополнительные обработчики событий, все из которых будут запущены, когда вы, наконец, нажмете кнопку.

Thisне очень хороший подходВместо этого вы должны настроить свои обработчики событий независимо от взаимодействия с пользователем и заставить код решать, что делать, основываясь на состоянии флажка.

Некоторые другие наблюдения:

  • Чтобы отслеживать клики по флажку, вы должны использовать $('.le-checkbox').on('change', function() {, а не click;

  • Я не уверен, почему вы вручную устанавливаете состояние флажка (например, $(".le-checkbox").attr("checked", "checked");), когда флажок отмечен?Я бы не стал этого делать, это, безусловно, вызовет проблемы и на самом деле ничего не сделает.

  • В вашем обработчике #submit, когда установлен флажок, у вас есть shipping(daddress,dcity_id,user);, но эти переменные не установлены.Если флажок отмечен, то отправка == выставление счетов, поэтому я думаю, что вы действительно имеете в виду shipping(address, city_id, user);, верно?

  • Я не уверен, почему текст вашего флажка является реальной ссылкой?Это только усложняет ситуацию - просто используйте метку , так что нажатие на текст будет правильно переключать флажок.

  • Вы не показали нам свою кнопку #submitHTML, так что я не знаю - почему у вас 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();
    // }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...