将HTML中的选定值传递给javascript变量?

将HTML中的选定值传递给javascript变量?,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试使用网页上指定的参数运行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

我正在尝试使用网页上指定的参数运行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>
谢谢你的帮助

看一看问题、问题、问题和文章

您可能还想签出.serializejquery函数,它可以帮助您节省大量时间,尤其是在验证方面


希望这对您有所帮助

我想您忘记在click事件中使用e.preventDefault了。 如果表单元素位于表单中,则按钮将触发传递给表单操作属性的值。这样,值将永远不会“传递”到jQuery JavaScript

此外,click处理程序应该包装在一个documentready函数中,以便在尝试绑定事件之前等待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.logvar;
尝试在启动if语句之前记录app1,以查看变量中是否有值。如果打印未定义,可能是其他问题。

我检查了您的代码,它工作正常:

只要把代码写进去就行了

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


});

您使用jQuery已经有一半了。document.getElementByIdapp1.value;应该是$'app1'.val。它不起作用,请解释您的程序应该做什么。是否将所选值作为javascript变量在HTML中传递?Question@wared,我已经编辑了我的帖子。谢谢您的建议。@BharathRallapalli,问题应该是将HTML中的选定值传递给Javascript不确定,但您提供的所有链接都与复选框和无线电输入有关。OP的问题是关于select元素的。关于.serialize函数,您是对的:谢谢!我验证了弹出的警报是否显示了正确的值。关于我的代码,更大的问题是点击事件中的e.preventDefault。请参阅Brainfeeder的评论。谢谢!是的,我在点击事件中错过了e.preventDefault。我使用了Seetech的方法,并验证了值是否已传递给js。但真正的问题是e。谢谢没问题,没多久我就一次又一次地犯了这个错误;欢迎来到stackoverflow!
$(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);
        });
      }
    });


});