0

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" + "\n" );

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

3 Answers 3

0

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)

8
  • Hi, Can I ask you to edit my jquery to what you are saying because I understand some of it but not all of it Apr 1, 2012 at 2:50
  • @user1304328 : Provide me more details. we can figure it out
    – Shyju
    Apr 1, 2012 at 2:51
  • Ok, if you can bear with me I will update the full code showing form tag and html code if you can bear with me because I do really need help on this :) Apr 1, 2012 at 2:55
  • @user1304328 : Provide more (but necessary) details. We can look into that.
    – Shyju
    Apr 1, 2012 at 3:01
  • I have included the php code and the form code where the 2 values I want to insert into DB come from. Hopefully this would help you :) Apr 1, 2012 at 3:12
0

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">
1
  • I will worry about inserting values later, at moment I just want an alert to appear to show it has recognised that it has gone into the 'insertQuestion.php' page Apr 1, 2012 at 2:51
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.