Question

我正在开发POS网站。

为购物车/订单中的每个商品创建表单，即循环中的多个表单并为其提供唯一ID（'id'=＆gt;'cart _'。$ line）（cart_1，cart_2）。并为每个表单创建一个循环更新链接。代码

echo form_open($controller_name."/edit_item/$line", array('class'=>'form-horizontal', 'id'=>'cart_'.$line));
echo form_input(array('name'=>'quantity','value'=>$item['quantity'],'size'=>'2', 'id'=>'quantity','class'=>'form-control'));
echo form_input(array('name'=>'discount','value'=>$item['discount'],'size'=>'3',  'id'=>'discount', 'class'=>'form-control'));?>
<a href="javascript:document.getElementById('<?php echo 'cart_'.$line ?>').submit();" id="anchor" title=<?php echo $this->lang->line('sales_update')?>  >

这符合更新要求，例如我更新数量并点击链接时更新价格。

但现在问题是我希望我的表单提交onChange数量字段事件。

1）首先尝试

<script type="text/javascript">
$("#quantity,#discount").on('change',function(){
var quantity=$("#quantity").val();
var discount=$("#discount").val();
if(quantity!=""&&discount!=""){
document.getElementById('anchor').click();
console.log('form send');
}
});
</script>

这就是我累了但只有按顺序只有一个项目才有效

2）第二次尝试

function updateQuantity(anchorID){
if(anchorID != ""){
document.getElementById(anchorID).click();
}
}
echo form_input(array('name'=>'quantity','value'=>$item['quantity'],'size'=>'2', 'onChange'=>'updateQuantity(HERE I WANT TO PASS "anchorID_LOOP VALUE")' 'id'=>'quantity','class'=>'form-control'));
<a href="javascript:document.getElementById('<?php echo 'cart_'.$line ?>').submit();" id='<?php echo 'anchorID_'.$line ?>' title=<?php echo $this->lang->line('sales_update')?>  >

Answer 1

而不是触发button.click()您应该尝试以下操作：

echo form_open($controller_name."/edit_item/$line", array('class'=>'form-horizontal line-item', 'id'=>'cart_'.$line));
echo form_input(array('name'=>'quantity','value'=>$item['quantity'],'size'=>'2', 'id'=>'quantity','class'=>'form-control cartline', 'data-form' => $line));
echo form_input(array('name'=>'discount','value'=>$item['discount'],'size'=>'3',  'id'=>'discount', 'class'=>'form-control cartline', 'data-form' => $line));?>
<a href="javascript:document.getElementById('<?php echo 'cart_'.$line ?>').submit();" id="anchor" title=<?php echo $this->lang->line('sales_update')?>  >

注意我为表单控件提供了一个额外的类和一个data-属性来保存$line变量

所以现在我可以抓住这个事件并提交表格

$(function(){
    $('.cartline').change(function(){
        var line = $(this).attr('data-form');
        $('#cart_' + line).submit();
    });
});

要通过AJAX发送表单，您必须处理表单提交功能（我给表单一个新的类line-item）

$(".line-item").submit(function(event) {   
      event.preventDefault();
      var line_form = $( this ),
          url = line_form.attr( 'action' );
      //Make your data 
      $.post( url, { data-field1: $('text1').val(), data-field1: $('text2').val() }, function(data){ 
         alert('Form Posted') 
      });


    });

在CodeIgniter

1 个答案: