在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

看看這個問題， 這個問題， 這個問題和這篇文章...

您可能還想查看.serialize（）jQuery函數，該函數可以幫助您節省很多時間，尤其是在進行驗證時。 http://api.jquery.com/serialize/

希望這可以幫助

Answer 2

我認為您忘記了在click事件中使用e.preventDefault。 如果表單元素在表單內部，則該按鈕將觸發傳遞給表單操作屬性的值。 這樣，就永遠不會將值“傳遞”給jQuery（JavaScript）。

另外，應將Click處理程序包裝在文檔就緒函數中，以便在嘗試綁定事件之前等待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);
        });
      }
    });


});