jQuery AJAX function not doing anything

Question

I have a form and I want to insert the value of this form as soon as someone clicks a radio button. No better excuse than that I am not good at jQuery at all. This is what I've got so far.

HTML:

<form>
    <input type="radio" checked="true" id="q1r1" name="q1" value="Awesome">
    <label class="button1" for="q1r1">Awesome</label>

    <input type="radio" id="q1r2" name="q1" value="Ok">
    <label class="button2" for="q1r2">Ok</label>

    <input type="radio" id="q1r3" name="q1" value="Awful">
    <label class="button3" for="q1r3">Awful</label>
</form>

get.JSON:

$('#q1r1').on('click',function(){
    var get_var_name = $(this).val();
        $.getJSON('json/question1.php?team=<?php echo $teamid ?>',{q1:get_var_name},function(data,status){
            console.log(data);
            if(status == 'success'){
                console.log(data);
            } else {
                alert('Status: ' + status);
            }
            });
        });

...json/question1.php:

<?php
    require('db_connect.php');
    session_start();
    $uid = $_SESSION['uid'];

    if($_GET['q1']) {

        $teamid = $_GET['team'];
        $insertq1 = $_GET['q1'];

        $sql = "UPDATE result 
        SET q1='$insertq1'
        WHERE userid='$uid' AND teamid='$teamid' ";

        $result = $mysqli->query($sql);

    }
?>

As you probably see, I'm really no good at this at all, but this is what I had planned to happen:

1. The logged in user selects an option, Awesome, OK or Awful.
2. Without the page refreshing or a submit button being clicked, the get.JSON will automatically nudge the question1.php with the values teamid (saved in $teamid) and q1 (the value of the users choice).
3. The php file silently updates the users database with the values, everybody happy.

Thing is that nothing happens when I click on "Awesome" as of right now, and I don't know why. I've been trying to follow multiple guides, but I'm just not sure how to go about solving this one. Any advice or help is much appreciated.

Kind regards, Mo.

P.s!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

is included.

Answer 1

just add onchange() in your input(radio type in this case) to call a javascript function that get data from url with no need to refresh the page, i've modified your code and tested it with a php of my own.

your html must be like

  <form>
      <input type="radio" checked="true" id="q1r1" name="q1" value="Awesome" onchange="GrabData(this)">
      <label class="button1" for="q1r1">Awesome</label>

      <input type="radio" id="q1r2" name="q1" value="Ok" onchange="GrabData(this)">
      <label class="button2" for="q1r2">Ok</label>

      <input type="radio" id="q1r3" name="q1" value="Awful" onchange="GrabData(this)">
      <label class="button3" for="q1r3">Awful</label>
  </form>

then you can either write this javascript code inside the html by adding

<script>.......</script>

or put it in another file .js (dont forget to call it from you html page)

JS CODE-->

function GrabData(Passeddata){
  var radioValue = Passeddata.value;
  var URL = "json/question1.php?q1="  + radioValue + "&teamid="<?php echo $teamid; ?>;
  $.ajax( {
      url : URL,
      type : "GET",
      dataType: 'json',
      success : function(data) {
        if (data == "") {
          alert("data is empty");
        }else{
          console.log('got your data back sir');
        }
      }
  });
}

please let me know if it worked or if there is some other problems