Submitting geocomplete form on suggestion select

Question

I'm fairly new to JS so I'm a bit confused as in why this is not working. Basically I'm using the geocomplete jQuery plugin to populate a form with the coordinates and address. Then, once a user selects the destination, I want to sumbit the form.

 <form action="search.php" method="post" id="searchForm">
        <input id="geocomplete" type="text" placeholder="Where are you going to?" size="35" />
        <input name="lat" type="hidden" value="">
        <input name="lng" type="hidden" value="">
        <input name="formatted_address" type="hidden" value="" id="address">
    </form>

and this would be the scripts I call to initiate the form plugin (which works), and the script to submit the form once the value of the address has been changed by the plugin:

<script type="text/javascript">
window.onload= function () {
    if(window.addEventListener) {
        document.getElementById('address').addEventListener('change', doIt, false);
    } else if (window.attachEvent){
        document.getElementById('address').attachEvent("onchange", doIt);
    }

    function doIt(){
        document.getElementById("searchForm").submit();
    }
}

$("input").geocomplete({ details: "form" }); 


</script>

I don't see why this won't work since the value does get changed. Many thanks!

A `change` event fires only when the change occurs by direct user input, _not_ when a script changes the input value. Use the events provided by that plugin as described on the page you already linked to. — CBroe, Feb 22 '15 at 14:42
Forgot to answer, yes this was indeed the issue, can't confirm asnwer since it's a comment. Thanks! — Leo Starić, Feb 28 '15 at 09:19
Can you please post the code you used to make this work? Maybe as a comment to the accepted answer. — T. Brian Jones, Apr 23 '15 at 03:37

score 3 · Accepted Answer · answered Feb 28 '15 at 12:56

3

A change event fires only when the change occurs by direct user input, not when a script changes the input value.

Use the events provided by that plugin as described on the page you already linked to.

answered Feb 28 '15 at 12:56

CBroe

91,630
14
92
150

Could you please expand on this and provide example code? It doesn't seem as though this specific case is addressed in those docs. – T. Brian Jones Apr 23 '15 at 03:40
@T. Brian Jones, see my answer below for sample code. – ZuLu Apr 01 '16 at 19:19

score 1 · Answer 2 · answered Apr 23 '15 at 04:30

Here is another solution uing jquery. This forces a submit when an autopopulated address is clicked on or the user selects it with the arrow keys and hits enter. There is a delay of 1.5 seconds to allow the geocoding library to populate hidden fields. This required delay is why 'onchange="this.form.submit()" didn't work for me.

  /*
    submit form when user clicks or hits enter on auto suggest 
    must sleep for 2 seconds to allow the geocoding library to update the hidden fields
  */
  $(document).ready(function(){
    $('#geocomplete').change(function(){
      setTimeout(function() {
        $('#find').click()     
      }, 1500);
    });
  });
  $(document).ready(function(){
    $('#geocomplete').keydown(function(event){
      if (event.keyCode == 13) {
        setTimeout(function() {
          $('#find').click()     
        }, 1500);
        return false;
      }
    });
  });

ZuLu · Answer 3 · 2016-04-01T19:30:39.030

1

$(function(){
    $(".geocomplete")
       .geocomplete({details:"form"})
       .bind("geocode:result", function(event, result){$(".searchForm").submit();
        });
    });

edited Apr 01 '16 at 19:30

answered Apr 01 '16 at 19:17

ZuLu

933
8
17

Submitting geocomplete form on suggestion select

3 Answers3