Question

我试图让表单清除一次提交的内容。但一旦提交，页面就不会清除。我该如何解决这个问题

我在main.js文件中有这段代码

// Clear form
document.getElementById('Forms').reset();

此表单仍无法重置

金

            <div class="alert">Your message has been sent</div>
            <form id="contact">
                <br>
                <p>
                    <label>Name</label>
                    <input type="text" name="name" id="name" required>
                </p>
                <p>
                    <label>Email Address</label>
                    <input type="email" name="email" id="email" required>
                </p>
                <p>
                    <label>Phone Number</label>
                    <input type="text" name="phone" id="phone">
                </p>
                <p>
                    <label>Subject</label>
                    <input type="text" name="subject" id="subject">
                </p>
                <p class="full">
                    <label>Message</label>
                    <textarea name="message" rows="5" id="message"></textarea>
                </p>
                <p class="full">
                    <button type="submit">Submit</button>
                </p>
            </form>
        </div>

Answer 1

如果您仔细阅读：<input type="text" id="AccountRequest_AddressLine1"> <input type="text" id="AccountRequest_City"> <input type="text" id="AccountRequest_Country"> <input type="text" id="AccountRequest_State"> <input type="text" id="AccountRequest_PostCode">表格......表格......听起来很熟悉？没有？究竟！使用document.getElementById('Forms')...'原因

'contact'

这是一个快速的

<form id="contact">

const contactForm = document.getElementById("contact");

contactForm.addEventListener("submit", function(evt) {
  evt.preventDefault();
  this.reset();
})

#contact label {
  display: block;
}

Answer 2

你在js文件中输入了错误的id 试试

请改用它 document.getElementById('contact').reset();

表单内容未清除提交按钮

2 个答案: