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');
        }
      });

    });

  });

use $('#myform').bind('submit', function(){ dataType: 'json', — Ghostman
– Ghostman, Commented Apr 11, 2015 at 16:49
Isn't it so that in your case this.form.submit(), this refers to the radio button and not the form? — icecub
– icecub, Commented Apr 11, 2015 at 16:50

kurt · Accepted Answer · 2015-04-11 16:49:40Z

2

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>

answered Apr 11, 2015 at 16:49

kurt

1,1561 gold badge8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ynef Over a year ago

How do I prevent this from refreshing the whole page?

kurt Over a year ago

remove onClick="this.form.submit()" from the radios

dude · Accepted Answer · 2015-04-11 17:01:41Z

0

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

});

answered Apr 11, 2015 at 17:01

dude

5,0628 gold badges36 silver badges51 bronze badges

Collectives™ on Stack Overflow

Ajax form submit to php for processing on radio button click

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related