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

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

javascript php jquery html ajax

Javascript 使用Jquery Ajax在PHP中动态添加/删除多个输入字段,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,这是我表单的HTML <div class="crcform"> <h1>Internship Details</h1> <form name="internship_details" id="intership_details"> <table class="table table-bordered" id="dynamic_field">

这是我表单的HTML

<div class="crcform">

          <h1>Internship Details</h1>

          <form name="internship_details" id="intership_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" />
          <!--div class="top-row">
          <div class="field-wrap">
          <button class="button button-block" name="submit" id="submit"/>NEXT</button> 
          </div-->

          </form>
          </div>


实习详情
公司*
计划*
持续时间*
关键学习*
添加更多

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

<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();
    });

    $('#sumbit').clic(function(){
        $.ajax({
            url:"internship_details.php",
            method:"POST",
            data:$('#internship_details').serialize(),
            success:function(data)
            {
                alert(data);
                $('#internship_details')[0].reset();
            }
        });
    });
});
</script>


$（文档）.ready（函数（）{
var i=1；
$（'#添加'）。单击（函数（）{
i++；
$（“#动态_字段”）.append（'Company*Project*Duration*Key Learning*X'）；
});
$（文档）.on（'click'，'btn_remove'，函数（）{
var按钮_id=$（this.attr（“id”）；
$（“#行”+按钮_id+”）.remove（）；
});
$（'#sumbit'）.clic（函数（）{
$.ajax({
url:“实习_details.php”，
方法：“张贴”，
数据：$（“#实习#U详细信息”）。序列化（），
成功：功能（数据）
{
警报（数据）；
$（“#实习#详细信息”）[0]。重置（）；
}
});
});
});

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

<?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";
}
?>

我无法在数据库中存储该值。谁能告诉我哪里出了问题？

您还可以告诉我它的insert查询是什么，因为我要在一行中添加多个列。因此，请帮我解决这个问题。您在

$（'#sumbit'）中错误地调用了单击。clic（function（）{/code>和value
在中插入您在$（'#sumbit'）中错误地调用了单击。clic（function（））{
和值
在INSERT-INTO-VALEUS中
代码中有很多溢出错误
以下是工作版本：假设所有文件都位于同一目录中
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>


实习详情
公司*
计划*
持续时间*
关键学习*
添加更多
$（文档）.ready（函数（）{
var i=1；
$（'#添加'）。单击（函数（）{
i++；
$（“#动态_字段”）.append（'Company*Project*Duration*Key Learning*X'）；
});
$（文档）.on（'click'，'btn_remove'，函数（）{
var按钮_id=$（this.attr（“id”）；
$（“#行”+按钮_id+”）.remove（）；
});
$（“#提交”）。单击（函数（）{
$.ajax({
async:true，
url:“实习_details.php”，
方法：“张贴”，
数据：$（“#实习#U详细信息”）。序列化（），
成功：功能（rt）
{
警报（rt）；
$（“#实习#详细信息”）[0]。重置（）；
}
});
});
});

php代码：
connection.php
<?php
$connect = mysqli_connect('localhost', 'root', '', 'crc');

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

代码中有很多溢出错误
以下是工作版本：假设所有文件都位于同一目录中
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>


实习详情
公司*
计划*
持续时间*
关键学习*
添加更多
$（文档）.ready（函数（）{
var i=1；
$（'#添加'）。单击（函数（）{
i++；
$（“#动态_字段”）.append（'Company*Project*Duration*Key Learning*X'）；
});
$（文档）.on（'click'，'btn_remove'，函数（）{
var按钮_id=$（this.attr（“id”）；
$（“#行”+按钮_id+”）.remove（）；
});
$（“#提交”）。单击（函数（）{
$.ajax({
async:true，
url:“实习_details.php”，
方法：“张贴”，
数据：$（“#实习#U详细信息”）。序列化（），
成功：功能（rt）
{
警报（rt）；
$（“#实习#详细信息”）[0]。重置（）；
}