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

我目前使用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; 
});

来源

2017-03-22 user3103783

是不是有点怪更改为“订阅”按钮上的文字？因为它仍然是一个按钮，所以如果用户点击它会发生什么？按钮文本应该是一个动词。无论如何，不是提交表单，您可以发出Ajax请求，然后在Ajax完成后将按钮文本更新为“已订阅”。 – nnnnnn

当使用Ajax时，一定要将按钮的类型从“提交”更改为“按钮” – mvermand

您可以使用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; 
    });

来源

2017-03-22 09:18:09

但是然后数据将不会到达服务器... – nnnnnn

是的，但你可以使用ajax发送数据到服务器，或者你可以提交表单从Js使用$（“ .subcribe形式“）提交（）; –

如果您使用'.submit（）'提交表单，那么这会将您带回相同的问题。使用Ajax是一个很好的解决方案，但是你需要在你的答案中解释一下 - 如果OP已经知道如何做，那么他们不会问这个问题...... – nnnnnn

添加的preventDefault所以防止表单提交

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

event.preventDefault()

使用serialize和post将数据发送到所需的URL

来源

2017-03-22 09:17:57

数据需要提交（这种或那种方式），OP只是想在事后保留在同一页面上。 – nnnnnn

感谢提.. ..编辑我的答案 –

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

如果使用AJAX（使用Ajax你可以做到这一点，或e.prenventDefault（），两者的工作方式。）

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

如果用简单的形式：

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

来源

2017-03-22 09:18:42

如果您阻止提交，数据如何到达服务器？ – nnnnnn

在我的评论中有两种方法可以解决问题，如果使用正常形式，最好做一个e。preventDefault（）;本质上按钮提交它的原因是通过表单的动作进行重定向，如果它使用ajax，则最好使返回为false; –

但你可以看到OP的代码。他们没有使用Ajax。（但是）如果你想建议Ajax作为解决方案，那么你需要在答案中解释一下，因为目前它阻止了数据被保存...... – nnnnnn

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

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

if (isset($_POST['submit']) { // "submit" is the name of the submit button 
    onSubmit(); 
} 

function onSubmit() { 
    /* your code here */ 
}

来源

2017-03-22 09:38:21

如果删除action属性，那么数据如何到达当前在action属性中的特定URL？ – nnnnnn

它没有。在我的示例中，数据保留在页面上，并在该页面上处理它。 –

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

回答

相关问题