使用Jquery Ajax在PHP中动态添加/删除多个输入字段

时间:2016-08-21 19:56:57

标签: javascript php jquery html ajax

这是我表单的HTML

<?php

include 'connection.php';

$number = count($_POST["company"]);
if ($number > 0){
    for($i = 0; $i < $number; $i++){
        if(trim($_POST["company"][$i]) != ''){
        $sql = "INSERT INTO internship VALEUS('".mysqli_real_escape_string($connect, $_POST["company"][$i]."')";
        mysqli_query($connect, $sql);
        }
    }
    echo 'Data Inserted';
}
else{
    echo "Enter Name";
}
?>

这是动态添加/删除表单的javascript

    Array
(
    [0] => page
    [1] => section
    [2] => side
    [3] => Array
        (
            [0] => Array
                (
                    [0] => url1
                    [1] => url2
                    [2] => url3
                )

            [1] => Array
                (
                    [0] => url4
                    [1] => url5
                    [2] => url6
                )

            [2] => Array
                (
                    [0] => url7
                    [1] => url8
                    [2] => url9
                )

        )

)

这是用于在数据库中存储数据的php代码

foreach($arr as $key => $value){
        echo $key." : ".$value."\n";

foreach($value as $key => $value){
    echo "   ". $key." : ".$value."\n";

    foreach($value as $key => $value){
        echo "     ". $key." : ".$value."\n";
    }
}
}

我无法将值存储在数据库中。谁能告诉我哪里出错了? 你能告诉我它的插入查询是什么,因为我连续添加了多个列。所以帮助我这个

2 个答案:

答案 0 :(得分:2)

您在代码中有很多溢出错误

这是工作版本:假设所有文件都在同一目录

html和javascript:

<div class="crcform">
        <h1>Internship Details</h1>
        <form id="internship_details">
            <table class="table table-bordered" id="dynamic_field">
                <tr>
                    <td>
                        <!--div class="top-row"-->
                        <div class="field-wrap">
                            <label>
                                Company<span class="req">*</span>
                            </label>
                            <input type="text" required autocomplete="off" name="company[]"/>
                        </div>

                        <div class="field-wrap">
                            <label>
                                Project<span class="req">*</span>
                            </label>
                            <input type="text"required autocomplete="off" name="project[]"/>
                        </div>

                        <div class="field-wrap">
                            <label>
                                Duration<span class="req">*</span>
                            </label>
                            <input type="text"required autocomplete="off" name="duration[]"/>
                        </div>

                        <div class="field-wrap">
                            <label>
                                Key Learning<span class="req">*</span>
                            </label>
                            <input type="text"required autocomplete="off" name="key_learning[]"/>
                        </div>
                    </td>
                    <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
                </tr>
            </table>
            <input type="button" name="submit" id="submit"  class="btn btn-info" value="Submit" />
        </form>
    </div>
    <script>
        $(document).ready(function(){
            var i = 1;
            $('#add').click(function(){
                i++;
                $('#dynamic_field').append('<tr id="row'+i+'"><td><div class="field-wrap"><label>Company<span class="req">*</span></label><input type="text" required autocomplete="off" name="company[]"/></div><div class="field-wrap"><label>Project<span class="req">*</span></label><input type="text"required autocomplete="off" name="project[]"/></div><div class="field-wrap"><label>Duration<span class="req">*</span></label><input type="text"required autocomplete="off" name="duration[]"/></div><div class="field-wrap"><label>Key Learning<span class="req">*</span></label><input type="text"required autocomplete="off" name="key_learning[]"/></div></td></td><td><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({
                    async: true,
                    url: "internship_details.php",
                    method: "POST",
                    data: $('#internship_details').serialize(),
                    success:function(rt)
                    {
                        alert(rt);
                        $('#internship_details')[0].reset();
                    }
                });
            });
        });
    </script>

php代码: connection.php

<?php
$connect = mysqli_connect('localhost', 'root', '', 'crc');

if (mysqli_connect_errno())
{
    die("Failed to connect to MySQL: " . mysqli_connect_error());
}

internship_details.php

<?php
include 'connection.php';

for($i = 0; $i < count($_POST['company']); $i++)
{
    $company = mysqli_real_escape_string($connect, $_POST['company'][$i]);
    $project = mysqli_real_escape_string($connect, $_POST['project'][$i]);
    $duration = mysqli_real_escape_string($connect, $_POST['duration'][$i]);
    $key_learning = mysqli_real_escape_string($connect, $_POST['key_learning'][$i]);

    if (empty(trim($company))) continue;

    $sql = "INSERT INTO internship(company, project, duration, key_learning)
            VALUES('$company', '$project', '$duration', '$key_learning')";
    mysqli_query($connect, $sql);
}

if(mysqli_error($connect))
{
    echo "Data base error occured";
}
else
{
    echo $i . " rows added";
}
?>

请注意,可能需要根据您的要求进行额外的数据清理和验证。

答案 1 :(得分:0)

$('#sumbit').clic(function(){中的VALUESINSERT INTO internship VALEUS中的private static final String COLUMN_K_ID = "kid";误解了{。}}。