locked
form submit after ajax successful call RRS feed

  • Question

  • User518360877 posted

    Dear All

    i am doing the Non-Seamless payment gateway integration, for this i need to save the amount and other details in database before sending the user to billing page.

    i am saving the data with Ajax Jquery and in success function submitting the form so it will take the user to billing page. 

    but it's not working that way, what is doing that it's taking the user to billing page without saving the data. i am not able to figure, why the code is  not working.

    please help me, below is the code i am trying with. please guide me where i am doing the mistake.

     $(function () {
            $("[id*=bookingSubmit]").click(function () {
    
                $("#divProcess").fadeIn(1500);
    
                
    
                var obj = {};
                //payment gateway variables+++++
                obj.merchant_id = document.getElementById("tid").value;
                obj.amount = $.trim($("[id*=amount]").val());
                obj.order_id = $.trim($("[id*=order_id]").val());
                obj.currency = "INR";
                obj.redirect_url = "http://localhost:1871/ccavResponseHandler.aspx";
                obj.cancel_url = "http://localhost:1871/ccavResponseHandler.aspx";
                obj.language = "EN";
                //payment gateway variables-----
    
                $.ajax({
                    type: "POST",
                    url: "booking.aspx/SendBookingForm",
                    data: JSON.stringify(obj),
                    contentType: "application/JSON; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        $("#divProcess").fadeOut(1000);
                        setTimeout(function () {
                            $("#divSuccess").fadeIn(1000);
                        }, 3000);
                        setTimeout(function () {
                            $("#divSuccess").fadeOut(500);
                        }, 15000);
                        
                        $("#bookingForm").submit();
                        alert("submit");
                        return false;
                    },
                    error: function (r) {
    
                        $("#divProcess").fadeOut(1000);
                        setTimeout(function () {
                            $("#divError").fadeIn(1000);
                        }, 3000);
                    }
                });
                return false;
            });
        });

    <form class="simple-from" id="bookingForm" runat="server" method="post" action="ccavRequestHandler.aspx"> <asp:ScriptManager ID="scriptManager1" runat="server"> </asp:ScriptManager> <div class="simple-group"> <h3 class="small-title">Travel Information</h3> <div class="row"> <div class="col-xs-12 col-sm-6"> <div class="form-block type-2 clearfix"> <div class="form-label color-dark-2">From City*</div> <div class="input-style-1 b-50 brd-0 type-2 color-3"> <input type="text" class="dpk-text-border" id="txtFromCity" data-validation="required" data-validation-error-msg="" name="fromCity" placeholder="Enter origin city" /> </div> </div> </div> <div class="col-xs-12 col-sm-6"> <div class="form-block type-2 clearfix"> <div class="form-label color-dark-2">Package</div> <div class="input-style-1 b-50 brd-0 type-2 color-3"> <input type="text" class="dpk-text-border" id="txtPackage" runat="server" name="package" data-validation="required" readonly="true" data-validation-error-msg="" /> </div> </div> </div> <div class="col-xs-12 col-sm-6"> <div class="form-block type-2 clearfix"> <div class="form-label color-dark-2">Number of Persons</div> <div class="input-style-1 b-50 brd-0 type-2 color-3"> <asp:DropDownList ID="ddlPersons" runat="server" CssClass="dpk-list-item cssPersons"> <asp:ListItem Value="1">1</asp:ListItem> <asp:ListItem Value="2">2</asp:ListItem> <asp:ListItem Value="3">3</asp:ListItem> <asp:ListItem Value="4">4</asp:ListItem> <asp:ListItem Value="5">5</asp:ListItem> <asp:ListItem Value="6">6</asp:ListItem> <asp:ListItem Value="7">7</asp:ListItem> <asp:ListItem Value="8">8</asp:ListItem> <asp:ListItem Value="9">9</asp:ListItem> </asp:DropDownList> </div> </div> </div> <div class="col-xs-12 col-sm-6"> <div class="form-block type-2 clearfix"> <div class="form-label color-dark-2">Travel Date</div> <div class="input-style-1 b-50 brd-0 type-2 color-3"> <input type="date" class="dpk-text-border" id="date" name="destination" data-validation-error-msg="" data-validation="required" placeholder="Travel Date" /> </div> </div> </div> <div class="col-xs-12 col-sm-6 pull-right"> <div class="form-block type-2 clearfix"> <div class="form-label color-dark-2">Total Amount</div> <div class="input-style-1 b-50 brd-0 type-2 color-3"> <input type="text" readonly="true" class="dpk-text-border txtAmount" id="amount" name="amount" data-validation-error-msg="" /> </div> </div> </div> <div class="col-xs-12 col-sm-8"> <div id="divProcess" class="alert alert-warning dpk-alert-warning" style="display: none;"> <strong>Sending message...</strong> </div> <div id="divError" class="alert alert-danger dpk-alert-danger" style="display: none;"> <strong>Oops!!!</strong> There is an error. Something went wrong. </div> <div id="divSuccess" class="alert alert-success dpk-alert-success" style="display: none;"> <strong>Thank you!</strong> Your message has been sent successfully. </div> </div> </div> </div> <div class="simple-group"> <h3 class="small-title">Your Personal Information</h3> <div class="row"> <div class="col-xs-12 col-sm-6"> <div class="form-block type-2 clearfix"> <div class="form-label color-dark-2">Name*</div> <div class="input-style-1 b-50 brd-0 type-2 color-3"> <input type="text" class="dpk-text-border" id="txtName" name="billing_name" placeholder="Enter your full name" data-validation="required" /> </div> </div> </div> <div class="col-xs-12 col-sm-6"> <div class="form-block type-2 clearfix"> <div class="form-label color-dark-2">E-mail Adress*</div> <div class="input-style-1 b-50 brd-0 type-2 color-3"> <input type="email" name="billing_email" id="txtEmail" class="dpk-text-border" placeholder="Enter your e-mail address" data-validation-error-msg="" data-validation="email" /> </div> </div> </div> <div class="col-xs-12 col-sm-6"> <div class="form-block type-2 clearfix"> <div class="form-label color-dark-2">Phone Number*</div> <div class="input-style-1 b-50 brd-0 type-2 color-3"> <input type="number" class="dpk-text-border" id="mobile" placeholder="Enter your phone number" name="billing_tel" data-validation-error-msg="" data-validation="required" /> </div> </div> </div> </div> </div> <input type="submit" id="bookingSubmit" class="c-button bg-dr-blue-2 hv-dr-blue-2-o" value="confirm booking" /> <!--Hidden Field--> <input type="text" name="tid" id="tid" readonly class="hide" /> <input type="text" name="merchant_id" id="merchant_id" value="161956" class="hide" /> <input type="text" name="order_id" id="order_id" value="123654789" class="hide" /> <input type="text" name="currency" value="INR" class="hide" /> <input type="text" runat="server" id="txtAmount" name="amount" value="123" class="hide serverAmount" /> <input type="text" class="hide" name="redirect_url" value="http://localhost:1871/ccavResponseHandler.aspx" /> <input type="text" class="hide" name="cancel_url" value="http://localhost:1871/ccavResponseHandler.aspx" /> <input type="text" class="hide" name="delivery_name" value="Satkar Travels" /> <input type="text" class="hide" name="delivery_address" value="Plot no. 2027-P, Sector 45, Gurgaon" /> <input type="text" class="hide" name="delivery_city" value="Gurgaon" /> <input type="text" class="hide" name="delivery_state" value="Haryana" /> <input type="text" class="hide" name="delivery_zip" value="122003" /> <input type="text" class="hide" name="delivery_country" value="India" /> <input type="text" class="hide" name="delivery_tel" value="01242582027" /> <input type="text" class="hide" name="merchant_param1" value="additional Info." /> <input type="text" class="hide" name="merchant_param2" value="additional Info." /> <input type="text" class="hide" name="merchant_param3" value="additional Info." /> <input type="text" class="hide" name="merchant_param4" value="additional Info." /> <input type="text" class="hide" name="merchant_param5" value="additional Info." /> <input type="text" class="hide" name="promo_code" /> <input type="text" class="hide" name="customer_identifier" /> </form>

    Thank you

    Saturday, February 10, 2018 9:12 AM

All replies

  • User475983607 posted

    The first step is to do a bit of basic troubleshooting to figure out where the bug is located.  Is the bug on the client or the server or both?

    Open the browser's dev tools by pressing F12.  Check for errors in the console.  Check for HTTP errors in the network tab.  If you see errors then fix the error and move on to the next step.

    Place a breakpoint in the SendBookingForm Web Method and verify the Web Method is being called and the parameters as what you expect.  The network tab in dev tools also shows the posted data.  Next, step through the Web Method code and verify the INSERT logic is working as expected.  You did not post the Web Method code so we cannot provide assistance in that regard.  Common mistakes are NOT creating a static Web Method and input parameter name mismatches.

    Saturday, February 10, 2018 11:39 AM