AJAX/JavascriptをHTMLに私は複数のフォームを作成し、入力していますJavaScriptでフォームデータ

Question

を提出取得このような私たちのAjax/JS：これらの形態の

function addProduct(product) { 
        var html = ''; 
        html += '<div>' 
        html += '<form id="product-form">'; 
        html += '<div class="city">'+product['product_name']+'</div>' 
        html += '<div class="state">'+product['product_price']+'</div>' 
        html += '<input type="hidden" name="product_id" value="'+product['product_id']+'" id="product_id" >' 
        html += '<a href="#" class="whiteButton submit" id="view-product-button" >View</a>' 
        html += '</form>' 
        html += '</div>' 
        var insert = $(html); 
        $('#main').append(html); 
       } 

倍数は異なるproduct_idsで作成されます。私が実行している問題はちょうどそのフォームの値を取得しています。私は提出されたフォームを正確に特定することができますが、入力からproduct_idを確認できません。これまで私はこれを持っています：

$('#main').on('submit', '#product-form', function() { 

        var product_id = $('?????').val() 

       }); 

提出されたフォームから製品IDとその他の関連データを取得するにはどうすればよいですか？

Answer 1

フォームのIDの代わりにクラスを使用し、 "タグ"の代わりにサブミットボタンを使用して、値を取得することができます：$（ 'input [name = product_id] 、このような送信機能を作成する

$('.form_class').on('submit', function(e){ 
    e.preventDefault(); 
    var form = $(this); 
    var formUrl=form.attr('action'); 
    var product_id = $('#product_id', form).val(); 

    $.ajax({ 
     type: "POST", 
     url: formUrl, 
     data: product_id, // or use form.serialize(); 
     success: function(data){ 
      // code goes here; 
     }, 
     error:function (xhr, ajaxOptions, thrownError){ 
      // code goes here; 
     } 
    }); 
}); 

Answer 2

$(this).find('.city').text(); 

Answer 3

あなたはjQueryの$()関数にコンテキストを提供することができる：

var product_id = $('input[name=product_id]', this).val(); 

ここthis'input...'セレクタが、この場合thisにおいて、唯一第二パラメータのコンテキスト内で適用されますjQueryによって、submitハンドラ内の現在のフォーム要素になるように設定されます。

また、あなたが最初に現在のフォームを選択し、その中.find()の要素ができます：あなたは、その要素を与えてくれたものの、idがそれを属性ので、私は名前で入力を選択しています。注ではありません

var product_id = $(this).find('input[name=product_id]').val(); 

同一のidを複数の要素に割り当てることは有効です。

Answer 4

短い答えは：

$('#main').on('submit', '#product-form', function() { 
    var product_id = $(this).children('input[name=product_id]').val(); 
}); 

しかし、私はあなたの機能に問題があることを確認することができます。実際には、addProduct(...)を複数回呼び出すと、同じID（product-form,product_idおよびview-product-button）を持つ要素が増えるため、DOMが無効になります。その背後にある全体のアイデアをよりよく検討してください。

Answer 5

まず、同じIDを持つ複数の要素を作成してはいけません。クラスを使用します。 JavaScriptには多くのidsがありますが、フォームの場合はフォームの宣言の場合は html += '<form class="product-form">';、イベントをキャッチする場合は$('#main').on('submit', '.product-form', function() {となります。

イベントをキャッチすると、thisは現在のイベントターゲットを参照します。 .value