-1

このjQueryのサンプルコード( source )を使用しようとしています:

<script type="text/javascript">
        //change event on delegateno field to prompt new input
        $('#delegateno').change(function() {
        //dynamically create new input and insert after delegate_tel_1
           $("#delegate-tel-1").append("<input type='text' name='delegate-name-2' id='delegate_name_2' />");
});</script>

番号セレクターを変更するユーザーに基づいて、追加のフォーム フィールドを予約フォームに追加するには:

<input type="number" id="delegateno" value="1">
<input type="text" class="text" name="delegate_name_1" id="delegate-name-1" placeholder="Delegate Name" />
<input type="text" class="text" name="delegate_email_1" id="delegate-email-1" placeholder="Delegate Email" />
<input type="text" class="text" name="delegate_tel_1" id="delegate-tel-1" placeholder="Delegate Telephone"/>

(明らかに、このフォームはフォームタグなどで適切に囲まれています)

この時点で、スクリプトは選択した数値に基づいて新しい入力を追加しないことに気付きました。現在、基本的なフォームを機能させようとしていますが、機能しません。番号を変更しても何も起こりません。数値入力をテキスト入力にして変更しようとしましたが、サイコロはありません。私は何を間違っていますか？

編集: ID タグのエラーが指摘され、スクリプトの ID が入力フィールドの ID と一致するように変更されました。また、.append ではなく .after に変更しました - まだサイコロはありません。私は今持っています：

<script type="text/javascript">
  //change event on delegateno field to prompt new input
  $('#delegateno').change(function() {
  //dynamically create new input and insert after delegate_tel_1
  $("#delegate-tel-1").after("<input type='text' name='delegate-name-2' id='delegate_name_2' />");
        });
</script>
4

6 に答える 6

1

おそらくこれがあなたが達成しようとしていることです。ここにhtmlコードがあります

<form>
    <input id="delegateno" type="text" value="0" />
    <div class="input-container"></div>
</form>

およびJSコード

$('#delegateno').change(function () {

    var count = parseInt($(this).val());
    var container = $('.input-container');
    container.empty();
    for (var i = 0; i < count; i++) {
        var inputEl = $('<input type="text" class="text" name="delegate_name_' + i + '" id="delegate-name-' + i + '" placeholder="Delegate Name" />')
        inputEl.appendTo(container);
    }
})

ここにjsfiddleがありますhttp://jsfiddle.net/YMVeb/2/

于 2013-10-24T12:22:41.750 に答える
0

エラーはすでにdelegate_tel_1セレクターに入力フィールドがあります。追加すると、古いものを上書きしますこれを試してください

$('#delegateno').keyup(function(){
       $("#DiffSelector").append("<input type='text' name='delegate-name-2' id='delegate_name_2' />");
});
于 2013-10-24T12:16:31.810 に答える
0

あなたの入力 ID はdelegate-tel-1ですが、delegate_tel_1

次のようにする必要があります。

$("#delegate-tel-1").append("<input type='text' name='delegate-name-2' id='delegate_name_2' />");
于 2013-10-24T12:10:43.550 に答える