All geek questions in one place

Jquery submit * after * third-party ajax validation

I have a form to get an address from a user and send this address to my server. The goal is to use Google geocoding to ensure that the address is unique and geocode before bothering it with the server.

I can successfully bind form.submit, geocode, get my tags, assure that they are unique or not .. but I am completely unable to do the submit job in my callback. This makes me think that I should not do this in my callback, but that is why I am here.

Basically, I need a way to send my verification call to the form, which calls the callback - if / when this callback is successful, the callback should be able to send the form (and not an AJAX message, thanks) without restarting the verification.

Pseudo code follows, printed from memory .. I tried both .unbind ('submit'). submit () and calling the DOM submit directly didn't work, but I include both of them here, damn it.

<html>
  <head>
    <!-- .. load google maps and jquery .. -->
    <script type="text/javascript">
      $(document).ready(function() {
        // ... insure Google, get geocoder, etc.
        geocoder = ...;

        function geocodeCallback(result) {
          // .. check if result was a success, and unique
          if (.. yes, success ..) {
            // use my not-included snazzy function to normalize the address
            $('#loc').val(normalize(result.Placemark[0]));
            $('#myform').unbind('submit');
            $('#myform')[0].submit(); // see note above
          } else {
            // do something magically useful
          }
        }

        $('#myform').bind('submit', function() {
          geocoder.getLocations($('#loc').val(), geocodeCallBack);
          return false;
        });
      });
    </script>
  </head>
  <body>
    <form id="myform" method="post" action="thispage.html">
      <input type="text" name="loc" />
      <input type="submit" name="sub" value="Submit" />
    </form>
  </body>
</html>
+3
source share
2 answers

Basically you need to set some kind of sentinel value to indicate that it is valid. For example:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
num = 1;

$(function() {
  $("#form").submit(function() {
    if ($("#valid").val() == "false") {
      setTimeout(callback, 1000);
      $("#comment").text("comment " + num);
      num++;
      return false;
    }
  });
});

function callback() {
  $("#valid").val("true");
  $("#form").submit();
}
</script>
</head>
<body>
<form id="form">
<div id="comment"></div>
<input type="hidden" id="valid" name="valid" value="false">
<input type="text" name="loc">
<input type="submit" value="Submit">
</form>
</body>
</html>

, , , .

+2

, :

<script type="text/javascript">
      $(document).ready(function() {
        // ... insure Google, get geocoder, etc.
        geocoder = ...;

        var processingGeo = false;
        var geoResult = false;

        function geocodeCallback(result) {
          // .. check if result was a success, and unique
          if (.. yes, success ..) {
            // use my not-included snazzy function to normalize the address
            $('#loc').val(normalize(result.Placemark[0]));
            geoResult = true;
          } else {
            // do something magically useful
            geoResult = false;
          }
          processingGeo = false;
        }

        $('#myform').bind('submit', function() {
          processingGeo = true;
          geoResult = false;
          geocoder.getLocations($('#loc').val(), geocodeCallBack);
          while (processingGeo) {}
          return geoResult;
        });
      });
</script>
0

Source: https://habr.com/ru/post/1719870/

More articles:


All Articles