如何在下面修复此jquery

I want to INSERT VALUES after user has clicked OK on the confirmation box. Now the confirmation box works well. The only problem I can see is that when the user clicks 'OK' I want the INSERT VALUES to happen on a seperate page (insertQuestion.php) but I do not want the form to be navigated to that page. I want the form to navigate the way it is doing which is either submit to its own page or submit to create_session2.php depending on the situation.

So how can I INSERT VALUES into the database without navigating the user to that page (insertquestion.php) after the user has clicked 'OK' in the confirmation box?

I have tried using Jquery to perform an AJAX request but this has failed (Code of Jquery is at the bottom)

below is the javascript code where the confirmation box appears and if confirmation is 'OK', it submits the form:

 function showConfirm(){

             var confirmMsg=confirm("Do you want to Proceed" + "
" );

             if (confirmMsg==true)
             {
             submitform();   
         }
    }

 function submitform()
            {

        var QandAO = document.getElementById("QandA");

          QandAO.submit();

            }

Below is the INSERT VALUES code (already connected to DB and is on insertQuestion.php page wile the values posted are from the previous page):

       $insertquestion = array();

      {
        $insertquestion[] = "' ". mysql_real_escape_string( $_POST['id'] ) . "', ' ". mysql_real_escape_string( $_POST['qid'] ) . "'";
      }

      $questionsql = "INSERT INTO Question (SessionId, QuestionId) 
      VALUES (" . implode('), (', $insertquestion) . ")";

mysql_query($questionsql);

Now Below is the php and form tag where the values which are going to be inserted come from:

  function insertQuestion(form) {

        var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
    var $qid = $("<td name='qid' class='qid'>" + qnum + "</td>"); 
    //I am trying to insert the $qid above in the INSERT VALUES

    }

    </script>

    <form id="QandA" action="<?php echo htmlentities($action); ?>" method="post" >

<h1>CREATING QUESTIONS AND ANSWERS: SESSION (<?php echo $_SESSION['id'] ?>) 
//I am trying to insert the $_SESSION['id'] above in the INSERT VALUES

<table id="qandatbl" align="center">
<thead>
<tr>
    <th class="qid">Question No</th>
</tr>
</thead>
<tbody>//the $qid would go here</tbody>
</table>

<p><input id="submitBtn" name="submitDetails" type="submit" value="Submit Details" onClick="myClickHandler(); return false;" /></p>

</form>

What was the failure in the ajax function? To me it look ok, and probably that should be the way to do what you want. I would maybe add a

return false;

as the last line of the click function, otherwise it probably submits the form twice (2nd time the way you don't want)

$("#submitBtn").click(function() {
   var form = $("#QandA");
   $.post("insertQuestion.php", //send it to yourpage.php
       {
          id: form.find("[name=id]").val(),
          sessionNum: form.find("[name=sessionNum]").val()
       }, function(data) {
         alert("Your Questions has been submitted");  
       }
   );
    return false;
});

and your html has to be like:

<input id="id" name="id">

In your insertQuestion.php, After executing your mySQL query, Return a response back to the client. Some thing like this

mysql_query($questionsql);
echo "Added";

So in your post call, the data variable will get that value once the jQuery post call make a call to the inert.php file

Assuming your submit button id is submitBtn

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

    var fieldvalue = $("#QandA").val();
    $.post("insertQuestion.php", {  field1: fieldvalue} ,function(data){
       //data variable now has the reponse from the ajax call
      alert(data);
    });
  return false;  // preventing the typical form submit
});

If you are calling the above javascript in a submit button click, you should do a return false at the end, otherwise it will go for the normal form submitting and you will not be able to notice that it did an ajax post.

EDIT : As per the question update

Remove the onclick event of the submit button as you are already binding it in your javascipt

<input id="submitBtn" name="submitDetails" type="submit" value="Submit Details" />

in your javascript (in button click), you are calling the val() function on the form. You will not get the form content by that. What are you trying to send to the insertQuestion.php page, Is that a textbox value ? then read that specifically like this

 var fieldValue=$("#txtAnswer").val();

Assuming you have a text box with an id "txtAnswer" like this in your page

<inpuy type="text" id="txtAnswer" />

If you want to send the entire form , you may use serialize function

   $.post("insertQuestion.php", $("#QandA").serialize ,function(data){
       //now you posted the entire form to insertQuestion.php
      alert(data);
    });

http://api.jquery.com/serialize/

Use firebug to see what data you are sending in the $.post call(net tab) and if there is any script errors in the page (console tab)

Your submitform() function is performing a form submit via JavaScript if the person clicks the OK button. The problem is that your AJAX jQuery code isn't even being run because a submit doesn't trigger a click event.

In order to have your AJAX call work properly, you need to modify your submitform() function to do the AJAX submit directly. As a learning start, take the code from within the anonymous function in your jQuery code example and replace the code in your submitform() function with it (have it return false afterwards too - this will prevent the OK button from doing it's "default" behaviour).