使用php将动态表单输入插入mysql数据库

index.php

    <div class="row">
        <div class="form-group col-md-12 fieldGroup">
             <div class="input-group">
                   <input type="text" name="winner_name[]" class="form-control" placeholder="Enter Winner Name" required />
                    <input type="text" name="winner_card[]" class="form-control" placeholder="Enter Winner Card No." required />
                    <input type="text" name="winner_prize[]" class="form-control" placeholder="Enter Winner Prize" required />
                    <div class="input-group-addon"> 
                        <a href="javascript:void(0)" class="btn btn-danger">*</a>
                     </div>
                            </div>
                        </div>
                        <input type="hidden" name="addWinner" />
                        <a href="javascript:void(0)" class="col-2 offset-1 btn btn-warning addMore">+</a>
                        <button type="submit" class="col-7 offset-1 btn btn-lg btn-warning" id="acwB">Add Winners </button>
                    </div>
                <br/>
                <br/>
                </form>

                    <div class="fieldGroupCopy d-none">
                        <div class="input-group">
                            <input type="text" name="winner_name[]" class="form-control" placeholder="Enter Winner Name" required/>
                            <input type="text" name="winner_card[]" class="form-control" placeholder="Enter Winner Card No." required/>
                            <input type="text" name="winner_prize[]" class="form-control" placeholder="Enter Winner Prize" required/>
                            <div class="input-group-addon"> 
                                <a href="javascript:void(0)" class="btn btn-danger remove">-</a>
                            </div>
                        </div>
                    </div>
<script>
        var max_fields = 20;
    $(".addMore").click(function(){
        if($('body').find('.fieldGroup').length < max_fields){
            var fieldHTML = '<div class="form-group col-md-12 fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
            $('body').find('.fieldGroup:last').after(fieldHTML);
        }else{
            alert('Maximum '+max_fields+' inputs are allowed.');
        }
    });

    $("body").on("click",".remove",function(){ 
        $(this).parents(".fieldGroup").remove();
    });
$("#wnrForm").on('submit',(function(e) {
          e.preventDefault();
          $.ajax({
            url: "w_insert.php",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success:function(data) {
                if(data == 1) {
                    $('#wnrForm').trigger("reset");
                    $('.remove').parents('.fieldGroup').remove();
                alert('inserted');
            } else {
                alert('Error');
            }

            }          
          });
          }));
</script>

if(isset($_POST['addWinner'])) {
    $w_name= $_POST['winner_name'];
    $w_card = $_POST['winner_card'];
    $w_prize = $_POST['winner_prize'];

    for ($i = 0; $i<count($w_name); $i++) {
        if($w_name[i]!="") {
            $sql = "INSERT INTO winners (w_name, w_card , w_prize) VALUES ('$w_name[$i]', '$w_card[$i]', '$w_prize[$i]')";
            $stmt = $connect->prepare($sql);
            $stmt->execute();
        }
    }
}

添加赢家




var max_字段=20；
$（“.addMore”）。单击（函数（）{
if（$（'body'）.find（'fieldGroup'）.length

w_insert.php

    <div class="row">
        <div class="form-group col-md-12 fieldGroup">
             <div class="input-group">
                   <input type="text" name="winner_name[]" class="form-control" placeholder="Enter Winner Name" required />
                    <input type="text" name="winner_card[]" class="form-control" placeholder="Enter Winner Card No." required />
                    <input type="text" name="winner_prize[]" class="form-control" placeholder="Enter Winner Prize" required />
                    <div class="input-group-addon"> 
                        <a href="javascript:void(0)" class="btn btn-danger">*</a>
                     </div>
                            </div>
                        </div>
                        <input type="hidden" name="addWinner" />
                        <a href="javascript:void(0)" class="col-2 offset-1 btn btn-warning addMore">+</a>
                        <button type="submit" class="col-7 offset-1 btn btn-lg btn-warning" id="acwB">Add Winners </button>
                    </div>
                <br/>
                <br/>
                </form>

                    <div class="fieldGroupCopy d-none">
                        <div class="input-group">
                            <input type="text" name="winner_name[]" class="form-control" placeholder="Enter Winner Name" required/>
                            <input type="text" name="winner_card[]" class="form-control" placeholder="Enter Winner Card No." required/>
                            <input type="text" name="winner_prize[]" class="form-control" placeholder="Enter Winner Prize" required/>
                            <div class="input-group-addon"> 
                                <a href="javascript:void(0)" class="btn btn-danger remove">-</a>
                            </div>
                        </div>
                    </div>
<script>
        var max_fields = 20;
    $(".addMore").click(function(){
        if($('body').find('.fieldGroup').length < max_fields){
            var fieldHTML = '<div class="form-group col-md-12 fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
            $('body').find('.fieldGroup:last').after(fieldHTML);
        }else{
            alert('Maximum '+max_fields+' inputs are allowed.');
        }
    });

    $("body").on("click",".remove",function(){ 
        $(this).parents(".fieldGroup").remove();
    });
$("#wnrForm").on('submit',(function(e) {
          e.preventDefault();
          $.ajax({
            url: "w_insert.php",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success:function(data) {
                if(data == 1) {
                    $('#wnrForm').trigger("reset");
                    $('.remove').parents('.fieldGroup').remove();
                alert('inserted');
            } else {
                alert('Error');
            }

            }          
          });
          }));
</script>

if(isset($_POST['addWinner'])) {
    $w_name= $_POST['winner_name'];
    $w_card = $_POST['winner_card'];
    $w_prize = $_POST['winner_prize'];

    for ($i = 0; $i<count($w_name); $i++) {
        if($w_name[i]!="") {
            $sql = "INSERT INTO winners (w_name, w_card , w_prize) VALUES ('$w_name[$i]', '$w_card[$i]', '$w_prize[$i]')";
            $stmt = $connect->prepare($sql);
            $stmt->execute();
        }
    }
}

if（isset（$\u POST['addWinner']））{
$w_name=$_POST['winner_name']；
$w_card=$_POST['winner_card']；
$w_prize=$_POST['winner_prize']；
对于（$i=0；$iprepare（$sql）；
$stmt->execute（）；
}
}
}

表格赢家

|id | w| U姓名| w|U卡| w|U奖|

---

我想将HTML表单中的动态字段数据插入MySQL表，我可以在HTML表单中添加多个字段，也可以发送到w_insert.php文件，但我得到了3个不同的数组，我尝试了循环，但在我的情况下不起作用。我想在MySQL表中分别插入w_name、w_card、w_prize正在使用FormData。要使用它，您必须定义表单标记，然后您将使用FormData获取所有输入值。因此，您应该创建代码。 我已经对您的代码进行了更正，可以很好地工作，并将值传递给w_insert.php viw ajax

添加赢家




var max_字段=20；
$（“.addMore”）。单击（函数（）{
if（$（'body'）.find（'fieldGroup'）.length

您的代码中的$wn是什么？$wn是$w_name我在那里输入了错别字，现在我已经更正了。感谢您指出应该是$w_name[$i]表单不完整，您只包含了结束标记和外部表单中的第二组输入。请尽快更正，因为您的代码容易受到SQL注入的攻击。您应该使用准备好的语句。