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

标签 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">
                <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>

这是在数据库中存储数据的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";
}
?>

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

最佳答案

代码中有很多溢出错误

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

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代码: 连接.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";
}
?>

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

关于javascript - 使用 Jquery Ajax 在 PHP 中动态添加/删除多个输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39068334/

相关文章:

javascript - 自动加载命名空间 i18next

javascript - 如何在更改 header js 类和 CSS 时更改 php header 中的 Logo

jquery - 将自动播放添加到youtube视频

javascript - 循环内循环索引

javascript - 第二次按下后 Jquery Keypress 被识别

php - 图片从node js服务器上传到PHP服务器

php - 无法使用 bindValue() 将值添加到 pdo 对象

javascript - jQuery - 检测点击某个像素区域,然后执行函数

jquery - 我如何使用 jquery 在窗口调整大小时缩放 Raphael js 元素

javascript - React Hooks 的 Keydown/up 事件无法正常工作