여러 텍스트 필드를 추가하고 모두 한 문자열로 묶는 HTML/PHP

Question

사용자가 특정 정보를 입력 할 수있는 양식을 만듭니다. 기본 상태는 다음과 같습니다.

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

이제 ADD 버튼을 클릭하면 두 개의 새 필드가 같은 이름으로 추가되어 상태가 다음과 같이됩니다.

<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

추가 요소를 추가 할 때 이름에 인덱스를 설정할 수 있다면이 방법이 약간 더 좋을 것입니다. 당신이 POST를받을 때

<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> 

그런 다음, 당신은 단지 데이터를 통해 루프는

$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);