Неопределенное значение, установленное предыдущим событием Jquery

Question

Я пытаюсь опубликовать форму с динамическим заданным значением в событии клика, получив неопределенное размещение. Вот мой код.

$( ".paymentselect" ).click(function() {
    var bookingid=$(this).data('id');
    $('#paymentstats').css('display','block');
    $('#paymentform').attr('action', document.location.origin +"/accounts/" + bookingid);

});

$('#paymentform').submit(function(event){
        event.preventDefault();

        var data=$('#paymentform').serialize();
        $.ajax({
            url: $(this).attr('action'),
            method: 'POST',
            data: data,
            beforeSend: function() {
                            // setting a timeout
                        $('#wait').html('<i class="material-icons">cached</i>');
                        },
            success: function(data){
                        if(data.status){
                            $('#paymentstats').css('display','none');
                            alert("UPDATED");
                            //location.reload();
                        }else
                        {
                            alert("something went wrong");
                        }
                        }
        });
});

На POST bookingid является Undefind. Маленькая Помощь будет оценена

ИЗДАНО:

<table>
<tr>
    <td>
        <button class="paymentselect" data-id="NH7003687415654"> Update</button>
    </td>
</tr>
<table>

<div id="paymentstats" class="custom-modal">

<!-- Modal content-->
<div class="modal-content">
        <div class="card" style="margin-bottom:0px">
                <form id="paymentform" method="POST"> //form that will be posted
                    <div class="body">
                      <div class="row">
                        <div class="col-sm-6">
                          <div class="form-group">
                                <div class="form-line">
                                    <input type="text" class="form-control" id="utr" name="utr" placeholder="" required>
                                    <input type="hidden" class="form-control" id="bookingpaymentid" name="id" placeholder="">
                                </div>
                                <label class="small-label" for="utr">Payment UTR(if any)</label>
                          </div>
                        </div>
                        <div class="col-sm-6">
                          <div class="form-group">
                                <div class="form-line">
                                    <input type="text" class="form-control" id="ref" name="ref" placeholder="" required>
                                </div>
                                <label class="small-label" for="ref">Payment Ref</label>
                          </div>
                        </div>
                      </div>
                    </div>  
                    <div class="modal-footer">
                    <div class="spin" id="wait"></div>
                        <button type="submit" class="btn btn-raised bg-pink waves-effect">Submit</button>
                        <button type="button" class="btn btn-raised bg-red waves-effect" id="close-btn">Close</button>
                    </div>
                </form> 
        </div>

</div>

В соответствии с просьбой Выше мой HTML-код, как требуется. Я УЖЕ ПРОБНАЯ НАСТРОЙКА bookingpaymentid Val при событии клика, но также показывает Undefined, когда форма POST на сервере.

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

Answer 1

Потому что вы заявляете bookingid внутри $( ".paymentselect" ).click(function() {, Вы можете попробовать это:

var bookingid = null;
$( ".paymentselect" ).click(function() {
    bookingid=$(this).data('id');
    $('#paymentstats').css('display','block');
    $('#paymentform').attr('action', document.location.origin +"/accounts/" + bookingid);
});

Answer 2

В плункер bookingid не является неопределенным Перейдите по адресу plunker и проверьте консоль браузера, чтобы увидеть значения переменных.

У вас могут быть проблемы с загрузкой порядка вашего scripts файл. Как вы можете видеть в плунжере, убедитесь, что js коды конца body тег.