Question

我有这段代码`

<!-- Form -->
        <div id="contact-form"><form id="contact-form" action="process.php" method="post">
            <div>
                <label>
                    <span>Name: (required)</span>
                    <input type="text" name="name" placeholder="Full Name" title="Enter your name" class="required">            
                </label>
            </div>
            <div>
                <label>
                    <span>Email: (required)</span>
                    <input type="text" name="email" placeholder="Your Email" title="Enter your email" class="required">         
                </label>
            </div>
            <div>
                <label>
                    <span>Telephone: (required)</span>
                    <input type="text" name="phone" placeholder="Your Telephone" title="Enter your telephone" class="required">         
                </label>
            </div>
            <div>
                <label>
                    <span>Website: (required)</span>
                    <input type="text" name="website" placeholder="Your Website" title="Enter your website">            
                </label>
            </div>
            <div>
                <label>
                    <span>Message: (required)</span>
                    <textarea placeholder="Include all the details you can" name="message" type="text" tabindex="5" required></textarea>
                </label>
            </div>
            <div>
                <button name="submit" type="submit" id="contact-submit">Send Email</button>
            </div>
        </form></div>
        <!-- /Form -->

        </div>
    </div>

    <script src="jss/scripts.js"></script>

我希望在3秒后重置表单并在3秒后感谢....

Answer 1

您可以使用Form.reset();

setTimeout(function(){
    document.getElementById("contact-form").reset();
}, 3000);

我准备了demo

Answer 2

setTimeout(resetForm, 3000); // Call the reset form function in 3000 ms or 3 sec

function resetForm(){
    $("form#contact-form")[0].reset(); // Use the form.reset function
}

如果您想在表单提交上执行此操作，请执行以下操作：

$("form#contact-form").submit(function(){
    setTimeout(function(){this.reset()}, 3000);
});

Answer 3

试试这个

首先为表单提供唯一ID

<form id="my_contact_form" action="process.php" method="post">

现在您可以使用给定的JAVASCRIPT

setInterval(function(){
    var oForm = document.getElementById('my_contact_form');

    var frm_elements = oForm.elements;
   for (i = 0; i < frm_elements.length; i++)
{
    field_type = frm_elements[i].type.toLowerCase();
    switch (field_type)
    {
    case "text":
    case "password":
    case "textarea":
    case "hidden":
        frm_elements[i].value = "";
        break;
    case "radio":
    case "checkbox":
        if (frm_elements[i].checked)
        {
            frm_elements[i].checked = false;
        }
        break;
    case "select-one":
    case "select-multi":
        frm_elements[i].selectedIndex = -1;
        break;


       default:
            break;
        }
    }

},3000);

这将在3秒后清除表单的所有字段

请参阅JS FIDDLE

3秒后重置表格

3 个答案: