Question

我有四个标签，此输入文本位于第二个标签视图中。我有两个按钮（后面和下一个）。当我在最后一个标签中时，我想在按下下一个按钮时从该输入文本中检索值，但它总是给出一个空值或未定义的值，我不知道如何解决它。我有一个带有html代码的文本框，如下所示：

<div class="container-fluid add-report-field" style="background-color:white">
       <div class="tabbable js-report-tab-container" >
              <div class="tab-content">

                <div class="tab-pane" id="tab1">
                  <div class="form-group">
                  <label>Report Title</label>
                  <input type="text" name="js-report-title-step-2" id="js-report-title-step-2" class="form-control js-report-title-step-2"  placeholder="Report Title" value="Report Title">
                </div>
           </div>
       </div>
</div>

我只想尝试检索它的价值。我在我的console.log中试过这个：

console.log($("input[name=js-report-title-step-2]").val());
console.log($("#js-report-title-step-2").val());
console.log($("#js-report-title-step-2").text());
console.log($(".js-report-title-step-2").attr("value"));
console.log($("input:text").val());

但上述方法都不适合我

这里的问题是什么...... ???

注意：这是console.log（$）：

Answer 1

undefined表示集合为空，因为输入的.value属性只能是DOMString而不是undefined。在将元素添加到DOM之前，您可能正在查询DOM。要么在执行代码时使用.ready方法或确保元素存在于DOM中，您可以通过将script标记放在目标元素之后来执行此操作。

Answer 2

要获取输入字段的值，您应该使用val()。在您的情况下，由于获得undefined，您应该确保您的代码位于$(document).ready(function(){})或更简单$(function(){})。

$(function(){
  alert($('input').val());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="js-report-title-step-2" id="js-report-title-step-2" class="form-control js-report-title-step-2"  placeholder="Report Title" value="Report Title">

Answer 3

试一试：

$(document).ready(function(){

    $ele = $(".add-report-field").find("input[name=js-report-title-step-2]");

    console.log($ele.val());

})

最终代码：

<!DOCTYPE html>
<html>
<head>
    
</head>
<body> 
    <div class="container-fluid add-report-field" style="background-color:white">
       <div class="tabbable js-report-tab-container" >
              <div class="tab-content">
                <div class="tab-pane" id="tab1">
                  <div class="form-group">
                  <label>Report Title</label>
                  <input type="text" name="js-report-title-step-2" id="js-report-title-step-2" class="form-control js-report-title-step-2"  placeholder="Report Title" value="Report Title">
                </div>
           </div>
       </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>        
    $(document).ready(function(){

        $ele = $(".add-report-field").find("input[name=js-report-title-step-2]");

        console.log($ele.val());


    })
    </script>
</body>
</html>

如何从另一个标签视图中检索输入文本值

3 个答案: