Pass the selected value in HTML as a javascript variable? Question – Bharath R Nov 19 '13 at 07:27

Question

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

score 0 · Answer 1 · edited May 23 '17 at 11:50

0

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

edited May 23 '17 at 11:50

Community

1
1

answered Nov 19 '13 at 07:42

lukeocom

3,243
3
18
30

1

Not sure but all the links you provide are about checkboxes and radio inputs. The OP's question is about a select element. You are right about the .serialize() function though :) – Brainfeeder Nov 19 '13 at 07:50

score 0 · Accepted Answer · answered Nov 19 '13 at 07:46

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.

Thanks! Yes, I missed e.preventDefault in the click event. I Used SeeTheC's approach, and verified the values have been passed to js. Bu the real problem is e.preventDefault. Thanks! — tonystarkix, Nov 19 '13 at 08:05
No problem, It hasn't been that long since I made this mistake over and over again ;) Welcome to stackoverflow! — Brainfeeder, Nov 19 '13 at 08:22

score 0 · Answer 3 · answered Nov 19 '13 at 07:52

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


});

Thanks! I verified the alert popped up showed the correct value. — tonystarkix, Nov 19 '13 at 08:00
The bigger problem about my code is e.preventDefault in the click event (see Brainfeeder's comment). — tonystarkix, Nov 19 '13 at 08:10

3 Answers3