How to get input hidden value from multiple forms?

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">
                              <a href="<?php echo base_url(); ?>Choice/orderdetial"><img style="height: 177px;width: 200px;" src="<?php echo 'http://localhost:8080/catering/uploads/'.$lrd1->picturename;?>" alt="..."></a>
                              <div class="caption protitle">
                                <a href="#"><p style="height: 12px;width: 200px;margin-top: 9px;margin-bottom:29px;"><?php echo $lrd1->itemname; ?></p></a><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.

Small suggestion. If instead of creating hidden fields, you put the data on your '#send' element as data-* elements, then you wouldn't have to lookup anything in your click handler. you could just do this.getAttribute('data-whatevernameyougaveit') or $(this).data('whatevernameyougaveit') — Taplar
– Taplar, Commented May 23, 2017 at 19:25

Mohamed-Yousef · Accepted Answer · 2017-05-24 11:58:01Z

2

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">
           <a href="<?php echo base_url(); ?>Choice/orderdetial"><img style="height: 177px;width: 200px;" src="<?php echo 'http://localhost:8080/catering/uploads/'.$lrd1->picturename;?>" alt="..."></a>
           <div class="caption protitle">
               <a href="#"><p style="height: 12px;width: 200px;margin-top: 9px;margin-bottom:29px;"><?php echo $lrd1->itemname; ?></p></a><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>

edited May 24, 2017 at 11:58

answered May 23, 2017 at 19:21

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3162878 Over a year ago

i ve multiple forms containing 1 hidden field. but when i inspect the code it shows only one form and multiple div i dont know why?

Mohamed-Yousef Over a year ago

@user3162878 updated answer .. the answer php code and js should work with you

user3162878 Over a year ago

yes perfect. u r right it was wrongly placed </form> by me. thanks bro. +1 vote as well

Mohamed-Yousef Over a year ago

@user3162878 Thanks .. Have a great day :-) .. +1 vote too :-))

Matheus Marzochi · Accepted Answer · 2017-05-23 19:20:51Z

1

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

answered May 23, 2017 at 19:20

Matheus Marzochi

449 bronze badges

Comments

Taplar · Accepted Answer · 2017-05-23 19:29:24Z

0

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'));
});

answered May 23, 2017 at 19:29

Taplar

25k4 gold badges24 silver badges36 bronze badges

Collectives™ on Stack Overflow

How to get input hidden value from multiple forms?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related