javascript - Ajax 表单提交到 php 以在单选按钮单击时进行处理

Question

我试图让表单提交待处理的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');
        }
      });

    });

  });

Answer 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>