ユーザーの選択に基づいて入力フィールドを表示する（選択）

Question

私は自分のページで選択して、ユーザーの選択に基づいて、入力フィールドの量を彼に示し、PHPスクリプトで何かをしたい。

それは次のようになります。

https://i.imgur.com/RlYySko.png

、ユーザーが3を選択した場合、その後3つの入力フィールドには、ページをリロードせずに2その後、2の場合などに表示されます。何をここに使うべきなの？

Answer 1

あなたがしたいことは、6つの入力フィールドすべてを作成することです。その後、それらをすべて標準として非表示にし、スタイルを取得するにはdocument.getElementById(id).styleを実行します。次に、選択が変更されたときに関数を呼び出し、選択した値を使用して隠れた入力を調べます。

@Arthur Cantarelaが述べたように、これはJSの悪い習慣です。 また、divに配置し、divのinnerHTMLを必要な数だけ変更することもできます。

Answer 2

anglejsでng-repeatを使用し、number選択を繰り返し式にバインドすることができます。

Answer 3

あなたは、xが必要な入力の選択数であるので、

for (var i=0;i<x;i++){ 
    var inputText = document.createElement("input"); //input element, text 
    inputText.setAttribute('type',"text"); 
    inputText.setAttribute('name',"mark" + i); 
    f.append(inputText); 
} 

Answer 4

のようなものがここであなたができる、スニペットのX回のループによって動的に入力要素を作成することができ、あなたはすでに既存のフォームFを持っていると仮定すると、実行して確認してください。また、入力数が減少した場合に入力値を保持します。

var inputNumber = document.getElementById('input-number'); 
 
inputNumber.addEventListener('change', changeNumberOfInputs); 
 

 
function changeNumberOfInputs(event) { 
 
    var desiredInputs = parseInt(event.target.value); 
 
    var inputsForm = document.getElementById('inputs-form'); 
 
    var actualInputs = inputsForm.getElementsByTagName('input').length; 
 
    if(actualInputs < desiredInputs) { 
 
    for(var i=0; i<(desiredInputs - actualInputs); i++) { 
 
     inputsForm.appendChild(document.createElement('input')); 
 
    } 
 
    } 
 
    else if(actualInputs > desiredInputs) { 
 
    for(var i=0; i<(actualInputs - desiredInputs); i++) { 
 
     var lastInput = inputsForm.getElementsByTagName('input'); 
 
     lastInput = lastInput[lastInput.length - 1]; 
 
     inputsForm.removeChild(lastInput); 
 
    } 
 
    } 
 
}

<select id="input-number"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    <option value="5">5</option> 
 
</select> 
 

 
<form id="inputs-form"> 
 
    <input /> 
 
</form>