get variable from php form which is in repeating loop

Question

I have php form in while loop with different id.

<?php
while($pet = $results->fetch(PDO::FETCH_ASSOC)){
         ?>
<form method="post" name="petForm" id="petForm">
            <ul id="listAvatars">
                <li>
                <input type='text' name='pet' id='pet' value='<?=$pet['PetId']?>' />
                <img src="<?=PET_AVATAR.$pet['Avatar']?>" class="listAvatar">
                <span onclick='setPet(<?=$pet['PetId']?>)' id="avatarName"><?=$pet['PetName']?></span>
                </li>
            </ul>
</form>
           <?php
    }
?>

I want to get different pet id on click event. I am getting valid pet id on click name, by this function.

function setPet(petId){
    alert(petId);
    document.getElementById("petForm").submit();
}

PHP:

if(isset($_POST['pet'])){
    $petId = $_POST['pet'];
    print_r($petId);
}

By submitting this form, I am getting only the first pet's id. What should I do to get appropriate pet id on select?

score 2 · Answer 1 · edited May 23 '17 at 12:28

2

Your loop is wrapping over separate form fields. When you click submit, it's only going to submit the respective form and not the others.

What you probably want to do is move the form fields outside of the loop, so that all petIds are passed. As it stands though, you're going to need to update the name to something like pet[] so PHP knows it's an array of petIds.

See: Posting array from form

Edit

It seems the real question is really:

When I click a petId, how do I POST that petId to a PHP script through a form (without the use of AJAX).

HTML

<div id="pet-id-1" class="petid">Pet 1</div>
<div id="pet-id-2" class="petid">Pet 2</div>
<div id="pet-id-3" class="petid">Pet 3</div>

<form action="" method="post" id="pet_form">
    <input type="hidden" name="pet_id" id="pet_id" value="" />
</form>

Javascript

$(document).ready(function() {
    $('.petid').click(function() {
        var pet_id = $(this).attr('id');
        $("#pet_id").val(pet_id);
        $("#pet_form").submit();
    });
});

See: http://jsfiddle.net/jwk2J/

edited May 23 '17 at 12:28

Community

1
1

answered Dec 20 '13 at 18:17

Julio

2,261
4
30
56

how to get appropriate values for each variables? – RNK Dec 20 '13 at 18:18
I tried it with making it array. I am getting all the pet ids. but, How can I identify in php which one is selected? – RNK Dec 20 '13 at 18:22
So you want to receive all of the petIds, but only care about one? Why not just send that one? – Julio Dec 20 '13 at 18:23
That's what I need to do. I have list of all the pets. I want to send only one which I will select. So, onclick i need to send that perticular pet id to php. – RNK Dec 20 '13 at 18:25
Ah, so when you click on a particular pet, you want it to fire (AJAX?) a request of to your PHP? – Julio Dec 20 '13 at 18:26
onselect I want to just submit form . so, I can get that attribute from $_POST['petId'] in php. I don't want to use ajax here. – RNK Dec 20 '13 at 18:29
See my edit. I think that's what you need. Note the submission is commented out in the fiddle. – Julio Dec 20 '13 at 18:36

Krish R · Accepted Answer · 2013-12-20T18:29:26.257

You need move <form method="post" name="petForm" id="petForm"> outside the while loop

 <form method="post" name="petForm" id="petForm">
      <input type='hidden' name='pet' id='pet' value='' />
      <ul id="listAvatars">
 <?php
    while($pet = $results->fetch(PDO::FETCH_ASSOC)){
     ?>

            <li>

            <img src="<?=PET_AVATAR.$pet['Avatar']?>" class="listAvatar">
            <span onclick='setPet(<?=$pet['PetId']?>)' id="avatarName"><?=$pet['PetName']?></span>
            </li>

       <?php
    }
 ?>
        </ul>
</form>

Javascript:

function setPet(petId){
   alert(petId);
   document.getElementById("pet").value=petId;
   document.getElementById("petForm").submit();
 }

In alert(petId), I am getting different pet id. but, in form submission, I am getting only the last element. — RNK, Dec 20 '13 at 18:27

get variable from php form which is in repeating loop

2 Answers2