在页面上提交表单而不刷新

时间:2022-11-24 15:18:48

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!

我的问题是我希望点击按钮付费,如果成功,则注册表单的提交按钮变为启用(无论何时设置了付款的令牌),而不刷新页面。我知道我可能不得不使用jQuery或AJAX但无法找到解决方案。任何帮助非常感谢!

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.

因此,当用户到达注册的最后部分时,最初只有付费按钮显示在此表单中,这将显示要支付的按钮(其中包含提供付款方式的脚本),之后会发布令牌和其他变量(只关心令牌),当它完成时,我需要注册表单以查看它已被发布并启用提交按钮以发送注册表单。

2 个解决方案

#1


1  

by ajax you can do it

通过ajax你可以做到

 $(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.

4000表示每4000毫秒,您的页面将自动重新加载。

#2


0  

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

我假设在发出AJAX请求时你正在寻找event.preventDefault()。

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

#1


1  

by ajax you can do it

通过ajax你可以做到

 $(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.

4000表示每4000毫秒,您的页面将自动重新加载。

#2


0  

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

我假设在发出AJAX请求时你正在寻找event.preventDefault()。

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