ajax jquery表单不发送更改数据答案

【问题标题】：ajax jquery form not sending data on changeajax jquery表单不发送更改数据
【发布时间】：2017-03-13 14:02:44
【问题描述】：

我正在为购物车/订单中的每个项目创建表单，即循环中的多个表单并为它们提供唯一的 ID ('id'=>'cart_'.$line)(cart_1,cart_2)。并在循环中为每个表单创建了一个更新链接。代码如下

 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')?>  >

我希望我的表单通过 ajax 提交 onChange of quantity,discount 字段。我正在尝试但表单未发送 onChange

    <script>
$(document).ready(function(){
   $(".line-item").submit(function(event) { 
    event.preventDefault();
    var line_form = $( this ),
        url = line_form.attr( 'action' );
        $.post(url,
        {
          quantity:$('quantity').val(),
          discount: $('discount').val()
        },
        function(data,status){
            alert("Data: " + data + "\nStatus: " + status);
        });
    });
});
</script>

【问题讨论】：

I want my form to submit on onChange event of quantity field. 您的代码中的这个事件在哪里？ api.jquery.com/change
如何在这段代码中实现？

标签： jquery ajax forms codeigniter

【解决方案1】：

你需要使用事件change

<script>
$(document).ready(function(){
   //Here the element you want to trigger in change to send the form (quantity, disccount,...)
   $(".quantity").change(function(event) { 
    event.preventDefault();
    var line_form = $( this ),
        url = line_form.attr( 'action' );
        $.post(url,
        {
          quantity:$('quantity').val(),
          discount: $('discount').val()
        },
        function(data,status){
            alert("Data: " + data + "\nStatus: " + status);
        });
    });
});
</script>

实际上，如果您有很少的元素可以触发表单提交，您可以这样做：

<script>

    function submitForm(){
        //Here send by AJAX the form and handle all actions 
    }

    $('.elementTriggerSubmit').change(submitForm);
    $('#otherElement').change(submitForm);
</script>

【讨论】：