$(Id).submit() on javascript

Question

I have a problem with the following code: here's the javascript

$(document).ready(function(){

 $("#VisualiserCarte").submit(function(){ 

    $.post("store.php",{longitudes:longitudes,latitudes:latitudes});
    alert('ok');
       var mapOptions = {
            zoom: 13,
            // Center the map on Chicago, USA.
            center: new google.maps.LatLng(tableauPoints[0].lat(),tableauPoints[0].lng())
        };

        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var flightPath = new google.maps.Polyline({
            path: tableauPoints,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
          });
        flightPath.setMap(map); 


});

});

and here is the PHP

 <script src="google_map.js"></script>
  <?php
    $DisplayForm= True;
    if (isset($_POST['vue'])){
        $DisplayForm= False;    
    }
    if ($DisplayForm){

  ?>
  <form  method="post" id="VisualiserCarte">
      <input type="submit" name="vue" value="visualiser la carte"  >
  </form> 
  <form  action="store.php" method="post" id="SoumettreCarte" >
      <input type="submit"  name="submit" value="soumettre la carte"  >
  </form>
  <?php
    }
    else
    {
  ?>
  <form method="post" id="RéinitialiserCarte" >
      <input type="submit"  value="réinitialiser" value="réinitialiser la carte"  >
  </form>

  <?php
    }
  ?>

If i click on submit for the form "VisualiserCarte", i expect it to it to alert ok, to draw the map with the polyline and to get the form RéinitialiserCarte below the map. When i execute it i get the alert but not the map . If i add return false; at the end of the submit function, i get the alert, the right map, but the 2 first forms are still here, while i was expecting to have only the third. Any help? Tahnks

possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Benjamin Gruenbaum, Apr 06 '14 at 17:03
`$_POST['vue']` You don't seem to be posting that value anywhere, hence your first two forms keep showing — Hanky Panky, Apr 06 '14 at 17:13

score 0 · Answer 1 · answered Apr 06 '14 at 18:17

It seems you're missing the success calback (or the Promise interface) to be executed when AJAX call is finished. An aproximate code which uses deferred objects can look like the one below:

$(document).ready(function(){

    // Send data to server and store it
    $("#SoumettreCarte").submit(function(ev) { 

        ev.preventDefault(); // Prevent submit; Let AJAX call deal with submit

        $.post("store.php", {longitudes: longitudes,latitudes: latitudes})
        .done(function (response) {
            alert('Soumettre Carte - ok');
        });

    });

     $("#VisualiserCarte").submit(function(ev){ 

        ev.preventDefault(); // Prevent submit

        // Hide forms
        $('#VisualiserCarte').hide();
        $('#SoumettreCarte').hide();

        // Display last form
        $('#ReinitialiserCarte').show();

        var mapOptions = {
            zoom: 13,
            // Center the map on Chicago, USA.
            center: new google.maps.LatLng(tableauPoints[0].lat(),tableauPoints[0].lng())
        };

        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var flightPath = new google.maps.Polyline({
            path: tableauPoints,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
          });
        flightPath.setMap(map); 

    });

    $('#ReinitialiserCarte').submit(function(ev) {
        ev.preventDefault(); // Prevent submit

        $('#VisualiserCarte').show();
        $('#SoumettreCarte').show();
        $('#ReinitialiserCarte').hide();
    });

});

Also the PHP code can be written:

<form  method="post" id="VisualiserCarte">
  <input type="submit" name="vue" value="visualiser la carte"  >
</form> 
<form  action="store.php" method="post" id="SoumettreCarte" >
  <input type="submit"  name="submit" value="soumettre la carte"  >
</form>

<div id="map-canvas"></div>

<form method="post" id="ReinitialiserCarte" style="display: none;">
  <input type="submit"  value="réinitialiser" value="réinitialiser la carte"  >
</form>

As you can see the jQuery code takes care of dealing with the server calls and the displaying of various elements.

This was really helpful, thank you. As i don't really understand these callback stories, could you please tell me where i can find a good tutorial/explanation about them? — user3492799, Apr 06 '14 at 19:28
A good starting point is the official jQuery documentation where you can also find some examples: https://api.jquery.com/jQuery.ajax/. Note that $.post(...) is actually the shorthand for $.ajax(...) with type: 'POST' -- the later being fully configurable. — Gabriel, Apr 09 '14 at 16:14

$(Id).submit() on javascript

1 Answers1