Question

我试图通过获取未定义的respose在click事件上发布具有动态设置值的表单，这是我的代码。

$( ".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 上未定义。 将获得一点帮助

已编辑：

<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 ，但是当表单在服务器上为POST时，它也显示为Undefined。

我刚刚发现在发布form时该值变得不确定。任何建议

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中未定义。转到address，查看浏览器控制台以查看变量的值。

您可能无法加载scripts文件的顺序。如您在plunker中所见，请确保将js代码加载到body标签的末尾。

先前的Jquery事件设置的未定义值

2 个答案: