CODEWITHSUNDEEP
javascriptjqueryformsgoogle-maps-api-3
Rob
Rob

Reputation: 149

Form submit onChange event does'nt work with JQuery function

I want to do a form submit on a onChange event of a selectbox. The submit action should trigger a JQuery function. When I use a submit button instead of a onChange event function it works fine. However when I use the onChange event I can't trigger the function.

MY form:

<form id="zoekSchool" method="get">   
    <div class="form-group">
        <label for="thema" class="desktop small">School</label>
        <select class="form-control" name="school" id="school" onchange="this.form.submit()">
            <option value="" disabled selected>Search</option>
            <option value="1">item 1</option>
            <option value="2">item 2</option>
            ... 
        </select>
    </div>
</form>

My Javascript/Jquery:

function initMap(x) {
    $('#zoekSchool').submit(function() { // bind function to submit event of form
        var schoolID  = $('#school').val();
        ...
        return false; //prevent default action
    });
}

<script src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap"
    async defer></script>

where ... stands for 'some code'.

Maybe important: I'm working with the googleMaps Api. What could be the problem here?

Upvotes: 1

Views: 1085

Answers (2)

Pravin Tukadiya
Pravin Tukadiya

Reputation: 487

you can try like this..

onchange="$(this).parents('form').submit()"

or

onchange="$('#zoekSchool').submit()"

instead of onchange="this.form.submit()"

<form id="zoekSchool" method="get">   
<div class="form-group">
    <label for="thema" class="desktop small">School</label>
    <select class="form-control" name="school" id="school" onchange="$('#zoekSchool').submit()">
        <option value="" disabled selected>Search</option>
        <option value="1">item 1</option>
        <option value="2">item 2</option>
        ... 
    </select>
</div>
</form>

Upvotes: 1

Anurag Deokar
Anurag Deokar

Reputation: 849

Create Event handler in document Ready, use the following code

$(document).ready(function () {

    $('#school').change(function () { //Event handler for drop down
        var form = $(this).closest('form');
        $(form).submit();// this fires submit event of form
    });

});

Upvotes: 0

Related Questions