How to get input hidden value from multiple forms? - php

Question

I am having unlimited multiple dynamic forms containing only single input hidden field having submit button and trying to get the value of that form whose button is clicked. I don't know why this is not happening.
I've read these How to get the Specific Form Field value using JQuery and Submit a specific form with JQuery Ajax but still no result.
controller
public function order()
{
$data['fruits'] = $this->catering_model->getrecess('Recess Fruits','Category Recess');
$this->load->view('ChoiceLaunch/order',$data);
}
order.php
<?php $i=0;
if(!empty($fruits)){
?>
<div class="col-sm-12"><h3 align="center"><?php echo $fruits[0]->catsubname; ?></h3><br>
<!-- while($res_item=mysqli_fetch_array($cat_item_sql)){ -->
<?php $i=0;
foreach($fruits as $lrd1){
$i++;
?>
<form method="post" action="">
<div class="col-sm-4 col-md-3">
<div class="thumbnail">
<img style="height: 177px;width: 200px;" src="<?php echo 'http://localhost:8080/catering/uploads/'.$lrd1->picturename;?>" alt="...">
<div class="caption protitle">
<p style="height: 12px;width: 200px;margin-top: 9px;margin-bottom:29px;"><?php echo $lrd1->itemname; ?></p><br>
<input type="hidden" name="quantity" id="quantity<?php echo $i;?>" value="<?php echo $lrd1->itemname; ?>" size="2">
<button type="submit" id="send" class="btn btn-info">Add To Order</button><br>
<?php echo '$'.$lrd1->price; ?>
</div>
</div>
</div>
<?php
}}
?>
</form>
</div>
<script>
$('#send').click(function(){
//var selection= $(this).attr('id');
// $( "[id='quantity']" ) .each(function(){
// alert($(this).val());
// }); //running bt showing all at once
$( "form:input[type=hidden]" ) .each(function(){
alert($(this).val());
})
});
</script>
I am using CodeIgniter.

Answer 1

1st: Id must be unique so use class instead
<button type="submit" class="btn btn-info send">Add To Order</button><br>
and in js
<script>
$('form').on('submit',function(e){
e.preventDefault();
var hiddenVal = $(this).find('input[type="hidden"]').val();
alert(hiddenVal);
});
</script>
and in php I think you closed the </form> in a wrong place
<?php $i=0;
foreach($fruits as $lrd1){
$i++;
?>
<form method="post" action="">
<div class="col-sm-4 col-md-3">
<div class="thumbnail">
<img style="height: 177px;width: 200px;" src="<?php echo 'http://localhost:8080/catering/uploads/'.$lrd1->picturename;?>" alt="...">
<div class="caption protitle">
<p style="height: 12px;width: 200px;margin-top: 9px;margin-bottom:29px;"><?php echo $lrd1->itemname; ?></p><br>
<input type="hidden" name="quantity" id="quantity<?php echo $i;?>" value="<?php echo $lrd1->itemname; ?>" size="2">
<button type="submit" class="btn btn-info send">Add To Order</button><br>
<?php echo '$'.$lrd1->price; ?>
</div>
</div>
</div>
</form>
<?php
}
?>
if you have more then one hidden field you need to use .each()
<script>
$('form').on('submit',function(e){
e.preventDefault();
$(this).find('input[type="hidden"]').each(function(){
alert($(this).val());
});
});
</script>

Answer 2

Your id never be quantity because you included a number in the final of each quantity word
Change de hidden input to this:
<input type="hidden" name="quantity" id="quantity<?php echo $i;?>" value="<?php echo $lrd1->itemname; ?>" class="quantity" size="2">
And change the each jquery to this:
$( ".quantity" ).each(function(){
alert($(this).val());
}); //running bt showing all at once

Answer 3

I would personally use a data-* attribute instead of hidden elements. This will allow you to avoid further lookups since they will be on the element you are handling the event for.
<button type="submit" class="btn btn-info send" data-quantity="45">Add To Order</button>
Then the logic would be like
$('.send').on('click', function(){
var $this = $(this);
console.log($this.data('quantity'));
});