1

私はほとんどの時間を PHP/HTML で作業してきましたが、正気を保つために書いている小さなスクリプト (ペーパーワーク、あまりにも多くのペーパーワーク) のために、JQuery を使用せざるを得なくなりました。Google や SO などで検索しましたが、現在使用しているコードに似たものを見つけられなかったり、言語に迷ったりします。

以下のコードは基本的に動的フォームで、必要に応じてテキスト ボックスを追加できます。フォームの送信には、新しく生成されたテキスト ボックス (HTML5) がそれぞれ必要ですが、不要な余分なテキスト ボックスを作成した場合は、それを削除できるようにしたいと考えています (そのため、不要なフィールドが残されません)。必須であるため、フォームを送信できません）。

JFiddle: http://jsfiddle.net/fmdx/jZU97/ (JQuery 1.10.1 を使用)

HTML

<div>
<input type="checkbox" id="customcheck" name="custom" href="#custom">Custom Exceptions Needed?</div>
<div id="custom" style="padding-left:40px;">
    <input type="text" id="exception_1" placeholder="Six foot utility..."><br>
</div><!-- Ending Custom Div -->
<div style="padding-left:40px;"><a id="add_field" href="#"><span>Add Another Exception</span></a>
</div>

JQuery

var counter = 1;
$(function () {
$('a#add_field').click(function () {
    counter += 1;
    $('#custom').append(
        '<input id="exception_' + counter + '" name="dynfields[]' + '" type="text" placeholder="Six foot utility..." required><a href="#">Remove</a><br>');
     });
});

上記のコードの基礎 これらの動的フォームから送信されたすべての情報を取得してデータベースに入れる方法を含むチュートリアルから始めました。だから、私は本当にこのコードを具体的に使おうとしています。(チュートリアル: http://www.infotuts.com/dynamically-add-input-fields-submit-to-database )

事前に助けやアドバイスをありがとう！

4

4 に答える 4

4

削除ボタンにクラスを追加するだけで、次のコードで必要なことを実行できます。

$(document).on('click', '.remove', function(){
    var $this = $(this);
    $this.add($this.prev()).add($this.next()).remove();
})

フィドル: http://jsfiddle.net/jZU97/5/

ただし、.next()and の使用.prev()はあまりお勧めできません。追加した入力を div に再グループ化し (追加するたびに 1 つ)、 を使用することをお勧めします.closest('div')。

于 2013-08-29T20:35:32.333 に答える
1

これが編集されたjsfiddleですhttp://jsfiddle.net/krasimir/jZU97/6

アイデアは、入力フィールドとボタンを div でラップすることです。

var counter = 1,
    custom = $('#custom');
$(function () {
    $('a#add_field').click(function () {
        counter += 1;
        var newRow = $('<div class="row' + counter + '"><input id="exception_' + counter + '" name="dynfields[]' + '" type="text" placeholder="Six foot utility..." required><a href="javascript:void(0);" class="remove-text-box">Remove</a></div>');
        custom.append(newRow);
        (function(index) {
            newRow.find('.remove-text-box').click(function() {
                custom.find('.row' + index).remove();
            });
        })(counter);
    });
});
于 2013-08-29T20:41:44.347 に答える
0 
var counter = 1;
$(function () {
    $('a#add_field').click(function () {
        counter += 1;
        $('#custom').append('<div id="addedField_' + counter + '"><input id="exception_' + counter + '" name="dynfields[]' + '" type="text" placeholder="Six foot utility..." required><button onclick="$(\'#addedField_' + counter + '\').remove()">Remove</button><br></div>');
    });
});
于 2013-08-29T20:41:31.543 に答える
0

また

jquery のデリゲート (ルート要素の特定のセットに基づいて、現在または将来、セレクターに一致するすべての要素の 1 つ以上のイベントにハンドラーをアタッチする) を使用できます。

http://api.jquery.com/delegate/

于 2013-08-29T20:35:38.897 に答える