javascript - jQuery で新しいフォーム フィールドを作成する

Question

2 つのテキスト入力で始まるフォームがあります。標準的なシナリオでは、ユーザーが一方のフィールドに数字を入力し、もう一方のフィールドに名前を入力すると、ページが更新されます (リロードされません)。ただし、場合によっては、ユーザーが同じ名前に関連付けられている複数の番号を入力したい場合があります。これを実装する方法は、ユーザーがテキスト ボックスの横にある [別の追加] リンクをクリックすることです。

ユーザーが「別の追加」リンクをクリックすると、テキスト ボックスの値が新しい (動的に作成された) テキスト フィールドに挿入され、ユーザーが数値を入力したテキスト フィールドがデフォルト値にリセットされる必要があります。ユーザーはこの方法で 10 個の数字を入力すると、この操作を行うより効率的な方法について通知するアラートが表示されます。

私はこれがどのように行われるか（それを行うことができるか）jQueryについては無知であり、誰かが助けてくれれば素晴らしいことです.

ここに私が取り組んでいるhtmlがあります：

<div id="searchFields" class="control-group inlineForm">
    <label for="regNr">Regnr</label> <input type="text" id="regNr" class="uprCase" placeholder="Regnr." size="6" maxlength="6">
    <span class="addRegNr"><a href="#">add another</a></div>
    <label for="poNr">PO.nr</label> <input type="text" id="poNr" placeholder="PO.nr." size="12" maxlength="12">
    <input type="button" value="GET INFO" class="last" id="getBaseInf">
</div>

http://jsfiddle.net/RgKV9/

乾杯！

更新を編集

私は Aske G の例が好きで、それにいくつかの変更を加えました。これが私が取り組んでいる新しいコードです。. また、生成されたフィールドを読み取り専用に設定し、バスケットに表示されたときにアニメーション化するにはどうすればよいですか?

Answer 1

クリック ウォッチャーをスパンに追加するだけです。このフィドルを確認してください：http://jsfiddle.net/ranjith19/RgKV9/4/

いくつかの基本的な変更を行いました。カスタム名 ID が必要な場合は、テンプレート ライブラリを使用してから追加する必要があります

<div id="searchFields" class="control-group inlineForm">
    <label for="regNr">Regnr</label> <input type="text" id="regNr" class="uprCase" placeholder="Regnr." size="6"
                                            maxlength="6">

    <label for="poNr">PO.nr</label> <input type="text" id="poNr" placeholder="PO.nr." size="12" maxlength="12">
    <input type="button" value="GET INFO" class="last" id="getBaseInf">

    <p></p>
</div>
<span class="addRegNr" style="display:inline"><a href="#">add another</a></span>&nbsp;&nbsp;&nbsp;
<script type="text/javascript">
    $(document).ready(function () {
        str_to_append = '<label for="regNr">Regnr</label> <input type="text" id="regNr" class="uprCase" placeholder="Regnr." size="6" maxlength="6">\
    <label for="poNr">PO.nr</label> <input type="text" id="poNr" placeholder="PO.nr." size="12" maxlength="12">\
    <input type="button" value="GET INFO" class="last" id="getBaseInf"><p></p>'
        $(".addRegNr").click(function () {
            $("#searchFields").append(str_to_append)
        })
    })

</script>
​

Answer 2

jquery append メソッドを使用して、それを行うことができます。

ここにいくつかの例のリンクを残します:

http://api.jquery.com/append/

Answer 3

このようなものを探しているだけかもしれません。

Answer 4

私はこのようなことをします：

<div id="searchFields" class="control-group inlineForm">
<label for="regNr">Regnr&nbsp;</label><input type="text" id="regNr" class="uprCase" placeholder="Regnr." size="6" maxlength="6"/><br/>
</div>
<span class="addRegNr">add another</span><br/>
<label for="poNr">PO.nr</label> <input type="text" id="poNr" placeholder="PO.nr." size="12" maxlength="12">
<input type="button" value="GET INFO" class="last" id="getBaseInf">

次に、次のような js がいくつかあります。

var $input = $("#searchFields").children();

$(".addRegNr").on("click", function(){
   var $newField = $input.clone();
   // change what you need to do with the field here.
   $(this).siblings("#searchFields").append($newField);
});

ここにもあります：http://jsfiddle.net/tatLw/

Answer 5

jQuery で HTML を追加するには、最終的に.append()、または.before、.appendToなどのバリエーションのいずれかを呼び出すことになります。

これらには未加工の HTML 文字列を指定できますが、HTML テンプレートが用意されていない限り、文字列連結を使用して HTM を構築しないでください。これは壊れやすく、安全ではありません。代わりに、次のようにjQuery()で要素を直接作成します。

jQuery('<input type="text"/>').attr({
    value: '',
    placeholder: '...',
    id: '..'
})
.appendTo( .. )

さらに、これらの新しい要素にもラベルを作成することを忘れないでください (適切な場合)。

このシナリオに関連する別のいくつかのベスト プラクティス:

• (既存のフィールドにさらにフィールドを追加するのではなく) 新しいフォーム要素を動的に表示する場合は、これらを JavaScript で作成しないことをお勧めします。代わりに、ページ出力に最初から存在することを確認してから、 . hide $(document).ready( )で非表示にします。そうすれば、はるかに簡単になります（必要なのは隠し要素への参照だけであり、必要な場合は .show() を呼び出すためです）。そして、そのようにして、javascriptフローが存在し、有効になり、期待どおりに機能することに依存しません。これは、途中で何かが発生した場合（例外のスロー、cdnの問題など）、フォームが完全に存在するバージョンにフォールバックするためです。 .

• これらの「+」または「追加」ボタンのシナリオが多数ある場合は、元のフィールドの.clone()を作成し、それを削除 (値をクリアし、id 属性を削除) して保存します。ローカル変数で。次に、クリック ハンドラーからそれを複製し、必要な場所にドキュメントに配置します。また、追加ボタンを、サーバーが非最終入力として検出する特定の名前/値のペアを持つ送信ボタンにすることで、サーバー側のフォールバックが必要になる場合があります。いっぱいですが、より多くのフィールドがあります。

Answer 6

Charlie Grieferによるこのブログ投稿jQuery – Dynamically Adding Form Elementsに基づくソリューションでは、次のことを試すことができます。

マークアップ:

<div id="searchFields" class="control-group inlineForm">
<form id="myForm">
    <div id="input1" style="margin-bottom:4px;" class="clonedInput">
        <label for="regNr">Regnr</label>: <input type="text" name="regNr" placeholder="Regnr." size="6" maxlength="6" />
        <label for="poNr">PO.nr</label>: <input type="text" id="poNr" placeholder="PO.nr." size="12" maxlength="12">
    </div>

    <div>
        <input type="button" id="btnAdd" value="add another Reg field" />
        <input type="button" id="btnDel" value="remove fields" />
    </div>
    <input type="button" value="GET INFO" class="last" id="getBaseInf">
</form>
</div>​

Javascript :

$('#btnAdd').click(function() {
    var num     = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
    var newNum  = new Number(num + 1); // the numeric ID of the new input field being added

    // create the new element via clone(), and manipulate it's ID using newNum value  
    var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

    // manipulate the name/id values of the input inside the new element
    newElem.children(':first').attr('id', 'regNr' + newNum).attr('regNr', 'regNr' + newNum);

    // insert the new element after the last "duplicatable" input field
    $('#input' + num).after(newElem);

    // enable the "remove" button
    $('#btnDel').removeAttr('disabled');

    // business rule: you can only add 5 names
    if (newNum == 5)
        $('#btnAdd').attr('disabled','disabled');
});


$('#btnDel').click(function() {
     var num = $('.clonedInput').length;

    $('#input' + num).remove();     // remove the last element

    $('#btnAdd').attr('disabled',''); // enable the "add" button

    // if only one element remains, disable the "remove" button
    if (num-1 == 1)
          $('#btnDel').attr('disabled','disabled');
});

$('#btnDel').attr('disabled','disabled');​

デモ: http://jsfiddle.net/chridam/qW9ra/