CODEWITHSUNDEEP
jqueryforms
user3108671
user3108671

Reputation: 83

jQuery change selected attr of form and submit form onchange

I am going to be very surprised if this question is not a repeat question. I have searched for a while for the answer to this question but I have not found it. If this question has been asked before I am sorry for asking it again and it would be great if you could point me to the question that already answers this question.

Anyways, I am trying to use jQuery to submit a form once it is changed. That part is working just fine. The part that is not working fine is changing the select attr when the form is changed. The goal is simple: every time the form is changed the value that it is changed to should be given a selected attr of true then the form should be submitted.

The HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Drop Down</title>
    </head>

    <body>
        <form id='example' method='GET' action='index.php'>
            <select id='menu' name='family'>
                <option value='Kristen'>Kristen</option>
                <option value='Henk'>Henk</option>
                <option value='Andrew'>Andrew</option>
                <option value='Derek'>Derek</option>
            </select>
        </form>
    <script src='http://code.jquery.com/jquery-1.8.3.min.js'></script>
    <script src='script.js'></script>
    </body>
</html>

The JS

$(document).ready(function() {
    $('#menu').change(function() {
        //remove the select attr from the option that currently has a value of selected
        $("option[selected='true']").removeAttr('selected');
        //add the selected attr with value of true to the option that was clicked on
        $(this).attr('selected', 'true');
        //submit the form
        this.form.submit();
    });
});

The form is submitting when the value is changed but the selected attr is not changing. I know the selected attr is not changing because the first value, Kristen, is always shown as the default after the form submits.

Thanks in advance for answers, and I am sorry again if this ends up being a repeat question - meanwhile I will keep searching for answers.

Upvotes: 1

Views: 1988

Answers (3)

Felix
Felix

Reputation: 38102

Try to use jQuery cookie in your case:

if($.cookie('selectVal') != null) {
    $('#menu option[value="' + $.cookie('selectVal') + '"]').prop('selected', true);
}

$('#menu').change(function() {
    $.cookie('selectVal', $('#menu option:selected').val(), { expires: 7, path: '/'});
    $(this).find("option[selected='true']").removeAttr('selected');
    $(this).find('option:selected').prop('selected', 'true');
    this.form.submit();
});

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

You need to find the selected option element, this inside the change handler refers the select element not the option element which was selected.

You can use the :selected selector

$(document).ready(function() {
    $('#menu').change(function() {
        //remove the select attr from the option that currently has a value of selected
        $(this).find("option[selected='true']").removeAttr('selected');
        //add the selected attr with value of true to the option that was clicked on
        $(this).find('option:selected').attr('selected', 'true');
        //submit the form
        this.form.submit();
    });
});

Demo: Fiddle

Upvotes: 0

fanfan1609
fanfan1609

Reputation: 179

Because you don't save last selected value , the default selected value is the first value in options.

If you want to keep last selected attribute , you can use cookie or use PHP code check selected value after submit page

Upvotes: 1

Related Questions