Javascript not working when jquery is added

Question

I am new to javascript n jquery. I used javascript along with jquery on my script tag.When jquery is not added, the javascript works fine,but when a jquery function is added, the script is not working.....shall i convert both to javascript or both to jquery or am i missing anything.Here is my script

<script type="text/javascript">
function getLocations() {
    $.post('@Url.Action("getLocations","Home")', { 'id': $("#cities").val() },
        function (data) {
            $("#loca").html(data).show();

        });
}

$(function () {
$('.submit').on('click', function () {
    var ck = "";
    var city = $("#cities option:selected").text();
    var location = $("#loca option:selected").text();
    alert(city+"and"+location)
}
});

</script>

here i am loading location based on the city selected.Its works fine when the onclick is not there,But when added ,location are not loading n the function is not calling.I have tried by butting alert inside it.Do i need do any thing else for both to work....Thank You

Answer 1

you forgot a )

$(function () {

    $('.submit').on('click', function () {
       ...
    })   // <---
});

if you properly indent the code blocks and if you look on the javascript console, this kind of errors become easier to be detected. Just adopt an indent style and write code adhering to it.