reset() 函数不起作用，为什么？答案

【问题标题】：reset() function is not working, why?reset() 函数不起作用，为什么？
【发布时间】：2017-09-19 20:43:59
【问题描述】：

我创建了一个基本表单，允许用户创建动态输入字段，当用户提交表单时，数据将存储在数据库中。我正在使用 AJAX 提交数据，因为我不希望我的页面重新加载。但是提交页面后，插入的数据我从字段中删除，必须重置表单，但重置功能不起作用。

这是我的代码：check.html

<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <header>Dynamic Add Input Fields</header>
    <form name="form1" id="form1">
        <table class="table table-bordered" id="dynamic_field">
            <tr>
                <td><input type="text" name="name[]" id="name" class="form-control name_list"/></td>
                <td><input type="button" name="add" id="add" class="btn btn-success" value="ADD"></td>
            </tr>
        </table>
        <input type="button" name="submit" id="submit" value="Submit"/>
        <input type="reset" name="reset" id="reset" value="Reset"/>
    </form>
    <script type="text/javascript" >
        $(document).ready(function () {
            var i = 1;
            $('#add').click(function () {
                i++;
                $('#dynamic_field').append('<tr id="row'+i+'"><td><input id="name" type="text" name="name[]" class="form-control name_list"/></td><td><input type="button" name="remove" id="'+i+'" class="btn_remove" Value="X" /></td></tr>'); 
            });
            $(document).on('click','.btn_remove',function () {
                var button_id = $(this).attr("id");
                $("#row"+button_id+"").remove();
            });
            $('#submit').click(function () {
                $.ajax({
                    type:"POST",
                    url:"check.php",
                    data:$('#form1').serialize(),
                    success:function (data) {
                        alert(data);
                        $('#form1')[0].reset();
                    }
                });
            });
        });
    </script>

</body>
</html>

动作文件：check.php

<?php
    $conn = mysqli_connect('localhost','root','root','Test2');

    if(!$conn) {
        echo 'Couldn\'t connect to database'.mysqli_error();
    }
    $name = $_POST['name'];
    $count = $length = '';
    $length = count($name);

    for($count=0 ; $count<$length ; $count++) {
        $sql = "INSERT INTO `check1` (name) VALUES ('$name[$count]')";
        $result = mysqli_query($conn,$sql);
        if(!$result) {
            echo 'Couldn\'t add data '.$count.mysqli_error();
            break;
        }
    }
?>

其他一切正常。甚至数据也存储在数据库中。唯一的问题是重置功能。感谢您的帮助和您的时间。

【问题讨论】：

将$('#form1')[0].reset(); 更改为document.getElementById('form1').reset()，它应该可以工作。
@Fuross 他已经在使用 jQuery，为什么不用$('form')？
@Sid Joshi 因为 jQuery 的 $() 只返回 HTML 元素，需要在元素对象上调用 reset 方法。
@Fuross 看看this

标签： javascript jquery ajax forms

【解决方案1】：

不要使用name="reset"。如果这样做，$('#form1')[0].reset 指的是按钮，而不是功能。

将其更改为 name="resetButton" 或完全去掉 name 属性——对于未提交到服务器的输入，您不需要名称。

【讨论】：

仍然无法正常工作。我删除了这个名字，但没有得到任何运气。谢谢
好的，在删除 ID 和 NAME 之后，它的工作...谢谢

【解决方案2】：

或者你可以试试这个

$.ajax({
    type:"POST",
    url:"check.php",
    data:$('#form1').serialize(),
    success:function (data) {
       alert(data);
       $("#form1").trigger("reset");
    }
});

【讨论】：