表或div中的动态输入错误

时间:2014-10-09 10:39:23

标签: php jquery html

有人可以解释一下为什么这段代码不允许我用逗号分隔的内爆变量在我用表格或多种div格式包围它时不起作用。

当我从表中删除代码时,代码可以正常工作。我也用其他div中的表单元素测试了它,但没有。它仅在其自身的HTML表单时才有效。

摘要:我希望工程师输出像。 john,derek,peter et ....目前它只给出了我的第一线

<?php
$eng = array();
$test = $_POST['test'];
$eng = implode(',',$_POST['engineers']);
?>
<html>
<head>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
    <script>    
   $(document).ready(function(){
        //when the Add Filed button is clicked
        $("#add").click(function (e) {
            //Append a new row of code to the "#items" div
            $("#items").append('<div><input type="text" name="engineers[]"><button class="delete">Delete</button></div>');
        });
        $("body").on("click", ".delete", function (e) {
            $(this).parent("div").remove();
        });
    });
    </script>
</head>
<body>
<?php echo $eng; ?>
<div class="form_table">
<table>
<form method="post">        
    <tr><th><label for="engineers">Engineers</label></th><td>    
    <button type="button" id="add">Add Another Engineer</button>
    <div id="items">
        <div><input type="text" name="engineers[]"></div>
    </div>    
    </td></tr>        
    <tr><th colspan="2"><input type="submit" name="" value="Add Job"  class="submit" /></th></tr>        
</form></table>             
</body>         
</html>

2 个答案:

答案 0 :(得分:2)

有一点需要指出的是,当表单提交时,始终会处理表单输入。

你的标记有点不对,反之亦然。表格必须在表格内。

<?php
// handle form inputs when the form is submitted
if($_SERVER['REQUEST_METHOD'] == 'POST') {
    $eng = implode(',', array_filter($_POST['engineers']));
    echo $eng;
}

?>

<div class="form_table">
<!-- form must wrap the table -->
    <form method="POST">
        <table>
            <tr>
                <th><label for="engineers">Engineers</label></th>
                <td>
                    <button type="button" id="add">Add Another Engineer</button>
                    <div id="items">
                        <div><input type="text" name="engineers[]" /></div>
                    </div>
                </td>
            </tr>
            <tr>
                <th colspan="2">
                    <input type="submit" name="" value="Add Job" class="submit" />
                </th>
            </tr>
        </table>
    </form>
</div>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(document).ready(function(){
    //when the Add Filed button is clicked
    $("#add").click(function (e) {
        //Append a new row of code to the "#items" div
        $("#items").append('<div><input type="text" name="engineers[]"> <button class="delete">Delete</button></div>');
    });

    $("body").on("click", ".delete", function (e) {
        $(this).parent("div").remove();
    });
});
</script>

Sample Output

答案 1 :(得分:0)

将表格放在表格之外因为表格标签可以包含tr标签而不是标签

前:

 <?php


        $eng = array();

    $test = $_POST['test'];

    $eng = implode(',',$_POST['engineers']);
    ?>
    <html>
        <head>

     <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

            <script>    $(document).ready(function(){
            //when the Add Filed button is clicked
            $("#add").click(function (e) {
                //Append a new row of code to the "#items" div
                $("#items").append('<div><input type="text" name="engineers[]">
<button class="delete">Delete</button></div>');
            });

        $("body").on("click", ".delete", function (e) {
            $(this).parent("div").remove();
        });
        });
      </script>
        </head>
        <body><?php
    echo $eng;
    ?>

            <div class="form_table">
<form method="post">
    <table>

    <tr><th><label for="engineers">Engineers</label></th><td>


    <button type="button" id="add">Add Another Engineer</button>
        <div id="items">
            <div><input type="text" name="engineers[]"></div>
            </div>



    </td></tr>

    <tr><th colspan="2"><input type="submit" name="" value="Add Job"  class="submit" /></th></tr>

    </table>
</form>