2013-01-03 141 views
1

我有这个代码,要求用户输入值并提交。php到表单提交jquery

HTML

<form id="myForm" method="post" action="saving.php"> 
      <p><label for="input1">Input 1:</label> 
       <input type="text" size="10" name="input1" id="input1" /> 
      </p> 
      <input id="save" name="save" type="submit" value="save" /> 
    </form> 
    <p><span id="thevalue"></span><span id="existornot"></span></p> 

JS

$("#myForm").submit(function(event) {  
    event.preventDefault();  
    $("#myForm").validate(
     {  rules: {input1: "required",}, 
      messages: {input1: "message error input"}, 
      }); 
    if($("#myForm").valid()){ 
     var $form = $("#myForm"), 
     url = $form.attr("action"), 
     insertedVal=$("#input1").val(); 

     $.post(url,{input1:insertedVal}, 
      function(){ 

      //displaying value condition 
      $("#thevalue").html(insertedVal); 
      // ... msg from php to be inserted to #existornot 

      }); 
     } 
}); 

saving.php

<?php 
    if(!empty($_POST['input1'])) 
    { 
    $inputone= mysql_real_escape_string(trim($_POST['input1'])); 
    $result = mysql_query("SELECT COUNT(*) FROM `test_table` WHERE `name` = '$inputone' "); 
     if (mysql_result($result, 0, 0) > 0) 
     { 
     echo "is duplicate data" ; 
     } 
     else 
     {  
     mysql_query("INSERT INTO `test_table`(name) VALUES ('$inputone')") ; 
     echo "is updated to db" ; 
     } 
    } 
    else 
    { 
    echo "could not be empty" ; 
    } 

?> 

如何通过的 '是重复数据' 或 '被更新为DB' 从那些消息PHP的javasript,告诉用户,提交过程失败或成功?

在此先感谢您的任何建议。

回答

1

更改jQuery的岗位后的函数调用接受数据变量和处理结果:

$.post(url,{input1:insertedVal}, 
     function(data){ 

     //displaying value condition 
     $("#thevalue").html(insertedVal); 
     // ... msg from php to be inserted to #existornot 

     if (data != 'is updated to db') { 
      alert(data); 
     } 

     }); 
    } 

(数据将包含什么在你的保存功能被呼应)

+0

非常感谢df :) –

0

像这样:

$.post(url,{input1:insertedVal}, 
     function(data){ 

     //displaying value condition 
     $("#thevalue").html(insertedVal); 
     // ... msg from php to be inserted to #existornot 
     $("#existornot").html(data); 

     }); 
    } 

通过添加“数据”变量回调函数(),该“数据”变量将与任何PHP回声的作为输出更新。然后,您可以将该“数据”插入到回调函数中的#existornot中。

请在这里看到的API:http://api.jquery.com/jQuery.post/

0

如果你想打印从PHP返回的值请检查jQuery的$。员额

$.post(url,{input1:insertedVal}, 
      function(data){ 
      //displaying value condition 
      $("#somediv_id").html(data); 
      $("#thevalue").html(); 
      // ... msg from php to be inserted to #existornot 

}); 
0

$ .post回调函数将传递一个包含服务器响应的参数。所以,你的$。员额的要求应该像

$.post(url, {input1: insertedVal}, function(response) { 
    console.log(response); // should output the server message echoed. 
}); 

这也是通常最好使用JSON作为服务器响应。

1

php文件的响应是在ajax回调函数中。所以你应该一个参数添加到您的函数是这样的:

$.post(url,{input1:insertedVal},function(resp) 
{ 
    // resp is the callback from php. 
    console.log(resp); 
    $("#thevalue").html(insertedVal); 
}); 

欲了解更多信息Ajax如何工作,你可以按照这个链接:5 Ways to Make Ajax Calls with jQuery
,希望能帮助。

+0

谢谢你的链接。 –

+0

@FreeSoul yw,如果答案是有帮助的话,请将它投票:) –

+0

对不起,我还不能投票:D需要15个代表来做到这一点。 –