Ajax表单选择更改未出现在jQuery .serialize / .val中

Question

I'm retrieving form with .load jQuery function and places it in document body.

After that I'm changing select value (manually) and trying to save form with ajax .post request.

Select value retrieved by jQuery in any way (with .val or sereilize) doesn't changes. Value stays as it was rendered.

Without prevetnDefault (with plain POST request) form saves as expected. But both .val on select or .sereilize on form returns old select value (not really selected).

<form
       id="phrase-fake-form-12243"
       method="POST"
       action="/phrase-fake/change-group/12243/3">

            <input type='hidden' name='csrfmiddlewaretoken' value='UQuHH3ahAnBaSUPsCBaF1QKF4I0O48AO' />
            <select name="group" id="phrase-fake-modal-group-dropdown">

                    <option value="20393"
                            selected="selected">
                        1
                    </option>

                    <option value="20405"
                            >
                        2
                    </option>

                    <option value="20417"
                            >
                        3
                    </option>
            </select>
            <input type="submit" value="Сохранить" class="ui button blue">
        </form>

JS:

<script>

$("#phrase-fake-form-12243").submit(function (event) {

    console.log($('#phrase-fake-form-12243').serialize())
    console.log($('#phrase-fake-modal-group-dropdown').dropdown('get value'))
    $.post('/phrase-fake/change-group/12243/3', $('#phrase-fake-form-12243').serialize())

    event.preventDefault();
});
</script>

What I'm doing wrong? Actually it's seems like a bug..

Answer 1

Try using this library, form2js

You just have to call the method .toObject() on the jQuery object. For example, if this is your html

<form id="test">
...
</form>

You can get the all the form element values by

var formObject = $("#test").toObject();