Question

我创建了一个基本表单，允许用户创建动态输入字段，当用户提交表单时，数据存储在数据库中。我正在使用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;
        }
    }
?>

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

Answer 1

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

将其更改为name="resetButton"或完全删除name属性 - 您不需要为未提交给服务器的输入命名。< / p>

Answer 2

或者你可以试试这个

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

reset（）函数不起作用，为什么？

2 个答案: