Question

我正在创建一个调查应用程序，该应用程序会动态添加一个下拉框和两个文本框。从下拉菜单中选择一个选项后，它将填充所选选项。不幸的是，第一个选项有效，但对于其他选项，它只是填充我在第一个中选择的数据。总体目标是使用php将其输入数据库中。这是我的php脚本

<?php
$connect = mysqli_connect("localhost", "root", "", "test");
$number = count($_POST["name"]);
$crops = count($_POST["selectedCrop"]);
// echo $number;
// echo $crop;
if ($number > 0) {
    for ($i=0; $i<$number; $i++) {
        if (trim($_POST["name"][$i] != '')) {
            $sql = "INSERT INTO tbl_name(name,crop) VALUES('".mysqli_real_escape_string($connect, $_POST["selectedCrop"][$i])."' ,'".mysqli_real_escape_string($connect, $_POST["name"][$i])."')";
            mysqli_query($connect, $sql);
        }
    }
    echo "Data Inserted";
} else {
    echo "Please Enter Name";
}

结果如下The Image with the duplicated resukts

这是我用来实现的HTML代码和Javascript

<body>
<div class="container">
    <div class="page-header">
        <h1 class="text-center">SURVEY</h1>
    </div>
    <div class="container">
        <div class="col-md-2">
        </div>
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <strong>E. FARMING AND AGRIBUSINESS </br>Farming</strong>
                </div>
                <div class="panel-body">
                    Which of the value chains did your household produce in September 2016 through rain fed production mechanisms? Or you produce now through rain fed production mechanisms?<i>Select all options applicable  – 1,  2 up to last</i>
                    <br />
                    <form name="add_name" id="add_name">
                        <!-- This is the Table That I am adding the widgets dynamically -->
                        <table class="table table-striped table-bordered" id="dynamic_field">
                            <thead>
                            <tr>
                                <th>Name of Crop Options</th>
                                <th>Crop Selected</th>
                                <th>Produced/produce this value chain in 2015/2016?</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    <div class="dropdown" name= "crops[]">
                                        <button id="crop" onchange="copyValue()" class="btn dropdown-toggle" type="button" data-toggle="dropdown" >
                                            Name of Crop<span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">Maize</a></li>
                                            <li><a href="#">Beans</a></li>
                                            <li><a href="#">Tomatoes</a></li>
                                            <li><a href="#">Potatoes</a></li>
                                        </ul>
                                    </div>
                                </td>
                                <td>
                                    <input type="text" name="selectedCrop[]" id="selectedCrop" placeholder="Enter your Name" class="form-control name_list" />
                                </td>
                                <td>
                                    <input type="text" name="name[]" 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>
                                <!-- <td><button type="button" name="remove" id="'0'" class="btn btn-danger btn_remove">X</button></td></tr> -->
                            </tr>
                            </tbody>
                        </table>
                        <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        var i=1;
        $('#add').click(function(){
            i++;
            $('#dynamic_field').append('<tr id="row'+i+'"><td><div class="dropdown" name= "crops[]"><button  class="btn dropdown-toggle" type="button" data-toggle="dropdown" >Name of Crop<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">Maize</a></li> <li><a href="#">Beans</a></li><li><a href="#">Tomatoes</a></li><li><a href="#">Potatoes</a></li></ul></div></td><td><input type="text" name="selectedCrop[]" id="selectedCrop" placeholder="Enter your Name" class="form-control name_list" /></td><td><input type="text" name="name[]" placeholder="Enter your Name" 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:"farming_and_agribusiness_1_copy.php",
                method:"POST",
                data:$('#add_name').serialize(),
                success:function(data)
                {
                    alert(data);
                    $('#add_name')[0].reset();
                }
            });
        });
    });
    $(function(){
        $(".dropdown-menu li a").click(function(){
            $("#crop:first-child").text($(this).text());
            $("#crop:first-child").val($(this).text());
            $("#selectedCrop:first-child").text($(this).text());
            $("#selectedCrop:first-child").val($(this).text());
        });
    });
</script>
<!-- Survey - END -->
</div>
</body>

我正在创建动态输入现场调查应用程序

0 个答案: