CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
IRiley
IRiley

Reputation: 21

Submit a form on Page without refresh

I have 2 forms on my page, a sign up form and a payment, the payment form is just a button that takes the user to pay and returns a token when payment is valid (the payment is done through an external service so must be this way) but whenever payment is successful it submits the form and refreshes the page, so removes all data from the sign up form.

My issue is that I want the button to pay be clicked and if successful the submit button for the sign up form becomes enabled (whenever the token from payment is set) without the page refreshing. I know I will probably have to use jQuery or AJAX but can't find a solution. Any help greatly appreciated!

Signup Form:

<form action="signup.php" id="signup"> <input type="text" name="some input">

followed by more input...

<input type="button" name="Pay Now"> <input type="submit" name="Submit"> </form>

Payment:

<form action="#" id="payment"> <script></script></form>

So when the user reaches the last part of the sign up, initially only the pay button is shown in this form, this displays the button to pay (which contains script that provides the payment method), after which the token and other variables are posted (only care about the token) and when it completes I need the sign up form to see that it has been posted and enable the submit button to send the sign up form.

Upvotes: 2

Views: 681

Answers (2)

Deshal Kh
Deshal Kh

Reputation: 253

by ajax you can do it

 $(window).load(function () {

     setInterval(function(){ 
    $.ajax({

            url: "your url", 

            success: function(result){

                (after load what you have to do)                 

            } });   


    }, 4000);

4000 means every 4000 milisec your page will be reload automatically.

Upvotes: 1

Mohhamad Hasham
Mohhamad Hasham

Reputation: 2032

I assume that event.preventDefault() is what you are looking for while making an AJAX request. 

$(document).ready(function () {
$('#myform').on('submit', function(e) {
    e.preventDefault();
    $.ajax({
        url : $(this).attr('action') || window.location.pathname,
        type: "GET",
        data: $(this).serialize(),
        success: function (data) {
            $("#form_output").html(data);
        },
        error: function (jXHR, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });
});
});

Upvotes: 0

Related Questions