Question posted in
You can find the official documentation here.

how to grab values from input fields in a forms which are generated by a foreach loop with jquery – Jquery ajax

I have 5 forms that are generated by a foreach loop and I want to send the input data with jquery ajax. If I want to grab the values from the 2nd form, I got an empty array.

My form:

<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>

Under each form, ( also in the foreach) there is my jquery ajax and looks like this:

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

});

And 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' . "rn";
    $headers .= 'From: '.$_POST['email_from'];

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

If i fill the first form, i get a full array with all the values.

But if i fill in the second or third form, only [email_to] has a value and print_r gives me this output:

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

So i thought: grab the closest values from the input fields like this in my 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();

But now, i got a complete empty array, even with the first form!

How can i make this work for each form?

The $gb_id are unique and correspond with each other

Tags:

2

Answers


  1. 0

    According to the docs for closest: (https://api.jquery.com/closest/)

    For each element in the set, get the first element that matches the
    selector by testing the element itself and traversing up through its
    ancestors in the DOM tree.

    What you want to use instead of closest is find (https://api.jquery.com/find/)

    Get the descendants of each element in the current set of matched
    elements, filtered by a selector, jQuery object, or element.

    So change: $(this).closest
    to $(this).find

    and it will go “down” instead of “up” the DOM.

    Login or Signup to reply.
  2. 0

    So i thought: grab the closest values

    You were on a good track here, except you used the wrong method. .closest() searches through ancestors (element higher up in the DOM tree). What you need instead is .find(), which searches through descendants and it will grab the desired values.

    On a side note, there are a couple of other points of improvement that can be made to your code. For starters, don’t output your jQuery in the php foreach loop. With a couple of slight changes you can have all the code in one script tag. You don’t really need unique ids for your forms, just give them all the same class. Then in your jQuery script select them all using that class and assign the submit event, like so:

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

    That way you have everything in one place and you don’t generate unnecessary duplicates.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search