Ajax form submit to php for processing on radio button click

Question

I am trying to make the form submit the data for processor.php to be processed and responses added into a database, but the form is currently not submitting any data.

It is also very important to do this without page refresh, because I have an iframe below the form that should remain untouched.

Here is my form:

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

And here is the 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

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

Answer 2

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

});