2013-01-03 144 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個代表來做到這一點。 –