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

Question

When I am submitting the FORM using SUBMIT button, it takes me to the ACTION page. But I want to stay in same page after submission and show a message below the form that "Submitted Successfully", and also reset the form data. My code is here...

<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

You need to use Ajax for sending Data and no refresh the page.

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

Instead of adding onclick="submit()" to your button try capturing the submit event. In your submit function you also need to return false and prevent default to prevent the form from not submitting and taking you to the action page.

Using jQuery it would look something like this:

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