將輸入值更新為用戶輸入

Question

我正在嘗試通過Ajax實時回顯用戶的輸入來更新頁面。 但是，當用戶鍵入內容並單擊“發送”時，沒有任何回聲。 但是，當我通過html將輸入預設為隨機單詞並單擊“發送”時，將顯示該單詞。 為什么會這樣？如何在不手動進行html的情況下更新輸入值？

HTML

<input type="text" id="userName" name="typeit" value=""/>
<!-- Input containing preset value -->
<input type="text" id="userName" name="typeit" value="cindy"/>
<input type="button" id="text_value" value="send"/>

JQuery的

// I used this to check if the actual input was being updated 
$('#text_value').click(function() {
var text_value = $("#userName").val();
if(text_value=='') {
alert("Please enter a title first");
}else{
alert(text_value);
}
});

Answer 1

我認為您想要的是鍵盤事件，例如keyup ：

$('#userName').keyup(function() {
    var text_value = $(this).val();
    if(text_value=='') {
      alert("Please enter a title first");
    }else{
      $("p").html(text_value);
    }
});

id也只能在頁面上使用一次，因此您需要更改其中之一：

<input type="text" id="userName" name="typeit" value=""/>
<!-- Input containing preset value -->
<input type="text" id="somethingElse" name="typeit" value="cindy"/>
<input type="button" id="text_value" value="send"/>

<!--for my example-->
<p>Update</p>

小提琴

Answer 2

在兩次定義id="userName" ，您的HTML中有一個錯誤。 如果比較字符串，則始終需要===相同的運算符。 試用以下代碼段：

 // I used this to check if the actual input was being updated $('#text_value').click(function() { var text_value = $("#userName").val(); if (text_value === '') alert("Please enter a title first"); else alert(text_value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="Uname" name="typeit" value="" /> <!-- Input containing preset value --> <input type="text" id="userName" name="typeit" value="cindy" /> <input type="button" id="text_value" value="send" /> <div id="test"></div>