Question

所以我将这两个输入字段用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（）也返回一些空的东西。你能指点我正确的方向吗？

Answer 1

应为'#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>

Answer 2

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

https://jsfiddle.net/wy8z7b2k/

＆＃13;

$('#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
  }
});

＆＃13;

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

＆＃13;

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

<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元素进行通信。在这种情况下，我们通过按钮元素使用click事件。

这里是working sample

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

4 个答案: