Ajax on submit function doesnt work

Question

    <script>

        var markerLatitude;
        var markerLongitude;

        function initMap() {

            var mapCenter = new google.maps.LatLng(51.8979988098144, -2.0838599205017);

            var mapOptions = {
                zoom: 15,
                center: mapCenter
            };

            map = new google.maps.Map(document.getElementById("mapInput"), mapOptions);

            marker = new google.maps.Marker({
                map: map,
                position: mapCenter,
                draggable: true
            });  

            google.maps.event.addListener(marker, 'dragend', markerDragged);

        }

        function markerDragged(event) {

            console.log("markerDragged");

            markerLatitude = event.latLng.lat().toFixed(8);
            markerLongitude = event.latLng.lng().toFixed(8)

            console.log("Latitude:" + markerLatitude);
            console.log("Longitude:" + markerLongitude);

        }  


$('#formReportStolen').on('submit', function(e){
var formData = new FormData(this);

formData.append("lat", markerLatitude);
formData.append("lng", markerLongitude);
console.log("Latitude: " + markerLongitude + " Longitude:" + markerLongitude+ " DATA SENT TO PHP");

e.preventDefault();
$.ajax({
        url: 'PublicReportStolenDAO.php',
        method: "POST",
        data: formData,
        contentType: false,
        cache: false,
        processData: false,
        success:function(echoedMsg) {
            if (echoedMsg == "True") {
            alert("Successfully reported.");
            }
        }
    });
});

    </script>

Hi there, I seem to have a problem with my javascript. When im trying to submit data and post it to my php class using ajax it isn't sending any data at all. In fact the entire onclick function for my ajax doesn't seem to work.

Any help to getting the on click button to work would be amazing.

Edit:

<html>
<head>
    <!-- changes text in tab in browser -->
    <title> Report Stolen Bike </title>
    <!-- links CSS file to HTML file -->
    <link rel="stylesheet" type="text/css" media="screen" href="../style.css">  
<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    </head>
    <body>
    <header>
        <!-- adds title to the page -->
        <h1 class="top"> Gloucestershire Constabulary Bike Programme - Report Your Stolen Bike </h1> 
            <nav>
                <ul>
                    <!-- adds links to the nav bar -->
                        <li><a href="../Home/Home.html">HOME</a></li>
                        <li><a href="../RegisterBike/PublicBikeRegistration.php">BIKE REGISTRATION</a></li>
                        <li><a href="../ReportStolen/PublicReportStolen.html"class="current">REPORT</a></li>
                        <li><a href="../LogoutHome/LogoutHome.html">LOGOUT</a></li>

                </ul>
            </nav>

        <!-- adds the two images to page -->
        <div class=imgcontainer>
            <img src="../../images/Bike.png">
            <img src="../../images/Gloucestershire%20Police%20Constabulary.jpg">
        </div>
    </header>

<!-- adds second heading to the page -->
<h2 class="top"> Please select the bike that has been stolen from the drop down list below </h2>

<!-- creates a form for users to input their personal information -->
<form name="formReportStolen" action="PublicReportStolenDAO.php" method="POST" enctype="multipart/form-data">

    <!-- adds title of input box -->
    <h3 class="middle"> Bike ID </h3>   
    <input class="middle" name="txtBikeID" type="text" required>
    <h3 class="middle"> Date of Theft </h3>   
    <input class="middle" name="txtDateofTheft" type="text" required>
    <h3 class="middle"> Please select the last known location </h3>
    <div align="center" id="mapInput" style="width: 650px; height: 300px;"></div>

    <!-- adds two line breaks between last input box and image uplodaer -->
    <br> <br>

    <!-- adds submit button, allowing data in form to be added to databse -->

<!-- links the JavaScript files to HTML page -->  

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

        <script>

            var markerLatitude;
            var markerLongitude;

            function initMap() {

                var mapCenter = new google.maps.LatLng(51.8979988098144, -2.0838599205017);

                var mapOptions = {
                    zoom: 15,
                    center: mapCenter
                };

                map = new google.maps.Map(document.getElementById("mapInput"), mapOptions);

                marker = new google.maps.Marker({
                    map: map,
                    position: mapCenter,
                    draggable: true
                });  

                google.maps.event.addListener(marker, 'dragend', markerDragged);

            }

            function markerDragged(event) {

                console.log("markerDragged");

                markerLatitude = event.latLng.lat().toFixed(8);
                markerLongitude = event.latLng.lng().toFixed(8)

                console.log("Latitude:" + markerLatitude);
                console.log("Longitude:" + markerLongitude);

            }  


    $('#formReportStolen').on('submit', function(e){
    var formData = new FormData(this);

    formData.append("lat", markerLatitude);
    formData.append("lng", markerLongitude);
    console.log("Latitude: " + markerLongitude + " Longitude:" + markerLongitude+ " DATA SENT TO PHP");

    e.preventDefault();
    $.ajax({
            url: 'PublicReportStolenDAO.php',
            method: "POST",
            data: formData,
            contentType: false,
            cache: false,
            processData: false,
            success:function(echoedMsg) {
                if (echoedMsg == "True") {
                alert("Successfully reported.");
                }
            }
        });
    });

        </script>

    <input name="submit" type="submit" id ="submit">


</form>

</body>
</html>

That is the entire code for those asking

Refer [this](https://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery) — Darpan Sanghavi, May 18 '18 at 13:10
You need to provide a [mcve]. It isn't complete because there is no HTML. You need to show the form and the submit button. It isn't minimal because, if the function doesn't seem to be called at all, then you could reduce it to a simple `alert()`. — Quentin, May 18 '18 at 13:10
Have you verified that it's the entire click that's not working? I.e, have you ran a console.log() as the first line in the click function? Also, is your form added to the page dynamically? If it is, you'll need to change your Event Target. — Lewis, May 18 '18 at 13:11
@delboy1978uk — They said the click event handler wasn't being called at all. The Ajax request can't fail if it is never sent. — Quentin, May 18 '18 at 13:11
@DarpanSanghavi — Why? They are using jQuery. There is nothing wrong with using jQuery. They said the problem was triggering the event handler, not making the Ajax request. — Quentin, May 18 '18 at 13:12
@Quentin : That link answers making Ajax call with Jquery as well, it's just well received question and it has all possible answers for making Ajax call with php. — Darpan Sanghavi, May 18 '18 at 13:13
You're listening on `$('#formReportStolen')` but there's nothing with id=formReportStolen in your HTML. There's something with that **name** but that's different than an ID — apokryfos, May 18 '18 at 13:17
Ive added the html along with the code. I have tried to log in the console at the start of the on click function and it doesn't log anything. Which leads me to believe that this doesnt work: $('#formReportStolen').on('submit', function(e){ — Joshua Best, May 18 '18 at 13:18
@apokryfos I have added the html code now, the form is called formReportStolen — Joshua Best, May 18 '18 at 13:23
@JoshuaBest apokryfos is pointing out that you're targeting a form with an _id_ of formReportStolen (by using the hash symbol), but your form doesn't have that ID. It has a _name_ of formReportStolen though, so change your selector to $("form[name='formReportStolen']).on... — Lewis, May 18 '18 at 13:25

score -1 · Answer 1 · edited May 18 '18 at 14:19

-1

You should change form tag as follows in your HTML. I knew that the ID must be missing or misspelled in your script and HTML

<form id="formReportStolen" name="formReportStolen" action="PublicReportStolenDAO.php" method="POST" enctype="multipart/form-data">

edited May 18 '18 at 14:19

Rolando Cruz

2,834
1
16
24

answered May 18 '18 at 13:31

kish

151
3
16

2

Questions where the answer is "You made a typo" are off-topic and should be closed, not answered. – Quentin May 18 '18 at 13:33
okay @Quentin answer just for, user will get know where he actually did mistake – kish May 18 '18 at 13:34
1

@kish while it's good to help someone if they make a little mistake, it just creates clutter if it remains open. Imagine if SO was completely overrun with questions where someone just made a typo. It would be impossible for anyone to find anything useful among all that noise. – apokryfos May 18 '18 at 13:38
Welcome @JoshuaBest please take care from next time as Quentin suggest in his comment – kish May 18 '18 at 13:38
agreed with you @apokryfos – kish May 18 '18 at 13:39
1

@kish — Comments can be used to explain typos without preventing the deletion of the question with an answer. – Quentin May 18 '18 at 13:42

Ajax on submit function doesnt work

1 Answers1