順序執行事件監聽器，然後按回車鍵提交表單

Question

我有一個事件監聽器和一個表單。當用戶按下輸入鍵時，兩者都會啓動。我想要的是當用戶按下回車鍵，然後第一個事件listerner應該執行，然後表單提交。那麼該怎麼做呢？

google.maps.event.addListener(autocomplete, 'place_changed', function() { 

    // fires when enter key is pressed 
    infowindow.close(); 
     marker.setVisible(false); 
     input.className = ''; 
     var place = autocomplete.getPlace(); 
     if (!place.geometry) { 
     // Inform the user that the place was not found and return. 
     input.className = 'notfound'; 
     return; 
     } 
    } 

    and 

    <form action="xyz.php" method="post"> 
    //submits when enter key is pressed 
    <div id="searchWrapper" style="width:940px;margin-bottom:10px"> 

     <input name="txtSearch" type="text" id="txtSearch" class="search focus" placeholder="Where do you need parking?" value=<?php echo '"'.$str.'"'; ?> /> 

     <input class="dates search search-date" style="height:30px;background-image:url('images/sprite-master.png') ;background-position:-480px 0px; cursor:pointer;width:110px;" name="txtSearchStartDate" type="text" id="txtSearchStartDate" placeholder="today" enddate="txtSearchEndDate" /> 
     <input name="txtSearchEndDate" type="text" id="txtSearchEndDate" class="dates search search-date" placeholder="(optional)" /> 
     <input type="submit" value=" Search" id="btnSearch" class="btn btn-primary" /> 
     <input name="city" id="city" type="hidden" value=""> 
     <input name="state" id="state" type="hidden" value=""> 
     <input name="country" id="country" type="hidden" value=""> 
      <input name="lat" id="lat" type="hidden" value=""> 
     <input name="long" id="long" type="hidden" value=""> 
    </div> 
    </form> 

Answer 1

提交表單停止形式的onsubmit功能，檢查是否有地方在place_changed事件中給出。如果是這樣手動提交表單，否則更改輸入類名稱。

var form = document.getElementById("searchForm"), // I assume the form tag has the ID searchForm 
    input = document.getElementById("txtSearch"), 
    autocomplete = new google.maps.places.Autocomplete(input); 

form.onsubmit = function(event) { 
    // stop the form from submitting 
    event.preventDefault(); 
}; 

google.maps.event.addListener(autocomplete, 'place_changed', function() { 
    input.className = ''; 
    var place = autocomplete.getPlace(); 
    if (!place.geometry) { 
     // Inform the user that the place was not found and return. 
     input.className = 'notfound'; 
    } else { 
     input.className = ''; 
     // this won't fire the onsubmit function 
     form.submit(); 
    } 
});