更新用户输入的输入值

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> 

FIDDLE

Answer 2

您的HTML错误，你定义id="userName"两次。如果比较字符串，则始终需要===相同的运算符。试试这个片段：

// 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>

你想，没有击中 “送” 来更新值