如何使用documentid获取输入字段的值javascript

-1

此函数在HTML中使用jQuery和JavaScript，并且不按预期工作。如何使用documentid获取输入字段的值javascript

我正在使用带有preifed格式的daterange picker使用moment和bootstrap js。我需要从输入框中获取daterange值。无法在警报或控制台中获取日期范围。使用的getElementById需要获取日期范围内的值

$(function() { 
    var start = moment().subtract(29, 'days'); 
    var end = moment(); 
    function cb(start, end) { 
     $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); 
    } 
    $('#reportrange').daterangepicker({ 
     startDate: start, endDate: end, ranges: { 
      'Today': [moment(), moment()], 
      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 
      'Last 7 Days': [moment().subtract(6, 'days'), moment()], 
      'Last 30 Days': [moment().subtract(29, 'days'), moment()], 
      'This Month': [moment().startOf('month'), moment().endOf('month')], 
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] 
     } 
    }, cb); 
    cb(start, end); 
});

获取日期范围

function myFunction() { 
    var x = document.getElementById("reportrange").value; 
    console.log(x); 
    document.getElementById("demo").innerHTML = x; 
}

<html><!-- Include Required Prerequisites --> 
 
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" /> 
 
    
 
<!-- Include Date Range Picker --> 
 
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" /> 
 
<script type="text/javascript"> 
 
$(function() { 
 

 
    var start = moment().subtract(29, 'days'); 
 
    var end = moment(); 
 

 
    function cb(start, end) { 
 
     $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); 
 
    } 
 

 
    $('#reportrange').daterangepicker({ 
 
     startDate: start, 
 
     endDate: end, 
 
     ranges: { 
 
      'Today': [moment(), moment()], 
 
      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 
 
      'Last 7 Days': [moment().subtract(6, 'days'), moment()], 
 
      'Last 30 Days': [moment().subtract(29, 'days'), moment()], 
 
      'This Month': [moment().startOf('month'), moment().endOf('month')], 
 
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] 
 
     } 
 
    }, cb); 
 

 
    cb(start, end); 
 
    
 
}); 
 

 

 
</script> 
 

 
<body> 
 
<div id="reportrange" class="pull-left" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 29%"> 
 
    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp; 
 
    <span></span> <b class="caret"></b> 
 
</div> 
 

 
<button onclick="myFunction()">Get Date Range</button> 
 

 
<p id="demo"></p> 
 

 
<script> 
 
function myFunction() { 
 
    var x = document.getElementById("reportrange").value; 
 
    console.log(x); 
 
\t alert(x); 
 
    
 
} 
 
</script> 
 

 
</body> 
 
</html>

来源

2017-08-27 Jason Merchant

什么是你的代码错误？请编辑并在顶部添加。我们不是魔术调试器。同样格式化您的代码，因为在我编辑它之前是一个班轮。没有人喜欢强迫一艘船。始终缩进并在分号后添加新行。 –

对不便，已附加html代码基本上我需要提醒日期范围的选定值 –

变化myFunction显示以下

function myFunction() { 
    var x = $("#reportrange").text(); 
    console.log(x); 
    alert(x); 

}

我，因为你已经在使用jQuery和应该只使用jQuery函数的$，而是value是，并非所有的DOM有一个属性替换document.getElementById，你应该叫text。要获得DOM的值，一般可以拨打text()html()或val()，但它们有不同的用途。 The documentation for text() illustrates this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html><!-- Include Required Prerequisites --> 
 
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" /> 
 
    
 
<!-- Include Date Range Picker --> 
 
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" /> 
 
<script type="text/javascript"> 
 
$(function() { 
 

 
    var start = moment().subtract(29, 'days'); 
 
    var end = moment(); 
 

 
    function cb(start, end) { 
 
     $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); 
 
    } 
 

 
    $('#reportrange').daterangepicker({ 
 
     startDate: start, 
 
     endDate: end, 
 
     ranges: { 
 
      'Today': [moment(), moment()], 
 
      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 
 
      'Last 7 Days': [moment().subtract(6, 'days'), moment()], 
 
      'Last 30 Days': [moment().subtract(29, 'days'), moment()], 
 
      'This Month': [moment().startOf('month'), moment().endOf('month')], 
 
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] 
 
     } 
 
    }, cb); 
 

 
    cb(start, end); 
 
    
 
}); 
 

 

 
</script> 
 

 
<body> 
 
<div id="reportrange" class="pull-left" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 29%"> 
 
    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp; 
 
    <span></span> <b class="caret"></b> 
 
</div> 
 

 
<button onclick="myFunction()">Get Date Range</button> 
 

 
<p id="demo"></p> 
 

 
<script> 
 
function myFunction() { 
 
    var x = $("#reportrange").text(); 
 
    console.log(x); 
 
\t alert(x); 
 
    
 
} 
 
</script> 
 

 
</body> 
 
</html>

来源

2017-08-27 04:50:38

嘿马修Ciaramitaro，它的工作。它基本上是jquery函数。谢谢 –

如何使用documentid获取输入字段的值javascript

回答

相关问题