PHP - 動態反饋？

Question

我在我的網站上有一個基本的註冊表單，我只是想知道什麼是最好的方法是自動給輸入字段提供反饋，而不必按下提交按鈕。

例如，當用戶輸入他們的用戶名時，如何讓系統告訴他們在按下提交按鈕之前用戶名是否已被採用？

Regards

Answer 1

兩個選項。對於任何給定的反饋，您可以：

1. 向頁面提供所需的所有信息以提供反饋，可能是JavaScript代碼。然後，當用戶輸入代碼將執行其計算並作出相應反應的值時。
2. 通過AJAX查詢服務器運行服務器端計算以提供反饋。

例如：

在第一種情況下，你可能要對證可能值小靜列表。所以，你可能會發出這些值轉換爲JavaScript加載頁面時：

var possibleValues = [ 'firstValue', 'secondValue', 'thirdValue' ]; 

（我知道，一個select將更有意義，這裏是這樣，但是這僅僅是例子的緣故）

然後當輸入發生變化，JavaScript代碼將根據已知值檢查輸入並相應地響應用戶。

在第二種情形中，或許還有很多可能值，或者你不希望用戶看到所有可能的值（如用一個用戶名）和只想告訴他們，如果它是有效的或不。在這種情況下，您可以使用用戶提供的信息發出AJAX請求。可能是這樣的：

$.post("checkvalue.php", { name: $('#someInput').val() }) 
.done(function(data) { 
    // check the result from the server and respond to the user accordingly 
}); 

無論哪種情況，您都在編寫JavaScript代碼來響應用戶的輸入。唯一的區別在於JavaScript代碼獲取數據的位置或執行數據計算的位置。

Answer 2

您必須使用JavaScript來做到這一點。你可以在keyup或blur（至少這些可能會最好）。如果您在打字時需要反饋，請使用keyup。 blur，或者如果用戶可以先聚焦（移動到下一個區域），那麼它就可以工作。 KeyUp事件可能是這個樣子：

var lastTime = 0; 
input.addEventListener("keyup", function() { 
    clearTimeout(lastTime); 

    // throttle input -- only check after 500 seconds 
    setTimeout(function() { 
     ajax.get("username-check.php?name=" + this.value) 
      .done(function (used) { 
       if (used) { 
        this.classList.add("error"); 
       } 
      }.bind(this)); 
    }.bind(this), 500); 
}); 

Answer 3

使用onchange事件的字段使用Ajax向服務器發送一個請求。然後檢索響應並將結果顯示給用戶。

實施例的jQuery：

$('#username').on('change', function() { 
     //Create object to pass 
     var o = new Object(); 
     o.UserName = $('#username').val(); 

     //Stringify object into JSON 
     var x = JSON.stringify(o); 

     $.ajax({ 
      url: 'phpURL', 
      type: 'GET', 
      dataType: 'JSON', 
      data: x, 
      success: function (data) { 
       //Display Results (i.e Name taken/Name available) 
      }, 
      error: function (ajaxrequest) { 
       //Display a helpful error to the user or log this error for your use. 
       //ajaxrequest.responseText 
      } 
     }) 
    });