输入文本框在 Javascript 中返回未定义答案

【问题标题】：Input Text Box Returns Undefined in Javascript输入文本框在 Javascript 中返回未定义
【发布时间】：2016-06-15 21:31:28
【问题描述】：

这是我的 HTML：

<form name='cred' class="panel-body2">
  <div class="form-group">
    <label for='addjidlbl'> Username (JID):</label>
    <input type='text' id='addjid' />
  </div>
  <input type='button' id='add' value='add' />
</form>

这里是 JavaScript：

$('#add').bind('click', function() {
  var jid = $('#addjid').value; 
  alert(jid);
  //var jid=document.getElementById('addjid').value;    
  var jid2 =$('#addjid').get(0).value; 
  alert(jid2);
  //  //$('#addjid').get(0).value; 
  log('jid=>'+jid);
  var data = document.getElementById("addjid").value; //$(".panel.panel-default2#addjid").value;
  alert(data);

  alert("type=>"+ typeof(jid));
  addRoster(jid);
});

function addRoster(jid) {
  log('addRoster=>' + jid);
}

我得到的是两个带有“未定义”的消息框和第三个带有“type => undefined”的消息框。为什么我无法获取addjid文本框的输入文本？

如果我更改var jid = $('#addjid').get(0).value;，即使文本框有值，jid 也只是空白。为什么？

【问题讨论】：

使用jquery方式获取值.val()...$('#addjid').val()
@PedroEstrada 它返回空白。
请在我的回答中查看代码 sn-p。
@PedroEstrada 谢谢你的解释。问题是我在这个标签之前有一个

标签： javascript jquery forms text box

【解决方案1】：

将 .value 更改为 .val() 就像

$('#addjid').value

应该是

$('#addjid').val()

【讨论】：

var jid=$('#addjid').val();警报（jid）；消息框是空白的。
您在文本框中输入了一些值后尝试过吗？

【解决方案2】：

在这里你可以使用.val()

在文本框中添加一些文本，然后点击添加按钮，会弹出提示

$('#add').on('click', function() {
  alert($('#addjid').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='cred' class="panel-body2">
    <div class="form-group">
      <label for='addjidlbl'> Username (JID):</label>
      <input type='text' id='addjid' />
    </div>
  <input type='button' id='add' value='add' />
</form>

【讨论】：

【解决方案3】：

如果我理解正确，你想要：

$('#addjid').val()

【讨论】：

【解决方案4】：

由于您使用 id 来获取值，因此您将只有一个具有给定 id 的元素。当您执行 .get(0) 或任何索引时，您通常会尝试从给定的值数组中获取值。防爆

<li>first</li> //0
<li>second</li> //1

在这样的结构中，您将执行类似的操作 $("li").get(0)

它会给你第一个带有 li 的项目。

要获得您需要使用的值 .val()

所以你可以使用

 $('#addjid').val()

希望对你有所帮助。

快乐学习:)

【讨论】：

很高兴它有帮助:) 请考虑接受这个问题