将 HTML <select> 中的选定值传递给 javascript 变量？

Question

我正在尝试使用网页上指定的参数运行 js 脚本，当触发 javascript 时，将运行一个 php 文件。预期的输出将是 getstats.php 的结果。由于某种原因它没有工作。是因为 app1 不是全局变量吗？

HTML：

  <select name="app" id="app1">
  <option value=1>A</option>
  <option value=2>B</option>
  <option value=3>C</option>
  <option value=4>D</option>
  </select>     
  P1: <input type="text" id="p1">
  Start Date: <input type="date" id="dt1">
  End Date: <input type="date" id="dt2">
<input type="submit" id = "submit" value="Run"><br>
<script src="js/global.js"></script>

global.js中的javascript代码：

$('input#submit').on('click', function() {
var app1 = document.getElementById("app1").value;
var p1 = $('input#p1').val();
var dt1 = $('input#dt1').val();
var dt2 = $('input#dt2').val();
if ($.trim(p1) != '' && $.trim(app1) != '' && $.trim(dt1) != '' && $.trim(dt2) != '') {
    $.post('getstats.php', {app1: app1, p1: p1, dt1: dt1, dt2: dt2}, function(data1) {
        $('div#stats').html(data1);
    });
  }
});

感谢您的帮助！

Answer 1

看看this问题、this问题、this问题和this文章...

您可能还想查看 .serialize() jquery 函数，它可以帮助您节省大量时间，尤其是在验证方面。 http://api.jquery.com/serialize/

希望对你有帮助

Answer 2

我想你忘记在点击事件中使用 e.preventDefault 了。 如果表单元素在表单内，则按钮将触发传递给表单操作属性的值。这样，值将永远不会“传递”给 jQuery (JavaScript)。

此外，单击处理程序应包装在文档就绪函数中，以便在尝试绑定事件之前等待 DOM 准备好。

$(document).ready(function() {

    $('input#submit').on('click', function(e) {
        e.preventDefault();

        var app1 = $('#app1').val();
        var p1 = $('input#p1').val();
        var dt1 = $('input#dt1').val();
        var dt2 = $('input#dt2').val();

        if ($.trim(p1) != '' && $.trim(app1) != '' && $.trim(dt1) != '' && $.trim(dt2) != '') {
            $.post('getstats.php', {app1: app1, p1: p1, dt1: dt1, dt2: dt2}, function(data1) {
                $('div#stats').html(data1);
            });
        }
    });
});

您可以使用 console.log('text'); 在 firebug 控制台中检查值或 console.log(var); 在启动 if 语句之前尝试记录 app1 以查看变量中是否存在值。如果它打印未定义，则可能是其他问题。

Answer 3

我检查了你的代码，它工作正常：

只需在

中编写您的代码

 $(function()
 {
  // Your code
  // This function is exceuted when page is loaded. 
 });

我尝试了什么：

$(function()
{
    $('input#submit').on('click', function() {

    var app1 = document.getElementById("app1").value;

    alert("--"+app1);// <------------ showing correct o/p

    var p1 = $('input#p1').val();
    alert(p1);
    var dt1 = $('input#dt1').val();
    var dt2 = $('input#dt2').val();
    if ($.trim(p1) != '' && $.trim(app1) != '' && $.trim(dt1) != '' && $.trim(dt2) != '') {
        $.post('getstats.php', {app1: app1, p1: p1, dt1: dt1, dt2: dt2}, function(data1) {
            $('div#stats').html(data1);
        });
      }
    });


});