如何在不刷新整個頁面的情況下重新加載此表單？

Question

我正在使用“使用 Google Apps 郵件從 Static HTML 表單發送 Email”在我的 ZA81259CEF8E959C624ZDF1D466 站點上。 但是當我提交表單時，我必須刷新整個頁面才能提交另一封郵件。 如果我不重新加載頁面成功文本不會消失並且發送按鈕不起作用。 所以我問有沒有辦法在不刷新整個頁面的情況下刷新我的表單部分？ 請幫我怎么做。

 <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

如果表單正在刷新頁面，您需要使用preventDefault取消其默認行為，然后使用reset()重置表單。

 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

在 JavaScript 中有一個 function 用於 forms 它將重置表單以清除其中的所有數據，准備再次提交。 這可以通過在提交時運行 JavaScript function 來完成。 這需要對您的代碼進行一些更改。

首先，我們需要改變這一點：

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

對此：

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

完成后，我們可以將一些 JavaScript 添加到您的頁面。 如果您已經有一個鏈接到該頁面的 JavaScript 文件，您只需添加此代碼即可。

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

您也可以使用document.getElementById("[id]"); 並在您的表單中添加一個 ID。 這也是優選的。

Answer 3

想到的第一件事就是在js上做這一切，所以你可以通過ajax請求發送你想要的。 但我認為這不是你要找的。 你不能在不刷新的情況下從頁面發送數據，這就是它的工作原理， php或html具有一些功能。 你可以改變...

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

...並通過 JavaScript 收集所有數據並通過 ajax 發送。