克隆具有數組名稱的輸入字段僅獲得 php 中的第一個值？

Question

我使用 jquery 克隆我的輸入字段。 並首先使用 var_dump 獲取 PHP 中的值

例子

<form action="save.php" method="POST">
<div id="div-container">
 <div class="div-clone">
   <input name="name[]">
   <input name="bday[]">
   <input name="address[]">
   <input name="gender[]">
 </div>
</div>
<input type="submit" value="SUBMIT">
</form>

現在什么時候我正在使用它克隆它

$('#div-container').append($('#div-clone').get(0).outerHTML);

PHP 代碼

if(isset($_POST['SUBMIT'])
{
 var_dump($_POST);
}

這是否導致數組鍵值也與第一個相同？ 因為我只得到一個值，而且只有第一個值。 有沒有辦法解決這個問題？

謝謝

編輯我已經從我的表單中獲取數據我唯一的問題是我克隆的輸入數組。 它只獲得第一個值。

再次編輯當我嘗試添加具有相同名稱的數組輸入而不完美克隆其作品時。 有什么解決方案嗎？ 謝謝

Answer 1

首先從要克隆的內容中刪除id 。 如果不這樣做，您最終會得到無效的重復項，並可能導致 JS 和 UI 出現問題。 更好的方法是使用類。

此外，如果您想復制元素，只需使用clone() 。 嘗試這個：

 $('button').on('click', () => $('.div-clone:first').clone().appendTo('#div-container'));

 input { width: 100px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button>Clone</button> <div class="div-clone"> <input name="name[]"> <input name="bday[]"> <input name="address[]"> <input name="gender[]"> </div> <div id="div-container"></div>

Answer 2

您的代碼中的 Output 是

array(4) {
  ["name"]=>
  array(2) {
    [0]=>
    string(1) "1"
    [1]=>
    string(1) "2"
  }
  ["bday"]=>
  array(2) {
    [0]=>
    string(1) "1"
    [1]=>
    string(1) "2"
  }
  ["address"]=>
  array(2) {
    [0]=>
    string(1) "1"
    [1]=>
    string(1) "2"
  }
  ["gender"]=>
  array(2) {
    [0]=>
    string(1) "1"
    [1]=>
    string(1) "2"
  }
}

所以是正確的。 我克隆了一次，所以我得到了兩個“名稱”的 arrays，兩個“bday”的 arrays 等。我想你想要另一種格式，我認為這有點棘手。 嘗試這個：

<button id="clone">Clone</button>

    <form method="POST">
        <div id="div-container">
            <div class="div-clone">
                <input data-field="name" name="data[0][name]">
                <input data-field="bday" name="data[0][bday]">
                <input data-field="address" name="data[0][address]">
                <input data-field="gender" name="data[0][gender]">
            </div>
        </div>
        <button type="submit">Submit</button>
    </form>

    <pre>
    <?php
    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
        var_dump($_POST);
    }
    ?>
    </pre>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        var i = 0;
        $('button#clone').on('click', () => {
            const clone = $('.div-clone:first').clone();
            i++;
            clone.find('input').each(function() {
                const fieldname = $(this).attr('data-field');
                $(this).attr('name', 'data[' + i + '][' + fieldname + ']');
            });
            clone.appendTo($('#div-container'));
        });
    </script>

這將為您提供一個克隆的以下 output。

array(1) {
  ["data"]=>
  array(2) {
    [0]=>
    array(4) {
      ["name"]=>
      string(1) "1"
      ["bday"]=>
      string(1) "1"
      ["address"]=>
      string(1) "1"
      ["gender"]=>
      string(1) "1"
    }
    [1]=>
    array(4) {
      ["name"]=>
      string(1) "2"
      ["bday"]=>
      string(1) "2"
      ["address"]=>
      string(1) "2"
      ["gender"]=>
      string(1) "2"
    }
  }
}

字段名稱正是 PHP-Array 結構。 使用 name[] 只是一個向上計數的數組。 但我認為所有四個字段都應該輸入一個條目。 因此，您必須創建一個條目（命名數據），使其成為一個數組，該數組被計數（按“i”），然后添加字段名稱（名稱、生日等）

Answer 3

折騰了好多次，終於解決了。

在我的框架上似乎有一個 UI 錯誤，使我的表單在克隆后在 near div 元素上結束。 謝謝你所有的回答。 你所有的答案都是正確的，所以我會支持他們。 謝謝你。