Post the value of a form to php using ajax

Question

I am trying to post the value of a form to php using ajax, I would like to stay on the current page when the form is submitted.

I have tried various methods but am unsure what to do next.

Curently when i click one of the radio values the data gets submitted but the page changes to the php script.

<!doctype html>
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'>
</script>

<meta charset="utf-8">
<title>TEST</title>
</head>
<body>

 <h1>Scores Page</h1>

  <form action="updatescore.php" method="post"> 

<form>
    <input type="radio" name="newScore" value="1" >1
    <br>
    <input type="radio" name="newScore" value="2" >2
    <br>
    <input type="radio" name="newScore" value="3" >3
    <br>
    <input type="radio" name="newScore" value="4" >4
    <br>
    <input type="radio" name="newScore" value="5" >5
    <br>
</form>

</body>

<script type='text/javascript'>

 $(document).ready(function() { 
   $('input[name=newScore]').change(function(){
        $('form').submit();
   });
  });

</script>

</html>

You have identified that you need to use ajax. Try reading an ajax tutorial. Google will help you locate hundreds of the things. There is no point in Stackoverflow users writing another one. — Quentin, Nov 30 '14 at 18:13
Please [learn to love labels](http://www.456bereastreet.com/archive/200711/use_the_label_element_to_make_your_html_forms_accessible/) — Quentin, Nov 30 '14 at 18:13
A google search gave me this StackOverflow post http://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php — pferland, Nov 30 '14 at 18:17
Consider using the jquery ajax methods $.ajax() or $.post(). Right now you are just posting a form without ajax. — Matthew Eskolin, Nov 30 '14 at 18:18

score 1 · Accepted Answer · answered Nov 30 '14 at 18:16

1

$('input[name=newScore]').change(function(){
    var xyz = $(this).val();
    $.post('updatescore.php', {xyz:xyz}, function(data){
       //any operation after submitting data;
    });
});

Handle xyz using $_POST['xyz'] in updatescore.php file.

answered Nov 30 '14 at 18:16

Vipul Hadiya

882
1
11
22

Post the value of a form to php using ajax

1 Answers1