javascript - ドロップダウンメニューから動的フォームを新規作成する方法[タグを選択]

Question

できるだけ具体的にしようと思います。ユーザーが5つのオプションを選択できるドロップダウンメニュー[タグの選択]があります。つまり、1から5までの数字です。選択したオプションに応じて、選択したオプションと同じ数の入力タグを持つ新しいフォームを表示したい

したがって、ユーザーがドロップダウン メニューから 3 を選択すると、下部にサブ テーブルが表示され、3 つの入力タグが表示されます。コードは次のとおりです。

<select id="formName9" name="blockUnits">
 <option selected="selected" 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>

Answer 1

ジェームズ・ドネリーの答えを支持します。純粋な Java スクリプトにしたい場合は、この代替手段を使用できます。

HTML

 <select id="formName9" name="blockUnits" onchange="addInput()">
     <option selected="selected" 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>
    <div id="newAdd"> </div>.
    </form>

ジャバスクリプト

function addElement() {
    var element = document.createElement("input"); //creating input
    element.setAttribute("value", "");//setting its value
    element.setAttribute("name", "newInput");//naming the input
    var foo = document.getElementById("newAdd");
    foo.appendChild(element);//appendign the value into the parant div
}
function addInput(){
    document.getElementById("newAdd").innerHTML="";//clearing the div
     var noInp=parseInt(document.getElementById("formName9").value);
        while(noInp>0)
        {
        addElement();
            noInp--;
        }           
    }

ここにJSFIDDLEがあります

Answer 2

on changeイベントリスナーを利用します：

$('select#formName9').on('change', function() {
    /* Remove the existing input container, if it exists. */
    $('form#container').remove();

    /* Get the selected value and create the new container. */
    var val = $(this).val()
        $container = $('<form id="container"></form>');

    /* Loop through creating input elements based on value. */
    for(i=0;i<val;i++)
    {
        /* Create the new input element. */
        var $input = $('<input type="text"/>');

        /* Append this input element to the container. */
        $input.appendTo($container);
    }

    /* Add container to the page. */
    $container.insertAfter($(this));
})

JSFiddle の例。

selected次に、これを拡張して、最初のオプションに基づいてデフォルトの入力を追加できます。

拡張された JSFiddle。

Answer 3

Here's a sort of dynamic example using jQuery and CSS. I've provided a working jsFiddle.

This is the basic idea, you can work off of this and add more inputs if needed.

HTML:

<select id="formName9" name="blockUnits">
    <option selected="selected" 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>
<div id="form1" class="hiddenForm form">Form 1</div>
<div id="form2" class="hiddenForm form">Form 2</div>
<div id="form3" class="hiddenForm form">Form 3</div>
<div id="form4" class="hiddenForm form">Form 4</div>
<div id="form5" class="hiddenForm form">Form 5</div>

jQuery:

$("#form1").show()
$("#formName9").change(function () {
    var form = "#form" + $(this).val();
    $(form).siblings(".hiddenForm").hide()
    $(form).show();
});

CSS:

.form {
    padding: 10px;
    border: 1px dotted #000;
    margin: 5px;
}
.hiddenForm {
    display: none;
}

Answer 4

私は試して働きました。それを試してみてください：

        $(document).ready(function() {
            $('#formName9').change(function() {
                var number = parseInt($('#formName9').val());
                if(number == 3) {
                    alert('3 HERE');
                }
            });
        });

Answer 5

$('select#formName9').on('change', function() {
var ddVal=$(this).val();
for(i=0;i<ddVal.length;i++)
{
$("#FORMPOSITION").append("<input type='text' name='ddG"+i+"' id='ddVL"+i+"'>");
}
});

実行する前に引用符を検討してください。

Answer 6

Ajax呼び出しを使用して、応答を DOM に追加するか、JS を使用して直接 DOM を追加できます。

直接 DOM の場合、次のように考えます (jQuery を使用):

$('#formName9').on('change', function() {
   var selected = $(this).val();
   $('#aDomElement').empty();
   for (var i=1; i<=selected; i++) {
       $('#aDomElement').append(
           $('<div id="'+i+'">').html(
                   $('<input>').attr('name', 'input'+i).attr('type', 'text')
           )
        );
   }
});

は、既存のHTMLaDomElement要素の ID です。