Submit a form on Page without refresh

Question

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.

You use the form to post data to your external pay service, but you say the form is still there. I don't get it. A more concrete example would be very helpful. See: stackoverflow.com/help/mcve — KIKO Software
– KIKO Software, Commented Aug 26, 2017 at 7:32
Can you give an example from how the page looks? What code do you use to submit the form? — Steven
– Steven, Commented Aug 26, 2017 at 7:38
Hey, @IRiley. Welcome aboard. You'll need to show some code. check out stackoverflow.com/help/mcve and stackoverflow.com/help/how-to-ask — sheriffderek
– sheriffderek, Commented Aug 26, 2017 at 7:43
@Steven Uploading from my phone at the moment so have updated to what I can remember. Thanks! — IRiley
– IRiley, Commented Aug 26, 2017 at 8:26
@IRiley Thanks but If you can see your code edit it again so we can see how you processes the forms! But appreciate for the quick responds — Steven
– Steven, Commented Aug 26, 2017 at 8:30

Deshal Kh · Accepted Answer · 2017-08-26 08:11:02Z

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.

Mohhamad Hasham · Accepted Answer · 2017-08-26 07:48:40Z

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); } }); }); });

Collectives™ on Stack Overflow

Submit a form on Page without refresh

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related