Wordpress中的Jquery Ajax表单

Question

jQuery(document).ready(function () {

    function loading_show() {
        $('#loading').html('<div id="overlay"><img id="leading" src="loader.gif"></div>').fadeIn('fast');
    }

    function loading_hide() {
        $('#loading').fadeOut('fast');
    }

    function loadData(page) {
        loading_show();
        var city = jQuery('#city').val();
        jQuery.post(
        MyAjax.ajaxurl, {
            action: 'MyAjaxFunction',
            city: city,
            page: page
        },

        function (msg) {
            loading_hide();
            jQuery("#container").html(msg);

        });

    }
    loadData(1); // For first time page load default results
    $(document).on('click', '#container .pagination li.active', function (e) {
        var page = $(this).attr('p');
        loadData(page);
    });
});

This is the ajax.js and uploaded into js folder. all functions are working expect var city value

<form id="search" method="post">
        <input id="city" name="city" placeholder="City">
       <button type="submit" id="submit">Submit</button>
</form>

I'm unable to get the input value into the Jquery. Please help