javascript - 提交表单后如何留在同一页面

Question

我目前正在使用 jQuery 创建订阅表单。我的问题是我想让这个表单在用户单击“订阅”按钮后留在同一页面中，当过程成功时，按钮“订阅”上的文本更改为“订阅”。

代码如下:

HTML:

<form action="http://bafe.my/sendy/subscribe" class="subcribe-form" accept-charset="UTF-8" data-remote="true" method="post">
    <input type="hidden" name="authenticity_token" />
    <input type="hidden" name="list" value="ttx7KjWYuptF763m4m892aI59A" />
    <input type="hidden" name="name" value="Landing" />
    <div class="form-group">
        <div class="input-group">
            <input type="email" name="email" class="form-control" placeholder="Masukkan email anda" />
            <span class="input-group-btn"><button type="submit" class="btn btn-primary">SUBSCRIBE<i class="fa fa-send fa-fw"></i></button></span>
        </div>
    </div>
</form>

jQuery:

$(".subcribe-form").submit(function(){
    var validEmail = true;
    $("input.form-control").each(function(){
        if ($.trim($(this).val()).length == 0){
            $(this).addClass("has-error");
            validEmail = false;
        } else{
            $(this).removeClass("has-error");
        }
    });
    if (!validEmail) alert("Please enter your email to subscribe");
    return validEmail;
});

Answer 1

您可以使用 event.preventDefault为了防止表单提交，但您还需要将数据发送到服务器，为此您可以使用 jQuery ajax (见下面的代码)

    $(".subcribe-form").submit(function(event){
    event.preventDefault()
    var validEmail = true;

    $("input.form-control").each(function(){
        if ($.trim($(this).val()).length == 0){
            $(this).addClass("has-error");
            validEmail = false;
        }
        else{
            $(this).removeClass("has-error");
        }
    });

    if (!validEmail) { alert("Please enter your email to subscribe");
    }else {
//for valid emails sent data to the server
     $.ajax({
            url: 'some-url',
            type: 'post',
            dataType: 'json',
            data: $('.subcribe-form').serialize(),
            success: function(serverResponse) {
                       //... do something with the server Response...
                     }
        });
    }
    return validEmail;
    });