Search code examples
javascriptphpjqueryajaxbootbox

Submit checkbox form after calling e.preventDefault()


i just don't seem to get it right, i have tried all the methods and yet i can't get the form to submit after confirmation

It's basically a quiz system, am outputting the response whether the answer is correct or not before submitting, its showing the response but when i click on ok, its not submitting the form to take me to another question

<form id="form" method="post" action="javascript:void(0)">
     <ul class="choices">
      <?php while($row=$choices->fetch_assoc()): ?>
      <li><input name="choice" type="radio" value="<?php echo $row['id']; ?>"/>
        <?php echo $row['choice']; ?>
    </li>
      <?php endwhile; ?> 
    <input type="submit" id="submit" name="submit1" value="Gönder"/>
    <input type="hidden" name="number" value="<?php echo $number; ?>"/>

</form>

and the Bootbox.js code

<script src="../../css/bootbox.min.js"></script>
<script src="../../css/bootbox.locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootbox/4.4.0/bootbox.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootbox/4.4.0/bootbox.min.js"></script>
<script>
<?php
 $lesson = (int) $_GET['l']; 
 $number = (int) $_GET['n'];
 $q = "select * from `choices_tr` where question_number = $number and is_correct=1 and lesson_number=$lesson";
    $result = $mysqli->query($q) or die($mysqli->error.__LINE__);
    $row = $result->fetch_assoc();
    $correct_choice=$row['id'];
    $ChoiceFull=$row['choice'];
?>

$('form').on('click', "input[type='submit']", function(e){
            var radioValue = $("input[name='choice']:checked").val();   
            if(radioValue){
        if(radioValue==<?php echo $correct_choice;?> ){
            e.preventDefault();
            var currentTarget = event.target;
  bootbox.alert({
      closeButton: false,
          message: '<center><i class="fa fa-check" style="font-size:48px;color:green"></i></center>',

    callback: function (result) {
    if (result === null) {
        } else {
           $.ajax({ url: "process3.php?l=<?php echo $lesson; ?>",
            type: "post", 
            data: [$("input[name='choice']:checked").serialize()], 
            success: function(data){ alert('success'); } }); 
        }

},

});
setTimeout(function(){
    box.modal('hide');
}, 3000);   
                    }


else {

   e.preventDefault();
  bootbox.alert({
    closeButton: false,
         message: '<center><i class="fa fa-times" style="font-size:48px;color:red"></i></center><br /> Maalesef yanlış. Doğru cevap: <?php echo $ChoiceFull; ?> <br /> <?php echo $questionac['explanation'] ?>',
    callback: function (result) {

    }
});

                }
            }


               });

</script>

process.php

<?php include 'database.php'; ?>
<?php session_start();
 $_SESSION["login_redirect"] = $_SERVER["PHP_SELF"];?>
<?php 

      //Check to see if score is set_error_handler
    if (!isset($_SESSION['score'])){
        $_SESSION['score'] = 0;
        $_SESSION['question']=array();
        $_SESSION['answer']=array();
    }


//Check if form was submitted
if($_POST){

    $number = $_POST['number'];
    $selected_choice = $_POST['choice'];
    $next=$number+1;

    $lesson = (int) $_GET['l']; 

    //Get total number of questions
    $query = "select * from questions_tr where lesson_number = $lesson";
    $results = $mysqli->query($query) or die($mysqli->error.__LINE__);
    $total=$results->num_rows;

    //Get correct choice
    $q = "select * from `choices_tr` where question_number = $number and is_correct=1 and lesson_number=$lesson";
    $result = $mysqli->query($q) or die($mysqli->error.__LINE__);
    $row = $result->fetch_assoc();
    $correct_choice=$row['id'];
    $ChoiceFull=$row['choice'];

    $fullquestionq = "select * from `questions_tr` where question_number = $number and lesson_number=$lesson";
    $resultful = $mysqli->query($fullquestionq) or die($mysqli->error.__LINE__);
    $resultrow = $resultful->fetch_assoc();
    $QuestionFull=$resultrow['question'];


    //compare answer with result
    if($correct_choice == $selected_choice){
        $_SESSION['score']++;
    }else{
        $_SESSION['question'][$next-1] = $QuestionFull;
        $_SESSION['answer'][$next-1] = $ChoiceFull;
    }


    if($number == $total){
        header("Location: final3.php");
        exit();
    } else {
            header("Location: Bolum3.php?n=".$next."&l=$lesson&score=".$_SESSION['score']);
    }
}
?>

Solution

  • firstly do this copy this script

    <script>
    <?php
     $lesson = (int) $_GET['l']; 
     $number = (int) $_GET['n'];
     $q = "select * from `choices_tr` where question_number = $number and is_correct=1 and lesson_number=$lesson";
        $result = $mysqli->query($q) or die($mysqli->error.__LINE__);
        $row = $result->fetch_assoc();
        $correct_choice=$row['id'];
        $ChoiceFull=$row['choice'];
    ?>
    
    $('form').on('click', "input[type='submit']", function(e){
                var radioValue = $("input[name='choice']:checked").val();  
                var number = $("input[name='number']"); 
                var lesson = <?=$lesson; ?>
                if(radioValue){
            if(radioValue==<?php echo $correct_choice;?> ){
                e.preventDefault();
                var currentTarget = event.target;
      bootbox.alert({
          closeButton: false,
              message: '<center><i class="fa fa-check" style="font-size:48px;color:green"></i></center>',
    
        callback: function (result) {
        if (result === null) {
            } else {
               $.ajax({ 
                url: "process3.php?l=<?php echo $lesson; ?>",
                type: "post", 
                data: 'choice='+radioValue+'&number='+number+'&lesson='+lesson, 
                success: function(data){ alert('success'); } }); 
            }
    
    },
    
    });
    setTimeout(function(){
        box.modal('hide');
    }, 3000);   
                        }
    
    
    else {
    
       e.preventDefault();
      bootbox.alert({
        closeButton: false,
             message: '<center><i class="fa fa-times" style="font-size:48px;color:red"></i></center><br /> Maalesef yanlış. Doğru cevap: <?php echo $ChoiceFull; ?> <br /> <?php echo $questionac['explanation'] ?>',
        callback: function (result) {
    
        }
    });
    
                    }
                }
    
    
                   });
    
    </script>
    

    then now time is your php

    if($_POST){
    
        $number = $_POST['number'];
        $selected_choice = $_POST['choice'];
        $next=$number+1;
        // you didn't send any get request remove this
        //$lesson = (int) $_GET['l']; 
        $lesson = $_POST['lesson'];
         // I found mistake till here and other code it depends on your code
    
        //Get total number of questions
        $query = "select * from questions_tr where lesson_number = $lesson";
        $results = $mysqli->query($query) or die($mysqli->error.__LINE__);
        $total=$results->num_rows;
    
        //Get correct choice
        $q = "select * from `choices_tr` where question_number = $number and is_correct=1 and lesson_number=$lesson";
        $result = $mysqli->query($q) or die($mysqli->error.__LINE__);
        $row = $result->fetch_assoc();
        $correct_choice=$row['id'];
        $ChoiceFull=$row['choice'];
    
        $fullquestionq = "select * from `questions_tr` where question_number = $number and lesson_number=$lesson";
        $resultful = $mysqli->query($fullquestionq) or die($mysqli->error.__LINE__);
        $resultrow = $resultful->fetch_assoc();
        $QuestionFull=$resultrow['question'];
    
    
        //compare answer with result
        if($correct_choice == $selected_choice){
            $_SESSION['score']++;
        }else{
            $_SESSION['question'][$next-1] = $QuestionFull;
            $_SESSION['answer'][$next-1] = $ChoiceFull;
        }
    
    
        if($number == $total){
            header("Location: final3.php");
            exit();
        } else {
                header("Location: Bolum3.php?n=".$next."&l=$lesson&score=".$_SESSION['score']);
        }