Question

我有无限多个动态表单，只包含单个输入隐藏字段，其中包含提交按钮，并尝试获取单击该按钮的表单的值。我不知道为什么会发生这种情况。

我已经阅读了这些How to get the Specific Form Field value using JQuery和Submit a specific form with JQuery Ajax，但仍然没有结果。

控制器

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>

我正在使用CodeIgniter。

Answer 1

1st：Id必须是唯一的，所以请使用class

<button type="submit" class="btn btn-info send">Add To Order</button><br>

和js

<script>
$('form').on('submit',function(e){
  e.preventDefault();
  var hiddenVal = $(this).find('input[type="hidden"]').val();
  alert(hiddenVal);
});
</script>

在php中我认为你在错误的地方关闭了</form>

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

如果您有多个隐藏字段，则需要使用.each()

<script>
    $('form').on('submit',function(e){
      e.preventDefault();
      $(this).find('input[type="hidden"]').each(function(){
         alert($(this).val());
      });

    });
    </script>

Answer 2

您的ID永远不会是数量，因为您在每个数量字的最后都包含了一个数字

将隐藏的输入更改为：

<input type="hidden" name="quantity" id="quantity<?php echo $i;?>" value="<?php echo $lrd1->itemname; ?>" class="quantity" size="2">

将每个jquery 更改为：

$( ".quantity" ).each(function(){
  alert($(this).val());
}); //running bt showing all at once

Answer 3

我个人会使用data- *属性而不是隐藏元素。这将允许您避免进一步查找，因为它们将位于您正在处理事件的元素上。

<button type="submit" class="btn btn-info send" data-quantity="45">Add To Order</button>

然后逻辑就像

$('.send').on('click', function(){
    var $this = $(this);

    console.log($this.data('quantity'));
});

如何从多个表单中获取输入隐藏值？

3 个答案: