Multiple dropdown inputs on same page function

Question

I am trying to pass a url with some parameters on a dropdown select input, I am calling a function with the onchange event.

The problem I having is that there are multiple dropdowns in the same page all utilizing a dropdown each. When I choose an option only the first select's value is being passed even if any select is chosen.

e.g.

<tr><td>
<select onchange="updateStatus();">
    <option value="changed&amp;id=771">Change</option>
    <option value="posted&amp;id=771">Posted</option>
</select>
</td></tr>

<tr><td>
<select onchange="updateStatus();">
    <option value="changed&amp;id=750">Change</option>
    <option value="posted&amp;id=750">Posted</option>
</select>
</td></tr>

And the Jquery function:

function updateStatus() {
$.ajax({
    type: 'GET', 
    url: 'print.php',
    data: {stat: $('select').val()},
    success: function (data) {
        alert('done');
    }
})
}

I can see in my console that the data is being passed but always the first one's value.

What do I need to change so that it is the corresponding value and not always the first one? thanks in advance.

That’s because the jQuery selector $(‘select’).val() only gets the value of first element which matches on tha page. If you want the value of any other select you will have to make your slector more specific and target that particular select element. May be use an id in select and use that to target the specific select. — arbghl
– arbghl, Commented Mar 26, 2018 at 21:25
Yes however the problem will be the same, as they will all have the same ID or class name, even if I did how will I target any of the select if they all have different names? — Abu Nooh
– Abu Nooh, Commented Mar 26, 2018 at 21:39

Yatin · Accepted Answer · 2018-03-26 21:40:26Z

All you need to do is pass the select that you're changing in the function: Your html should change like this:

function updateStatus(changedSelect) {
console.log($(changedSelect).val());
$.ajax({
    type: 'GET', 
    url: 'print.php',
    data: {stat: $(changedSelect).val()},
    success: function (data) {
        alert('done');
    }
})
}

<!-- And, your jquery should change like this: -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr><td>
<select onchange="updateStatus(this);">
    <option value="changed&amp;id=771">Change</option>
    <option value="posted&amp;id=771">Posted</option>
</select>
</td></tr>

<tr><td>
<select onchange="updateStatus(this);">
    <option value="changed&amp;id=750">Change</option>
    <option value="posted&amp;id=750">Posted</option>
</select>
</td></tr>

isherwood · Accepted Answer · 2018-03-26 21:25:15Z

1

First, move your JS out of your markup. It's just good practice:

$('select').change(function() {
    updateStatus();
});

Then, specify which select you want to pass (the one that was clicked):

updateStatus($(this)); // pass the jQuery element object

function updateStatus(el) { // and receive it as 'el' (or whatever)
    $.ajax({
        type: 'GET', 
        url: 'print.php',
        data: {stat: el.val()}, // use it here
        success: function (data) {
            alert('done');
        }
    });
}

answered Mar 26, 2018 at 21:25

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

1 Comment

Abu Nooh Over a year ago

Thanks for those tips about moving the JS out of markup makes sense. I have added like you described however I get TypeError: e.nodeName is undefined What could be the issue?

Coffee'd Up Hacker · Accepted Answer · 2018-03-26 21:44:57Z

0

I believe you want $(this).find(':selected').val(); instead of $('select').val(), this would get the selected option from whichever dropdown menu is being changed.

answered Mar 26, 2018 at 21:44

Coffee'd Up Hacker

1,44613 silver badges23 bronze badges

Collectives™ on Stack Overflow

Multiple dropdown inputs on same page function

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related