Using AJAX to submit form values to database

Question

I have this questionnaire that I'm currently working on where users are given four answer alternatives to answer. Each answer is assigned a radio button, and the radio buttons have a value from a database table (from 1-10). This way different alternatives have different values. The user can also go back and forth between questions.

After going through eight questions the test taker will see a button which replaces the next and back buttons. When the user clicks it, it should submit an AJAX request and send the form values to a database.

My problem that I'm facing is that the form values are not being sent to my database when I click the button. I've tested to see and the form displays answers, and the radio buttons have values, so the problem lies with the SubmitAjax button not sending the values.

Why isn't it working?

Table question: contains answer alternatives and point values

qid(int), answer(varchar), point(int)

Table result: values that should be sent with the AJAX function

qid(int), point(int)

PHP/AJAX

<html>
    <head>
        <meta charset="utf-8">

<script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
  <script type="text/javascript">
function goBack() {
    window.history.go(-1);
}


$("#submitAjax").click(function(){
        if($('.radiobtn').is(':checked')) { 
            var radiobtn = $('.radiobtn:checked').val();
            var qid = $('#qid').val();            

            $.ajax(
            {
                type: "GET",
                url: 'login.php',
                dataType: "json",
                data: "radiobtn="+radiobtn+"&qid="+qid,
                success: function (response) {
                    if(response.status == true){
                        alert('points added');
                    }
                    else{
                        alert('points not added');   
                    }
                }
            });

            return false;
        }
    });


</script>
    </head>
    <body>
<?php

$localhost = "localhost";
$username = "root";
$password = "";
$connect = mysqli_connect($localhost, $username, $password) or die ("Kunde inte koppla");
mysqli_select_db($connect, 'wildfire');

if(count($_GET) > 0){
   $answerPoint = intval($_GET['radiobtn']);
   $qid = intval($_GET['qid']);

   $sql2 = "INSERT INTO result (qid, points) VALUES ($answerPoint, $qid)";
   $connect->query($sql2); 
   $lastid = $connect->insert_id;
   if($lastid>0)
    echo json_encode(array('status'=>1));
   else
    echo json_encode(array('status'=>0));
}

$qid = 1;
if(count($_POST) > 0){
    $qid = intval($_POST['qid'])+1;

}


?>



<form method="post" action="">
<input type="hidden" name="qid" id="qid" value="<?=$qid?>">
<?php
$sql1 = mysqli_query($connect,"SELECT * FROM question where answer != '' && qid =".intval($qid));
while($row1=mysqli_fetch_assoc($sql1)){
?>
<input type='radio' name='answer1' class="radiobtn" value="<?php echo $row1['Point'];?>">
<?php echo $row1['answer'];?><br>
<?php
}
?>
<?php if ($qid <= 8) {  ?>
<button type="button" onclick="history.back();">Tillbaka</button>
<button type="submit">Nästa</button>
<?php } else { ?>
<button id="submitAjax" type="submit">Avsluta provet</button>
     <?php } ?>  
</form>



<?php
if(count($_GET) > 0){
   $answerPoint = intval($_GET['radiobtn']);
   $qid = intval($_GET['qid']);

   $sql2 = "INSERT INTO result (points,qid) VALUES ($answerPoint, $qid)";
   $connect->query($sql2); 
   $lastid = $connect->insert_id;
   if($lastid>0)
    echo json_encode(array('status'=>1));
   else
    echo json_encode(array('status'=>0));
}

?>

    </body>


</html>

have you looked at your browser console/developer tools to see if the ajax has fired, and what data was sent? — Sean
– Sean, Commented Jan 2, 2016 at 19:46
One quick spot. Your binding logic is in your head and not surrounded by a document ready. It's not going to find your elements to bind on. — Taplar
– Taplar, Commented Jan 2, 2016 at 19:51
Is all this code in the same file? Are you doing an ajax to that same page/code? — Sean
– Sean, Commented Jan 2, 2016 at 19:52
Then one of your biggest issues is that you $.ajax is expecting json back - dataType: "json",, but when you do an $.ajax back to this same page, it is going to send ALL of you html code, including the <html><head>..., which is invalid json. So you either need to split this into multiple pages of code, or use php to check if you are doing an ajax call and only display the json. — Sean
– Sean, Commented Jan 2, 2016 at 20:17
@php-scrub yes sean is right I forgot it.. try it as he suggest — devpro
– devpro, Commented Jan 2, 2016 at 20:24

Taplar · Accepted Answer · 2016-01-02 19:56:23Z

1

$("#submitAjax").click(function(){

That line is binding the logic to your button in your header. However, it is not in a $(document).ready(function(){ ... }); or $(function(){ ... });

This means that it will execute before the rest of the page is loaded into the DOM, in which case it will not find the button you want to bind on and will do nothing.

You should surround your logic in a document ready or place it at the end of your body so your elements will exist at the time you try to look them up to bind on them.

answered Jan 2, 2016 at 19:56

Taplar

25k4 gold badges24 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

Using AJAX to submit form values to database

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related