使用AJAX

Question

我有2个表格。我希望这两个表单单独行动等等，我希望使用单选按钮立即使用AJAX提交表单。对于表单2也是如此。我可以为一个表单而不是两个表单执行此操作。这可能吗？

<form id="poll_form" method="post" action="{{URL::route('poll-update')}}">
fieldset class="polling">  
<input type="radio" name="poll_option" value="1"/>
<input type="radio" name="poll_option" value="2"/>
<input type="text" name="poll_option" value="sometext"/> 
<fieldset>
</form>

<form id="poll_formtwo" method="post" action="{{URL::route('poll-update')}}"> 
<fieldset class="polling">  
<input type="radio" name="poll_option" value="1"/>
<input type="radio" name="poll_option" value="2"/>
<input type="text" name="poll_name" value="sometexttext"/>
</fieldset>
</form>  

我试过

JQuery的

  $('input:radio').change(function(){

       var article = $('#poll_form').serializeArray();
       var url     = $('#poll_form').attr('action');

       $.post(url, article, function(data){
           console.log(data);
       });
    });




 $('input:radio').change(function(){

       var article = $('#poll_formtwo').serializeArray();
       var url     = $('#poll_formtwo').attr('action');

       $.post(url, article, function(data){
           console.log(data);
       });
    });

Answer 1

$('.secondRadio').change(function(){

   var article = $('#poll_formtwo').serializeArray();
   var url     = $('#poll_formtwo').attr('action');

   $.post(url, article, function(data){
       console.log(data);
   });
});

将一个班级添加到您的单选按钮

 <input type="radio" class="secondRadio" name="poll_option" value="3"/>

同样为first radio添加课程并更改corresponding click function

表单提交的原因：

您已将同名添加到单选按钮。 这使他们成为一个群体。因此，更改一个单选按钮会触发两个事件

另一种方式：没有HTML修改

$('#poll_formtwo input:radio').change(function(){

   var article = $('#poll_formtwo').serializeArray();
   var url     = $('#poll_formtwo').attr('action');

   $.post(url, article, function(data){
       console.log(data);
   });
});

另一种方式

  $( 'input[name="radio2"]:radio' ).change(function(){})

需要更改电台名称。

Answer 2

您可以尝试以下操作。

$('input:radio').change(function(){
            var $form = $(this).closest('form')
    var article = $form.serializeArray();
    var url     = $form.attr('action');

   $.post(url, article, function(data){
       console.log(data);
   });
});

请参阅fiddle