Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • submit php form using xmlhttprequest ?

    • 0
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 1.93k
    Answer it

    i have this code for submitting an online exam and i submit this page using javascript xmlhttprequest(pure javascript no Jquery) and i have three parameters the question id arrays and answers and the numbers of rows 

     

     

    <?php
    require_once ("../templates/header.php");
     ?>
    <?php
        require_once ("../core/initialize.php");
     ?>
    <?php $total_of_questions = null; ?>
    <div class="container">
        <div>
            <span class="total-of-questions" style="margin-right: 10px;font-size: 19px;">   <?php echo $total_of_questions; ?></span>
            <span class="exam-time" style="float: left;margin-left: 10px;font-size: 19px;">     :  30 </span>
        </div>
     <div class="submit-exam-div" id="submit-exam-div">
    <?php
    if (isset($_POST["exam-submit-button"])) {
    
        $questions_id_array = $_POST["questions_id_array"];
        $total_questions = $_POST["rowCount"];
        $exam -> correct_exam($questions_id_array, $total_questions);
    
    } // End of submit
    ?>    
     </div> <!------End Of Submit Div-------->
     
     <div class="spinner" id="spinner" style="display: none;">
         <img src="../multimedia/ajax_spinner/ajax-spinner.gif" />
     </div>
     
     <div class="question-div" id="question-div" style="display: block;">   
    <form action="<?php echo $_SERVER["PHP_SELF"];   ?>" method="post" id="exam-form" name="exam-form">
    <?php
    //$question_type_id = 2 ;
    //$question_type_id = isset($_GET["question_type_id"]) ?  $_GET["question_type_id"] :  false ; 
    $question = $exam->find_question_for_exam(2);
    $rowCount = $question->rowCount();
    $total_of_questions = $question->columnCount();
    $question_rows = $question->fetchAll(PDO::FETCH_CLASS,"Exam");
    $question_number = 1 ;
      foreach ($question_rows as $question_row ):?>
    <hr style="border: 1px  dotted #E38D33; width: auto; "/>
    <ol>
    		<p style="font-size: 19px;margin-right:10px; margin-bottom: 10px;">    <?php echo $question_number; ?> # </p>
            <p style="font-size: 22px;"><?php echo $question_row -> question_text; ?></p>
            <?php $question_number++; ?>
    <?php
     // Get answers from Database
     $answer = $exam->find_answer_for_question($question_row->question_id);
     $answer_rows = $answer->fetchAll(PDO::FETCH_CLASS,"Exam");
     foreach ($answer_rows as $answer_row):?>
            <li style="font-size: 20px;"><input type="radio" name="answer<?php echo $question_row -> question_id; ?>" value="<?php echo $answer_row -> answer_text; ?>" />
            <?php echo $answer_row -> answer_text . "<br />"; ?></li>
       <?php endforeach ; // End foreach for answers fetch ?>   
    <li><input type="hidden" name="questions_id_array[]" value="<?php echo $question_row -> question_id; ?>" ></li>
    </ol>
       <?php endforeach ; // End foreach for questions fetch ?>
    <hr style="border: 1px  dotted #E38D33; width: auto; "/>
        <input type="hidden" name="rowCount" value="<?php echo $rowCount; ?>" >
        <!---<input type="submit" name="question_submit" id="question-submit" value=" " />---->
        <button name="exam-submit-button" id="exam-submit-button" > </button>
    </form>      
    </div> <!------End of question DIV----------->
    </div> <!------End of container DIV----------->
    <?php //require_once ("../templates/footer.php"); ?>
    <script type="text/javascript">
    
    	var spinner = document.getElementById("spinner");
    
    	function showSpinner() {
    
    		spinner.style.display = "block";
    	}
    
    	function hideSpinner() {
    
    		spinner.style.display = "none";
    	}
    
    	function submitExam() {
    
    		var xmlhttp;
    
    		var submit_exam_div = document.getElementById("submit-exam-div");
    
    		var answer = document.getElementById("answer").value;
    		var questions_id = document.getElementById("questions_id_array").value;
    		var row_count = document.getElementById("rowCount").value;
    
    		var input_parameters = "answer=" + answer + "&questions_id=" + questions_id + "&row_count=" + row_count;
    
    		xmlhttp = new XMLHttpRequest();
    		xmlhttp.open("POST", "exam.php", true);
    		xmlhttp.setRequestHeader("Content-Type,application/x-www-form-urlencoded; charset=UTF-8");
    		xmlhttp.onreadystatechange = function() {
    
    			if (xmlhttp.readyState == 2) {
    
    				showSpinner();
    
    			}
    
    			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    
    				hideSpinner();
    
    				submit_exam_div.innerHTML = xmlhttp.responseText;
    
    			}
    		};
    
    		xmlhttp.send(input_parameters);
    
    	}
    
    	var question_submit = document.getElementById("exam-submit-button");
    	question_submit.addEventListener("click", submitExam);
    
    	function hideQuestionDiv() {
    		var question_div = document.getElementById("question-div");
    
    		if (question_div.style.display = "block") {
    			question_div.style.display = "none";
    			return true;
    		} else {
    			question_div.style.display = "block";
    			return false;
    		}
    	}
    
    	var button = document.getElementById("exam-submit-button")
    	button.addEventListener("click", hideQuestionDiv);
    </script>
    <pre>
    	<?php print_r($_POST); ?>
    </pre>
    

     

 1 Answer(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: