HTML/PHP添加多個文本字段並將它們放在一起成爲一個字符串

Question

我正在創建一個表單，用戶可以輸入某些信息。 默認狀態如下所示;

<div class="options"> 
<input type="text" name="option[]" /> 
<input type="text" name="content[]" /> 
</div> 

現在，通過點擊按鈕添加，我會添加具有相同名稱的兩個新的領域，因此狀態如下;

<div class="options"> 
    <input type="text" name="option[]" /> 
    <input type="text" name="content[]" /> 
    <input type="text" name="option[]" /> 
    <input type="text" name="content[]" /> 
    </div> 

然後，我希望PHP最終創建一個字符串，如下所示;

valueOfFirstOption:valueOfFirstContent,valueOfSecondOption:valueOfSecondContent 

依此類推。理論上我應該可以添加無限量的輸入字段。

這可能是我想要實現的嗎？還是應該爲輸入字段添加唯一名稱？

任何提示或提示我應該怎麼去？或者有人獲得了我的教程/示例代碼？

在此先感謝。

Answer 1

如果您可以在添加額外元素時在名稱中設置索引，這將會更好一些。

<div class="options"> 
    <input type="text" name="data[0][option]" /> 
    <input type="text" name="data[0][content]" /> 
    <input type="text" name="data[1][option]" /> 
    <input type="text" name="data[1][content]" /> 
</div> 
<a href="#" onclick="addSet(); return false;">Add</a> 
<script> 
    var addSet = function() { 
     var container = document.getElementsByClassName('options')[0]; 
     var numInputs = container.getElementsByTagName('input'); 
     var numSets = numInputs/2; 
     var nextIndex = numSets; 

     var newOption = document.createElement('input'); 
     newOption.name = 'data[' + nextIndex + '][option]'; 
     container.appendChild(newOption); 

     var newContent = document.createElement('input'); 
     newContent.name = 'data[' + nextIndex + '][content]'; 
     container.appendChild(newContent); 
    } 
</script> 

然後，當你收到POST，你可以通過數據環和處理小芯片

$pieces = array(); 

foreach ($_POST['data'] as $set) 
    $pieces = $set['option'] . ':' . $set['content']; 
} 

// or 
for ($i = 0; $i < count($_POST['data']); $i++) { 
    $pieces[] = $_POST['data'][$i]['option'] . ':' . $_POST['data'][$i]['content']; 
} 

// then 
$compiledString = implode(",", $pieces);