ajax post cause my form multi submitting

Question

have a form the one item in it is suppose to be submitted view AJAX post , but when i'm posting the form is submitted few times white in the first time it only submit the AJAX item + values from ENUM dropdownlist, and the rest of the items value is NUll ,so the model is not valid & after that i'm getting all the items except the item ajax suppose to post ... the list of script I have in the page: what i wish to submit(post) to my controller is the value :lat

<script src="/Scripts/modernizr-2.8.3.js"></script>
<script src="/Scripts/jquery-3.1.0.js"></script>
<script src="/Scripts/jquery-ui-1.12.0.js"></script>
<script src="/Scripts/underscore-min.js"></script>
<script src="/Scripts/moment.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/GenresScripts.js"></script>
<script src="/Scripts/bootbox.min.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

<script type="text/javascript">

    var map;
    var initialCenter;
    var initialZoom;
    var elevationService;
    var geocoder;

    function init() {
        var mapOptions = {
            center: new window.google.maps.LatLng(52.373922, -3.427734),
            zoom: 14,
            mapTypeId: window.google.maps.MapTypeId.TERRAIN,
            mapTypeControl: false
        };

        map = new window.google.maps.Map(document.getElementById('mapDiv'), mapOptions);

        initialCenter = mapOptions.center;
        initialZoom = mapOptions.zoom;


        addGeocodingService();

        addShowCoords();

    }

    google.maps.event.addDomListener(window, "load", init);


    function addGeocodingService() {
        geocoder = new window.google.maps.Geocoder();
    }

    function geocodeAddress() {
        var address = document.getElementById("address").value;
        geocoder.geocode({ 'address': address },
            function(results, status) {
                if (status === window.google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    addShowCoords(results[0].geometry.location);
                    //var position = results[0].geometry.location;

                } else {
                    alert("Geocode failed with the following error: " + status);
                }

            });
    };


    function addShowCoords() {
        window.google.maps.event.addListener(map,
            'center_changed',
            function() {
                var newCenter = map.getCenter().toString();
                var lat = newCenter.toString();
                document.getElementById('LatLong').innerText = lat;

            });
        $.ajax({
            type: "POST",
            //ActionName
            url: "Create",
            //Just for test hard code value 
            //Should be : data: { LatLong:lat},
            data: { LatLong: lat },
            async: false,
            datetype: "html",
            success: function (data) {
                $('#result').html(data);
                return false;

            },
            error: function () {
                alert("oops, something bad happened");
            }


        });

    };

</script>

You have numerous problems. `lat` is undefined in `addShowCoords()`. You call it inside `init()` with no parameters and then call it again inside `geocodeAddress()` but pass in parameters but function does nothing with that. Also adding event listener each time you call it. Also don't use `async:false` it is a terrible practice and is deprecated by browsers and you should see warning in console about that — charlietfl, Sep 18 '16 at 14:26
Suggest you learn to use console logging in your code to debug..or learn how to use breakpoints in debugger — charlietfl, Sep 18 '16 at 14:30

score 0 · Answer 1 · edited May 23 '17 at 12:00

0

The multiple submit occurs only if you load unobtrusive jquery more than once,so check your entire project and add only one unobtrusive jquery.

For more details click here

edited May 23 '17 at 12:00

Community

1
1

answered Sep 18 '16 at 15:38

Supraj V

967
1
10
19

ajax post cause my form multi submitting

1 Answers1