自定義輸入框的行爲

我有一些簡單的HTML：自定義輸入框的行爲

First name: <input type="text" name="fname"><br> 
    Last name: <input type="text" name="lname"><br> 
    <input type="submit" value="Submit">

我希望做的是使用JQuery提交此表和存儲什麼是在數據庫中輸入。那麼頁面，無需刷新將更新，以顯示：

<p>Thanks for submitting $fname + $lname</p>

我也想對將要創建一個cookie，這樣如果同一用戶訪問該網站，它總是會顯示此消息，而不是強迫他們多次查看輸入表單。

我這樣做的最好方法是什麼？我怎樣才能使用JQuery來做到這一點？有更好的選擇嗎？使用PHP很簡單，但我希望它儘可能地交互，而我的示例只是我將要使用的一個非常簡單的表示:)。

來源

2013-05-17 Simon Kiely

你面臨的任何問題，在你的代碼，同時實現？ – 2013-05-17 05:05:10

您可以使用jQuery Ajax。

這是非常簡單的：你需要添加jQuery的文件在你的頭標記像這樣的第一：

<!-- Add jquery library --> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     $("#btnSubmit").click(function(){ 
      var fname = $("#fname").val(); 
      var lname = $("#lname").val(); 
      $.ajax({ 
       url : "updateDb.php", // php file where you write your mysql query to store value 
       type : "POST", // POSTmethod 
       data : {"fistname":fname,"lastname":lname}, 
       success : function(n){ 
         // after success you can alert popup here 
         // also set you cookies here 
         // I have also function for set cookie through javascript 
         setCookie("username",fname,30); 
       } 
      }); 
     }); 
    }); 

    function setCookie(c_name,value,exdays) 
    { 
     var exdate=new Date(); 
     exdate.setDate(exdate.getDate() + exdays); 
     var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); 
     document.cookie=c_name + "=" + c_value; 
    } 
</script> 
</head> 

<!-- Now your HTML code --> 
First name: <input type="text" name="fname" id="fname"><br> 
Last name: <input type="text" name="lname" id="lname"><br> 
<input type="button" value="Submit" id="btnSubmit"> 

<!-- Note : if you use input type=submit then page must load.so you need to remove that and use only button -->

來源

2013-05-17 05:58:12

自定義輸入框的行爲

回答

相關問題