Question

我希望能够在按钮时动态添加文本字段点击
我希望能够从文本字段中获取数据并插入它进入数据库。
截至目前，其他一切正常，我只需要这个，也许我可以还添加一个删除按钮以动态删除最后一个文本字段也
我之所以需要它是动态的，是因为我不想这样做刷新页面导致所有数据丢失
我找到了一个可以帮助我动态添加文本字段的代码但我不知道如何制作它以便我需要去另一个页面只是为了访问数据

<html>
<form action="checklist3.php" method="post">
    <button type='submit' name='submit' id='buttonParent'>Submit</button>
    <button type="submit" name="back">Back</button>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

    <?php
    session_start();
    require_once('../mysql_connect.php');
    $rowarray = $_SESSION['rowarray'];
    $dishname = $_SESSION['dishname'];


    echo '<br>';
    echo "Add Procedures";
    echo ' <form name="addproc" id="addproc">
                <table class="proctable" id="proctable">  
                                        <tr>  
                                             <td><input type="text" name="procedure[]" placeholder="Enter your Name" class="form-control name_list" /></td>  
                                             <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>  
                                        </tr>  
                                   </table>  
                        </form>';


    echo "<input type='button' value='Remove Button' id='removeButton'>";
    echo "<body>";


    echo "</body>";

    if (isset($_POST['home'])) {
        header("Location: http://" . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . "/chefmenu.php");
    }
    if (isset($_POST['back'])) {
        header("Location: http://" . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . "/checklist2.php");
    }

    ?>

</form>

<script>
    $(document).ready(function () {
        var i = 1;
        $('#add').click(function () {
            i++;
            $('#proctable').append('<tr id="row' + i + '"><td><input type="text" name="name[]" placeholder="Enter Procedure" class="form-control name_list" /></td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr>');
        });
        $(document).on('click', '.btn_remove', function () {
            var button_id = $(this).attr('id');
            $('#row' + button_id + '').remove();
        });
        $('#submit').click(function () {
            $.ajax({
                url: 'name.php',
                method: 'POST',
                data: $('#addproc').serialize(),
                success: function (data) {
                    alert(data);
                    $('#addproc')[0].reset();
                }
            });
        });
    });
</script>

</html>

Answer 1

使用一些jquery和AJAX很容易做到：

使用jquery为您的表单创建并append字段，类似
使用jquery事件监听器捕获表单摘要：$("form").live("submit", function (e){e.preventDefault()...}
序列化所有表单（使用新添加的字段）并通过AJAX发送

代码示例：

    $("form").live("submit", function (event) {
      event.preventDefault();
      var form = $(this);
      $.ajax({
          url: form.attr('action'), // Get the action URL to send AJAX to
          type: "POST",
          data: form.serialize(), // get all form variables
          success: function(result){
              // ... do your AJAX post result
          }
      });
  });

异步提交动态表单

1 个答案: