如何在使用JavaScript提交表单后停止打开操作页面

如何在使用JavaScript提交表单后停止打开操作页面,javascript,html,Javascript,Html,当我使用提交按钮提交表单时,它会将我带到操作页面。但我想在提交后留在同一页面,在表单下方显示一条消息“提交成功”,并重置表单数据。我的代码在这里 <h1>CONTACT US</h1> <div class="form"> <form action="https://docs.google.com/forms/d/e/1FAIpQLSe0dybzANfQIB58cSkso1mvWqKx2CeDtCl7T_x063U031r6DA/formResponse

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

<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发送数据,而无需刷新页面

//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                
        }
    });
尝试捕获提交事件,而不是将onclick=“submit()”添加到按钮。在提交函数中,您还需要返回false和prevent default,以防止表单不提交并将您带到操作页面

使用jQuery,它看起来像这样:

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

使用Ajax而不是提交表单可能不需要使用表单考虑使用Ajax