jQueryを使ってforeachループによって生成されるフォームに入力フィールドから値を取得する方法

ジョン：

私は、foreachループによって生成された5つのフォームを持っていると私はjqueryのAjaxで入力されたデータを送信したいです。私はから値を取得したい場合は2nd、フォーム、私は空の配列を得ました。

マイ形式：

<form id="<?php echo $gb_id; ?>" action="" method="POST" role="form"> // $gb_id is unique id

    <input class="hide-robot honeyname" name="honeyname" type="text" />
    <input class="form-control email_from" name="email-from" type="email" value=""> 
    <input class="form-control email_to" name="email-to" type="hidden" value="<?php echo $gb_email; ?>">
    <input class="form-control email_subject" name="email-subject" type="text" value="">
    <textarea rows="6" class="form-control custom-control email_message" name="email-message">
</textarea> 

    <button class="btn btn-primary float-right" type="submit" name="submit_email">Send</button> 
</form>

各フォームの下に、私のjQueryのAJAXとこのようになります（これもforeachの中）があります：

$('#<?php echo $gb_id; ?>').on('submit', function(e){
    e.preventDefault();

    var honeyname = $(".honeyname").val();
    var email_from = $(".email_from").val();    
    var email_to = $(".email_to").val();
    var email_subject = $(".email_subject").val();
    var email_message = $(".email_message").val();

    $.ajax({
        url: 'email.php',
        type: 'POST',
        data: {
                honeyname:honeyname,
                email_from:email_from,
                email_to:email_to,
                email_subject:email_subject,                
                email_message:email_message

                },

        success: function(data){
            $('.result').html(data);

        },
        complete:function(){
           $('body, html').animate({scrollTop:$('.result').offset().top}, 'slow');         
        }
    });

});

そして、私のPHP：

print_r($_POST);    
    $recipient = $_POST['email_to'];
    $subject = $_POST['email_subject'];
    $body = $_POST['email_message'];
    $headers  = 'MIME-Version: 1.0';
    $headers .= 'Content-type: text/html; charset=UTF-8' . "\r\n";
    $headers .= 'From: '.$_POST['email_from'];

    echo $_POST['email_from'].'<br />';
    echo $recipient.'<br />';
    echo $subject.'<br />';
    echo $body.'<br />';

私は最初のフォームを記入した場合、私はすべての値との完全な配列を取得します。

私は第二または第三のフォームに記入した場合でも、唯一の[email_to]価値があり、print_r私にこの出力が得られます。

Array ( [honeyname] => [email_from] => [email_to] => [email protected] [email_subject] => [email_message] => )

私のjqueryのでは、このような入力フィールドから最も近い値をつかむ：思った私はそう：

var honeyname = $(this).closest(".honeyname").val();
var email_from = $(this).closest(".email_from").val();  
var email_to = $(this).closest(".email_to").val();
var email_subject = $(this).closest(".email_subject").val();
var email_message = $(this).closest(".email_message").val();

しかし、今、私も最初の形式で、完全に空の配列を持って！

どのように私は、各フォームのためにこの作業を行うことができますか？

$gb_id互いにユニークで対応しています

imvain2：

以下のためのドキュメントによると、最も近い：（https://api.jquery.com/closest/）

セット内の各要素について、要素自体をテストし、DOMツリー内のその祖先を介してアップトラバースすることによってセレクタに一致する最初の要素を取得します。

あなたがの代わりに使用する最も近いことである見つける（https://api.jquery.com/find/）

セレクタ、jQueryオブジェクト、または要素によってフィルタリングマッチした要素の現在のセット内の各要素の子孫を得ます。

：変更そう$(this).closest に$(this).find

そして、それはDOMではなく、「アップ」の「ダウン」になります。

jQueryを使ってforeachループによって生成されるフォームに入力フィールドから値を取得する方法

おすすめ