Submit dropdown form upon changing selected option

Question

So I have a dropdown menu with 'Next' and 'Prev' (previous) buttons. I would like it so upon pressing next or prev it would also submit the dropdown choice.

<input type="button" id="change2" value="prev" />
<select id="Questions">
  <option value="QA">QUESTION A</option>
  <option value="QB">QUESTION B</option>
  <option value="QC">QUESTION C</option>
  <option value="QD">QUESTION D</option>
</select>
<input type="button" id="change" value="next" />

And here is the JQuery for it:

$(window).load(function(){
    var dd = $('#Questions'),
        max_len = dd.find('option').length;

    $('#change').click(function () {
        var x = dd.find('option:selected').index();
        if (max_len == x + 1) {
            x = -1;
        }
        dd.find('option').eq(x + 1).prop('selected', true);
    });
    $('#change2').click(function () {
        var x = dd.find('option:selected').index();
            if (max_len == x + 1) {
                x = -1;
            }
        dd.find('option').eq(x - 1).prop('selected', true);
    })
});

How can I make it so that when I click next or prev it submits the form too?

Thanks

Could you elaborate? (e.g. include the surrounding `
`) Is this the only input you want to submit? Where do you want to send the information? — Ivan Modric, Feb 05 '16 at 13:57
Ah yes sorry, there is a form around it and this is all I want to submit. — Maffs, Feb 05 '16 at 14:28

score 1 · Answer 1 · answered Feb 05 '16 at 15:46

You could use $.ajax();.

A very general solution might look something like this:

$(document).ready(function() {
    $("#change, #change2").on('change', function(){
        $.ajax({
            url: 'sendTheDataHere',
            type: 'POST',
            data:  {keyname:$('#Questions option:selected').val()},
            success: function () {},
            error: function () {}
        });
    });
});

score 1 · Accepted Answer · edited May 23 '17 at 12:07

1

You can submit the form using jQuery. Check the top answer on this question for details. Assuming you have an action attribute set on the form, something like this might be all you need:

$('#change').click(function () {
    // your other logic here
    $('form').submit();
});

edited May 23 '17 at 12:07

Community

1
1

answered Feb 05 '16 at 16:13

Lesley

1,395
12
11

score 0 · Answer 3 · answered Feb 05 '16 at 14:36

<input type="button" id="change2" value="prev" onclick="changeS()"/>
<select id="Questions">
  <option value="QA">QUESTION A</option>
  <option value="QB">QUESTION B</option>
  <option value="QC">QUESTION C</option>
  <option value="QD">QUESTION D</option>
</select>
<input type="button" id="change" value="next" onclick="changeS()"/>

JS Code

<script>
function changeS() {
/* document.getElementById('change').getElementsByTagName('option')[1].selected = true;*/
var r=document.getElementById('change').selectedIndex+1;
document.getElementById('change').getElementsByTagName('option')[r].selected = true;
}
</script>

Submit dropdown form upon changing selected option

3 Answers3