Undefined value set by previous Jquery event

I am trying to post a form with dynamic set value on click event by getting undefined respose Here is my code.

$( ".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");
                        }
                        }
        });
});

On POST bookingid is Undefind. Little Help will be appriciated

EDITED :

<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>

As requested Above is my html Code As requested. I ALREADY TRIED SETTING bookingpaymentid Val on click event But It Also shows Undefined when Form is POST On the Server.

2 answers

  • answered 2018-09-17 06:11 Josep Widtantio

    Because you declare bookingid inside $( ".paymentselect" ).click(function() {. You can try this:

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

  • answered 2018-09-17 06:42 uedemir

    In plunker bookingid is not undefined. Go to plunker address and check browser console to see variable's values.

    You might be having trouble to load order of your scripts file. As you can see in plunker make sure to load your js codes end of the body tag.