如何使用 jquery 获取输入的新值答案

【问题标题】：How can I get the new value of an input with jquery如何使用 jquery 获取输入的新值
【发布时间】：2017-11-20 10:35:59
【问题描述】：

所以我有这两个用 html 编写的输入字段：

<div class="row">    
    <div class="col-md-12 form-group">
        <label>Name</label>
        <input type="text" name="doc name" class="form-control " id="doc-name">
    </div>
</div>
<div class="row">    
    <div class="col-md-12 form-group">
        <label>Number</label>
        <input type="text" name="doc number" class="form-control " id="doc-number">
    </div>
</div>

如果任一输入字段为空，我有一些 jquery 代码会返回错误：

if($('#doc-name').val() == '' || $('#doc-number').val =='')  {
    return false //this is completed with the actual error script but isn't important to the current issue
}

我实际遇到的问题是，即使在我完成输入字段之后， .val() 命令仍然返回一个空字符串，它没有返回我在这些输入中实际写入的内容。 .html() 或 .text() 也返回空的东西。你能指出我正确的方向吗？

【问题讨论】：

我不知道这是否是您的问题，但您在第一个选择器中缺少 '（$(#doc-name') 应该是 $('#doc-name')）以及几个括号和 id 选择器第二个（$('doc-number').val 应该是 $('#doc-number').val()）。
'doc-number' 也不是有效的选择器。大概你的意思是#doc-number。我强烈建议你在调试 JS 代码时检查控制台。
什么时候调用“if(...){}”？
我写的很匆忙，选择器的写法如你所说，正确，但即使在我完成输入后 $('doc-name').val() 字符串仍然为空一些文字。
这里的关键是你如何调用你的 if 语句。是什么触发了您的脚本运行？

标签： javascript jquery html input

【解决方案1】：

不确定这是否是您的意思。但是我在这里创建了一个示例，其中每个单击事件都会获取输入字段的值。

<input type="text" id="name"/>
<input type="text" id="number"/>
<button id="getvalue">Get value</button>

这是js

$(document).ready( function(){

$('#getvalue').click( function() {

    var nameVal = $('#name').val();
    var numVal = $('#number').val();

    if(nameVal == '' || numVal == ''){
        alert('Empty fields.')
    }else{
        alert('Name is ' + nameVal + ' and Number is ' + numVal);
    }

});
});

您需要有一个触发事件，以便 javascript 与您的 html 元素进行通信。在这种情况下，我们通过按钮元素使用点击事件。

这是working sample

【讨论】：

【解决方案2】：

应该是'#doc-name' 和'#doc-number'：

if ($('#doc-name').val() == '' || $('#doc-number').val() == '') {
  alert('Error');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12 form-group">
    <label>Name</label>
    <input type="text" name="doc name" class="form-control " id="doc-name">
  </div>
</div>
<div class="row">
  <div class="col-md-12 form-group">
    <label>Number</label>
    <input type="text" name="doc number" class="form-control " id="doc-number">
  </div>
</div>

【讨论】：

sorry我写的比较匆忙，如你所说，但是值还是没有变，只是从html中获取原始值。

【解决方案3】：

当您从事件处理程序返回 false 时，它会阻止该事件的默认操作并阻止事件通过 DOM 冒泡。也就是说，它相当于这样做：

if($('#doc-name').val() == '' || $('doc-number').val == '')  {
alert('ok');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">    
    <div class="col-md-12 form-group">
        <label>Name</label>
        <input type="text" name="doc name" class="form-control " id="doc-name">
    </div>
</div>
<div class="row">    
    <div class="col-md-12 form-group">
        <label>Number</label>
        <input type="text" name="doc number" class="form-control " id="doc-number">
    </div>
</div>

【讨论】：

【解决方案4】：

这取决于您在何处/何时调用那段代码。在下面的示例中，它将在按下提交按钮时执行。

https://jsfiddle.net/wy8z7b2k/

$('#submit').click(function(e) {
  if ($('#doc-name').val() == '' || $('#doc-number').val() == '') {
    console.log('returning false');
    return false //this is completed with the actual error script but isn't important to the current issue
  }
});

<div class="row">
  <div class="col-md-12 form-group">
    <label>Name</label>
    <input type="text" name="doc name" class="form-control " id="doc-name">
  </div>
</div>
<div class="row">
  <div class="col-md-12 form-group">
    <label>Number</label>
    <input type="text" name="doc number" class="form-control " id="doc-number">
  </div>
</div>
<div class="row">
  <div class="col-md-12 form-group">
    <button id="submit">Submit</button>

  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

【讨论】：