Question

当我使用SUBMIT按钮提交FORM时，它会转到ACTION页面。但是我希望在提交后保持在同一页面，并在表单下面显示一条消息＆＃34;成功提交＆＃34;，并重置表单数据。我的代码在这里......

<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>

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

Answer 2

不要在按钮上添加onclick =“submit（）”，而是尝试捕获提交事件。在提交功能中，您还需要返回false并阻止默认设置，以防止表单无法提交并将您带到操作页面。

使用jQuery看起来像这样：

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

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

2 个答案: