Question

我想在用户点击确认框上的确定后插入值。现在确认框效果很好。我能看到的唯一问题是，当用户单击“确定”时，我希望INSERT VALUES发生在单独的页面上（insertQuestion.php），但我不希望将表单导航到该页面。我希望表单能够按照它自己的页面进行导航，或者根据情况提交给create_session2.php。

那么在用户点击确认框中的“确定”后，如何在不将用户导航到该页面（insertquestion.php）的情况下将值插入数据库？

我尝试过使用Jquery来执行AJAX请求，但这已经失败了（Jquery代码位于底部）

下面是显示确认框的javascript代码，如果确认为“OK”，则提交表单：

 function showConfirm(){

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

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

 function submitform()
            {

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

          QandAO.submit();

            }

以下是INSERT VALUES代码（已经连接到DB并且在insertQuestion.php页面上，发布的值来自上一页）：

       $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);

现在下面是php和form标签，其中要插入的值来自：

  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>

Answer 1

ajax功能失败了什么？对我来说它看起来不错，可能应该是你想要的方式。我可能会添加一个

return false;

作为点击功能的最后一行，否则它可能会提交表格两次（第二次你不想要的方式）

$("#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;
});

你的html必须像：

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

Answer 2

在您的insertQuestion.php中，执行mySQL查询后，将响应返回给客户端。像这样的事情

mysql_query($questionsql);
echo "Added";

所以在你的帖子调用中，一旦jQuery post调用对inert.php文件的调用，数据变量将获得该值

假设您的提交按钮ID为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
});

如果您在提交按钮单击中调用上述javascript，则应在结尾处执行return false，否则将进行正常的表单提交，您将无法注意到它执行了ajax post。

编辑：根据问题更新

删除提交按钮的onclick事件，因为您已经在javascipt中绑定了它

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

在你的javascript中（在按钮点击中），你在窗体上调用val（）函数。你不会得到表格内容。您要将什么内容发送到insertQuestion.php页面，这是一个文本框值吗？然后阅读具体的这个

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

假设您的页面中有一个ID为“txtAnswer”的文本框

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

如果要发送整个表单，可以使用序列化功能

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

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

使用firebug查看您在$ .post调用中发送的数据（网络标签）以及页面中是否存在任何脚本错误（控制台选项卡）

Answer 3

如果用户点击“确定”按钮，则您的submitform（）函数正在通过JavaScript执行表单提交。问题是你的AJAX jQuery代码甚至没有被运行，因为提交不会触发点击事件。

为了让你的AJAX调用正常工作，你需要修改你的submitform（）函数来直接进行AJAX提交。作为一个学习的开始，从jQuery代码示例中的匿名函数中获取代码，并用它替换submitform（）函数中的代码（之后它也返回false - 这将阻止OK按钮执行它的“默认”行为）。

如何修复下面的这个jquery

3 个答案: