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:

The logged in user selects an option, Awesome, OK or Awful.
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).
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

只需在输入中添加onchange()（本例中为无线电类型）即可调用javascript函数，该函数从url获取数据而无需刷新页面，我已经修改了你的代码并用我自己的php进行了测试。

你的html必须像

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

然后你可以通过添加

在html中编写这个javascript代码

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

或将其放在另一个文件.js中（别忘了从你的html页面调用它）

JS CODE - ＆gt;

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

请告诉我它是否有效或是否存在其他问题

jQuery AJAX function not doing anything

1 个答案: