Question

我目前正在使用jQuery创建订阅表单。我的问题是我想在用户点击“SUBSCRIBE”按钮后使这个表格停留在同一页面，当进程成功时，按钮“SUBSCRIBE”上的文本变为“SUBSCRIBED”。

以下是代码：

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

Answer 2

添加preventDefault以防止表单提交

$(".subcribe-form").submit(function(event){

event.preventDefault()

使用serialize和post将您的数据发送到所需的网址

Answer 3

只需处理提交事件的表单提交，并返回false：

如果使用AJAX :(使用ajax，你可以这样做，或者e.prenventDefault（），两种方式都有效。）

$(".subcribe-form").submit(function(){
 ... // code here
 return false;
});

如果使用简单形式：

 $(".subcribe-form").submit(function(e){
     ... // code here
     e.preventDefault();
 });

Answer 4

在我看来，用PHP做起来会更容易。如果您不想使用PHP，那么您可以忽略这个答案。

如果您想尝试一下，可以执行以下操作：
1.从表单标记中删除action属性 2.编写类似于：

的PHP代码

Import project

Answer 5

这就是我停留在同一页面上的方式，这是使用jQuery的一个最小示例：

<form id=f 
onsubmit="$.post('handler.php',$('#f').serialize(),d=>r.textContent+=rd.innerHTML=d);return false">
<textarea name=field1 id=t>user input here</textarea>
<input type=submit>
</form>
<textarea id=r width=80></textarea>
<div id=rd></div>

关键是要从 onsubmit 处理程序的形式返回false。

提交表格后如何留在同一页面

5 个答案: