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

在您定义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>

将输入值更新为用户输入

2 个答案: