How to reload this form without refreshing whole page?

user_15307233 0
Viewed 535

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>

css html jquery javascript
3 Answers

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>

user_153501390

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.

user_140860210

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.

user_108709710
Related