如何通過將數據保存在附加文本框中來解決問題

Question

請幫幫我，我使用isset來檢查索引是否已定義，但是與其保存0的文本框的值而不是保存它，我應該怎么做？ 如果我不檢查是否定義了索引，則當我只填寫一個文本框時，它將引發錯誤，但是如果我填寫全部五個，則可以正常工作。 請看一下y代碼，javascript中的變量用於其inout名稱，計數用於達到5個HTML和PHP時停止添加輸入文本

<form class="form-horizontal" method= "POST">
<div class="control-group">
    <div class="inc">
        <div class="controls">
            <button style="margin-left: 50px" class="btn btn-info" type="submit" id="append" name="append">
            Add Textbox</button>
            <br>
            <br>
        </div>
    </div>
    <input type="submit" class="btn btn-info" name="submit" value="submit"/> 
</div>
<?php
$host = "localhost";
$dbname = "lala";
$user = "root";
$pass = "";
$conn = new PDO("mysql:host=$host; dbname=$dbname", $user, $pass);
if(isset($_POST['submit'])){
    for($i=1; $i<=5; $i++){
        if(isset($_POST["textbox$i"]) && $_POST["textbox$i"] !=""){ 
        $sasa = $_POST["textbox$i"];            
        $sql="INSERT into sasa (sasa) values('$sasa')";

        echo $sql."<br>";

$q=$conn->query($sql);
            }

    }   
}
?>

javascript;

<script type="text/javascript">
                    jQuery(document).ready( function () {
                        var val = 1;
                        var me = 0;
                        var count = 0;
    $("#append").click( function() {
        if(count<5){
        if(me==0){
            val=1;
            me = me + 1;
            count = count +1;
    $(".inc").append("<div class='controls'><input class='form-control' type='text' name='textbox"+ val +"'  placeholder='textbox"+ val +"'><a href='#' class='remove_this btn btn-danger'>remove</a> <br> <br> </div");
    return false;
        }
        else{
            val = val  + 1;
            me = me + 1;
            count = count +1;
             $(".inc").append("<div class='controls'><input class='form-control' type='text' name='textbox"+ val +"'  placeholder='textbox"+ val +"'><a href='#' class='remove_this btn btn-danger'>remove</a> <br> <br> </div");
    return false;

        }
        }
        else{

        }
    });

jQuery(document).on('click', '.remove_this', function() {
    me = me - 1;
    count = count - 1;
    jQuery(this).parent().remove();
    return false;
    });

}）;

Answer 1

您的JS和PHP都是錯誤的。 您需要發布一個數組，而不是命名每個文本框。 換句話說，您的文本框名稱應類似於name='textbox[]' 。 像這樣重做：

JS：

$(document).ready(function () {

    $("#append").click(function (e) {
        e.preventDefault();
        var textboxes = $(".textbox").length;
        if (textboxes < 5) {
            $(".inc").append("<div class='controls'>\
                                  <input class='textbox form-control' type='text' name='textbox[]' >\
                                  <a href='#' class='remove_this btn btn-danger'>remove</a>\
                               </div>");
        }
    });

    $(document).on('click', '.remove_this', function (e) {
        e.preventDefault();
        $(this).parent().remove();
    });
});

PHP：

if (isset($_POST['submit'])) {

    if (!empty($_POST['textbox'])) {

        $host = "localhost";
        $dbname = "lala";
        $user = "root";
        $pass = "";
        $conn = new PDO("mysql:host=$host; dbname=$dbname", $user, $pass);

        $textboxes = $_POST['textbox'];
        foreach ($textboxes as $value) {
            $sql = "INSERT into sasa (sasa) values('$value')";
            echo $sql . "<br>";
            $q = $conn->query($sql);
        }
    }
}

Answer 2

好的，看來您的目標是向PHP發送多維數組。 換句話說，您希望PHP能夠接收以下格式的內容：

array (size=2)
  0 => 
    array (size=2)
      'text' => string 'some text' (length=9)
      'box' => string 'some box' (length=8)
  1 => 
    array (size=2)
      'text' => string 'some text' (length=9)
      'box' => string 'some box' (length=8)

為了實現此目的，您需要創建一個函數來在創建和刪除輸入文本框時為其編制索引，以便最終獲得帶有索引名稱屬性的輸入，如下所示：

<input name="data[0][text]">
<input name="data[0][box]">

<input name="data[1][text]">
<input name="data[1][box]">

話雖如此，這是我要使用的JS ：

   <script>
        $(document).ready(function () {

            function re_index($cont) {
                $cont.find(".textbox_group").each(function (i) {
                    $(this).find('.text').attr("name", "data[" + i + "][text]");
                    $(this).find('.box').attr("name", "data[" + i + "][box]");
                });
            }

            $("#append").click(function (e) {
                e.preventDefault();
                var $cont = $(".inc");
                if ($(".textbox_group").length < 5) {
                    $cont.append("<div class='controls textbox_group'>\
                                      <input class='text form-control' type='text' >\
                                      <input class='box form-control' type='text' >\
                                      <a href='#' class='remove_this btn btn-danger'>remove</a>\
                                   </div>");
                    re_index($cont);
                }
            });

            $(document).on('click', '.remove_this', function (e) {
                e.preventDefault();
                $(this).parent().remove();
                var $cont = $(".inc");
                re_index($cont);
            });
        });
    </script>

然后在PHP中，您可以捕獲數據並使用SQL進行迭代以將其插入：

$data = $_POST['data'];
foreach ($data as $input) {
   var_dump($input['text']);
   var_dump($input['box']);
}