как получить значения из полей ввода в формах, которые генерируются foreach l oop с jquery - PullRequest
Новая
       3

как получить значения из полей ввода в формах, которые генерируются foreach l oop с jquery

2 голосов
/ 06 марта 2020

У меня есть 5 форм, сгенерированных foreach l oop, и я хочу отправить входные данные с 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>

Под каждой формой (также в foreach) есть my jquery ajax и выглядит так: 

$('#<?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');         
        }
    });

});

И my 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] => steven@live.nl [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 уникальны и соответствуют друг другу

Ответы [ 2 ]

1 голос
/ 06 марта 2020

Итак, я подумал: возьмите самые близкие значения

Вы были на хорошем пути, за исключением того, что вы использовали неправильный метод. .closest() ищет среди предков (элемент выше в дереве DOM). Вместо этого вам понадобится .find(), который ищет потомков и получит нужные значения.

Кстати, есть еще пара моментов, которые можно внести в ваш код. Для начала, не выводите jQuery в php foreach l oop. С парой небольших изменений вы можете иметь весь код в одном теге скрипта. Вам не нужны уникальные идентификаторы для ваших форм, просто присвойте им один и тот же класс. Затем в вашем скрипте jQuery выберите их всех, используя этот класс, и назначьте событие submit, например: 

$('.yourFormClass').on('submit', function (event) { // and so on

Таким образом, у вас все в одном месте и вы не создаете ненужных дубликатов.

1 голос
/ 06 марта 2020

В соответствии с документами для ближайший : (https://api.jquery.com/closest/)

Для каждого элемента в наборе получить первый элемент, который соответствует селектор, проверяя сам элемент и проходя через его предков в дереве DOM.

То, что вы хотите использовать вместо ближайший , равно find (https://api.jquery.com/find/)

Получить потомков каждого элемента в текущем наборе соответствующих элементов, отфильтрованных селектором, jQuery объектом или элементом.

Так что измените: $(this).closest на $(this).find

, и он будет go «вниз» вместо «вверх» DOM.

...