如何在不刷新整个页面的情况下重新加载此表单？

Question

I am using "Send Email from a Static HTML Form using Google Apps Mail" on my static site. But when I submit a form i have to refresh the whole page to submit another mail. If I don't reload the page success text don't vanish and send button don't work. So i am asking is there any way to refresh my form section without refreshing the whole page? please help me how to do it.

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <div class="container mail text-center justify-content-center mt-5"> <div class="row"> <div class="col-12"> <h3>Contact Me Now:</h3> <hr> </div> <div class="col-md-12 col-xs-12 form"> <form method="post" role="form" action="https.//script.google:com/macros/s/AKfycbwtLbTgUDGQxi9FY8Jks6bJs3TnYPBNU7rvO8b8_zrdyD4Pa6g/exec" method="post" role="form" class="gform " data-email=""> <div class="form-row"> <div class="col form-group"> <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4 " data-msg="Please enter at least 4 chars " required="true" /> </div> <div class="col form-group"> <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email " data-msg="Please enter a valid email " required="true" /> </div> </div> <div class="form-group"> <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4 " data-msg="Please enter at least 8 chars of subject " required="true" /> </div> <div class="form-group"> <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for me " placeholder="Message " required="true"></textarea> </div> <div class="text-center"> <button type="submit" class="btn btn-success w-100 submit">Send Message</button> </div> <div style="display:none" class="thankyou_message"> <div class="alert" role="alert"> <em>Thanks</em> for contacting me. I will get back to you soon.<br> <i class="fas fa-sync fa-spin"></i> </div> </div> </form> </div> </div> </div> <script data-cfasync="false" type="text/javascript" src="https.//cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>

Answer 1

If the form is refreshing the page, you'll need to use preventDefault to cancel its default behaviour then use reset() to reset the form.

 const form = document.querySelector('form'); form.addEventListener('submit', e => { e.preventDefault(); [...form.elements].forEach(input => console.log(`${input.name}: ${input.value}`)); // Not Important form.reset(); });

 <form method="POST"> <input type="text" name="name" placeholder="name"> <input type="password" name="password" placeholder="password"> <button type="submit">Submit</button> </form>

Answer 2

In JavaScript there is a function for forms which will reset the form clearing all the data in it, ready for another submit. This can be accomplished by running a JavaScript function on submit. This requires a couple changes in your code.

Firstly, we need to change this:

<button type="submit" class="btn btn-success w-100 submit">Send Message</button>

to this:

<button type="button" onclick="submitForm1()" class="btn btn-success w-100 submit">Send Message</button>

Once done, we can add some JavaScript to your page. If you have a JavaScript file linked to the page already, you can just add this code to that.

function submitForm1() {
    let form = document.getElementsByClassName("gform");
    form.submit();
    form.reset();
}

You can also use document.getElementById("[id]"); and add an ID to your form. This is also preferable.

Answer 3

The first thing that comes to mind it's do all this on js so you can through ajax request send what you want. But I think it's not what you're looking for. You can't send data from page without refreshing, that's how it's work, php or html with some functional. You can change...

<button type="button" class="btn btn-success w-100">Send Message</button>

... and collect all data by JavaScript and send it through ajax.