Ajax表单提交给php进行单选按钮点击处理

时间:2015-04-11 16:43:44

标签: javascript php jquery ajax forms

我正在尝试让表单提交要处理的processor.php数据并将响应添加到数据库中,但表单当前没有提交任何数据。

在没有页面刷新的情况下执行此操作也非常重要,因为我在表单下面有一个iframe,应保持不变。

这是我的表格:

<form id="myForm" action="" method="post">
    <span id="surveyQuestion">At first glance, how likely it is for you to use the service/product being advertised?</span><br/>
    <span class="info">Not likely</span>
    <input type="radio" name="response" value="0" onClick="this.form.submit()">
    <input type="radio" name="response" value="1" onClick="this.form.submit()">
    <input type="radio" name="response" value="2" onClick="this.form.submit()">
    <input type="radio" name="response" value="3" onClick="this.form.submit()">
    <input type="radio" name="response" value="4" onClick="this.form.submit()">
    <input type="radio" name="response" value="5" onClick="this.form.submit()">
    <span class="info">Very likely!</span>
</form>

这是jQuery / Ajax:

  $(function () {

    $('#myForm').submit(function (e) {

      e.preventDefault();

      $.ajax({
        type: 'post',
        url: 'processor.php',
        data: $('#myForm').serialize(),
        success: function () {
          alert('form was submitted');
        }
      });

    });

  });

2 个答案:

答案 0 :(得分:1)

尝试Jquery .change()

 $("input.myradio").change(function(){
   alert("hi");
$.ajax({
        type: 'post',
        url: 'processor.php',
        data: $('#myForm').serialize(),
        success: function () {
          alert('form was submitted');
        }
      });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" action="" method="post">
    <span id="surveyQuestion">At first glance, how likely it is for you to use the service/product being advertised?</span><br/>
    <span class="info">Not likely</span>
    <input type="radio" class="myradio" name="response" value="0" onClick="this.form.submit()">
    <input type="radio" class="myradio" name="response" value="1" onClick="this.form.submit()">
    <input type="radio" class="myradio" name="response" value="2" onClick="this.form.submit()">
    <input type="radio" class="myradio" name="response" value="3" onClick="this.form.submit()">
    <input type="radio" class="myradio" name="response" value="4" onClick="this.form.submit()">
    <input type="radio" class="myradio" name="response" value="5" onClick="this.form.submit()">
    <span class="info">Very likely!</span>
</form>

答案 1 :(得分:0)

$('input[type=radio]').click(function() {

});