使用 JavaScript 提交 FORM 后如何停止打开 ACTION 页面

Posted 2023-05-09

【中文标题】使用 JavaScript 提交 FORM 后如何停止打开 ACTION 页面

【英文标题】：How to stop opening ACTION page after submitting FORM using JavaScript

【发布时间】：2017-06-01 12:33:59

【问题描述】：

当我使用“提交”按钮提交表单时，它会将我带到“操作”页面。但我想在提交后留在同一页面并在“提交成功”的表单下方显示一条消息，并重置表单数据。我的代码在这里...

<h1>CONTACT US</h1>
<div class="form">
<form action="https://docs.google.com/forms/d/e/1FAIpQLSe0dybzANfQIB58cSkso1mvWqKx2CeDtCl7T_x063U031r6DA/formResponse" method="post" id="mG61Hd">
Name
<input type="text" id="name" name="entry.1826425548">

Email
<input type="text" id="email" name="entry.2007423902">

Contact Number
<input type="text" id="phone" name="entry.1184586857">

Issue Type
<select id="issue" name="entry.1960470932">
  <option>Feedback</option>
  <option>Complain</option>
  <option>Enquiry</option>
</select>
Message
<textarea name="entry.608344518"></textarea>

<input type="submit" value="Submit" onclick="submit();">
</form>
<p id="form_status"></p>
</div>

【问题讨论】：

使用 Ajax 而不是提交表单

大概不用form

考虑使用 Ajax

【参考方案1】：

您需要使用Ajax发送数据，无需刷新页面。

//Jquery for not submit a form.
$("form").submit( function(e) 
    e.preventDefault();
     return false;

);

//Ajax Example
$.ajax(
        data: yourDataKey: 'yourDataValue', moreKey: 'moreLabel',
        type: "POST", //OR GET
        url: yourUrl.php,   //The same form's action URL
        beforeSend: function()
            //Callback beforeSend Data          
        ,
        success: function(data)                
            //Callback on success returning Data                
        
    );

【参考方案2】：

尝试捕获提交事件，而不是添加 onclick="submit()" 到您的按钮。在您的提交功能中，您还需要返回 false 并防止默认，以防止表单未提交并将您带到操作页面。

使用 jQuery，它看起来像这样：

$("#id_form").on("submit", function(e)
   //send data through ajax
   e.preventDefault();
   return false;
 );