Pass the selected value in HTML <select> to a javascript variable?

Question

I am trying to run the js script using the parameters specified on the webpage, when javascript is triggered, a php file will run. The expected output would be the result from getstats.php. It didn't work for some reason. Is it because app1 is not a global variable?

The 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>

The javascript code in the global.js:

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

Thanks for your help!

Answer 1

Have a look at this question, this question, this question, and this article...

You might also like to check out the .serialize() jquery function, which can help save you a lot of time, especially with validation. http://api.jquery.com/serialize/

hope this helps

Answer 2

I think you forgot to use e.preventDefault in the click event. If the form elements are inside a form, the button wil trigger the value passed to the form action attribute. This way the value will never be 'passed' to jQuery (JavaScript).

Also The click handler should be wrapped in a document ready function so it waits untill the DOM is ready before trying to bind the event.

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

You can check values in firebug console with console.log('text'); or console.log(var); Try to log app1 before you start the if statement to see if there is a value in the variable. If it prints undefined, maybe something else is wrong.

Answer 3

I checked your code it's working fine :

Just write your code in

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

What I tried :

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


});