Php 添加动态输入并将数据插入MySQL

我有一个表单，它有输入，有一个按钮，可以在下面添加相同的行，以便在需要时插入更多数据。目前我不想将其插入数据库，我只想在一个名为“f.php”的页面中回显这些数据，但我只看到第一行，无法看到第二行

<form action="forms/f.php" method="post" enctype="multipart/form-data"> 
    <tr style="height:85px; text-align:center;">
        <td><input type="text" name="hours1[]" id="hours1" /></td>
        <td><input type="text" name="hours2[]" id="hours2" /></td>
        <td><input type="text" name="durationh[]" id="durationh" /></td>
        <td><input type="text" name="hrscode[]" id="hrscode" /></td>
        <td><textarea name="remark" id="remark[]"></textarea></td>

    </tr> 
</table>
<div class="input_fields_wrap">
</div>
<script>
$(document).ready(function() {
var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID

var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper).append('<div style="height:80px;"><a href="#" class="remove_field"><img src="img/remove.png"></a><table id="dataTable" width="900" style="margin-left:25px;"><tr style="text-align:center;"><td width="70"><input type="text" name="hours1[]" id="hours1" /></td><td width="64"><input type="text" name="hours2[]" id="hours2" /></td><td width="92"><input type="text" name="durationh[]" id="durationh" /></td><td><input type="text" name="hrscode[]" id="hrscode" /></td><td><textarea name="remark" id="remark[]"></textarea></td></tr></table></div>');
    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
})});
</script><br />    <input type="submit" value="submit">
</form>

$（文档）.ready（函数（）{
var max_fields=10；//允许的最大输入框数
var wrapper=$（“.input_fields_wrapp”）；//字段包装器
var add_button=$（“.add_字段_button”）；//添加按钮ID
var x=1；//初始文本框计数
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x

这是f.php代码：

<?php
$hours = $_POST['hours1'];
$hours1 = $hours[0];
$hours2 = $hours[1];
echo $hours1; echo $hours2;
?>

你能帮我找到一个解决办法，告诉我我做错了什么吗

---

非常感谢。

将创建的输入字段的名称更改为

hours[]

，而不是

hours1[]

和

hours2[]

。然后您应该能够遍历所有字段。

创建一个数据库

CREATE DATABASE `phpstorm`; 
USE `phpstorm`;
CREATE TABLE `phpstorm`.`country_table`( `id` INT(11) NOT NULL AUTO_INCREMENT, `name` VARCHAR(255), `numcode` VARCHAR(255), `phonecode` VARCHAR(255), `iso3` VARCHAR(255), PRIMARY KEY (`id`) );

在index.php中添加这些代码

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
    $(document).ready(function(){
        $(".addmore").on('click', function () {
            var count = $('table tr').length;
            var data = "<tr class='case'><td><span id='snum" + count + "'>" + count + ".</span></td>";
            data += "<td><input class='form-control' type='text' id='c1' name='c1[]'/></td> <td><input class='form-control' type='text' id='c2' name='c2[]'/></td><td><input class='form-control' type='text' id='c3' name='c3[]'/></td><td><input class='form-control' type='text' id='c4' name='c4[]'/></td></tr>";
            $('#form_table').append(data);
            i++;
        });
        $(".delete").on('click', function () {
            $('tr.case:last').remove();
        });
        //insert into database
        $('.insert').on('click', function(){
            $.ajax({
                url: 'ajax.php',
                method: 'post',
                data: $('form#students').serialize(),
                success: function(data){
                    $('#record_list').html(data);
                }
            });
        });
    });
</script>
<form id='students' method='post' name='students' action='index.php'>
    <div class="table-responsive">
        <table id="form_table" class="table table-bordered">
            <tr>
                <th>S. No</th>
                <th>Country Name</th>
                <th>Country Number</th>
                <th>Country Phone code</th>
                <th>Country code</th>
            </tr>
            <tr class='case'>
                <td><span id='snum'>1.</span></td>
                <td><input class="form-control" type='text' id='c1' name='c1[]'/></td>
                <td><input class="form-control" type='text' id='c2' name='c2[]'/></td>
                <td><input class="form-control" type='text' id='c3' name='c3[]'/></td>
                <td><input class="form-control" type='text' id='c4' name='c4[]'/></td>
            </tr>
        </table>
        <input type="hidden" name="is_submit" value="yes"/>
        <button type="button" class='btn btn-danger delete'>- Delete</button>
        <button type="button" class='btn btn-primary insert'>- Insert</button>
        <button type="button" class='btn btn-success addmore'>+ Add More</button>
    </div>
</form>

并将这些代码添加到

ajax.php

    <?php
    define('DB_HOST', 'localhost');
    define('DB_NAME', 'phpstorm');
    define('DB_USERNAME','root');
    define('DB_PASSWORD','');


$con = mysqli_connect(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);
if( mysqli_connect_error()) echo "Failed to connect to MySQL: " . mysqli_connect_error();

<?php
require_once 'config.php';
/*Insert values into database*/
if($_POST['is_submit'] == 'yes'){
$count = count($_POST['c1']);
$query_values = array();
for($i=0; $i<$count; $i++){
$c1 = mysql_real_escape_string($_POST['c1'][$i]);
$c2 = mysql_real_escape_string($_POST['c2'][$i]);
$c3 = mysql_real_escape_string($_POST['c3'][$i]);
$c4 = mysql_real_escape_string($_POST['c4'][$i]);

$query_values[] = " ('$c1','$c2','$c3','$c4') ";
}
$values = implode(',', $query_values);
$sql = "INSERT INTO country_table (name, numcode, phonecode, iso3 ) VALUES $values";
mysqli_query( $con, $sql );
}

---

尝试在f.php中使用print\r（$\u POST）。尝试过但仍然得到一个数组：数组（[hours1]=>array（[0]=>12）[hours2]=>array（[0]=>15）[durationh]=>array（[0]=>3）[hrscode]=>array（[0]=>6）[备注]=>此处的一些文本）并且没有得到第二行或第三行请拆分html代码，您正在附加到包装器的。读起来很恐怖。这是jquery的最大特性之一
$（“”）
创建一个
div
-元素（适用于所有元素），并使用
.attr（“属性”、“值”）
可以添加属性。请使用这些功能，这样我们可以更好地帮助您。您的解决方案非常不安全。您应该使用准备好的语句来防止sql注入。$count=count（$\u POST['hours1']）；echo$count；这给了我1，而我从上一页发布了两个小时。我编辑了我的答案并添加了用于创建数据库和表格的数据库查询。我的问题是我添加了新行（与上面的表格相同），但我无法获取这些数据。请看我的jquery部分，它在第一行1下添加了相同的hours1[]
wrapper
已经是jquery元素，所以用
wrapper
替换
$（wrapper）
。2.重构时，我会查看您的追加html代码（
$（包装器）。追加（/*html代码*/）
）。只要格式不好，我就看不懂。请看我上面的评论，了解详细的描述。