envoi de formulaire/google maps autocomplete

Question

J'essaye de mettre en boîte quelques informations dans un formulaire. Le problème est le suivant. quand j'utilise

<form id="booking-form" class="booking-form" name="form1" method="post" action=""> 

les œuvres de forme, mais ne marche pas saisie semi-automatique. quand je change que pour

<form action="javascript:void(0);" id="booking-form" class="booking-form" name="form1" method="post" action=""> 

travaux autocomplete mais envoyer du travail sous forme ne marche pas. Y a-t-il une solution simple à cela?

<form id="booking-form" class="booking-form" name="form1" method="post" action=""> 

     <div class="h1">Reservation Form</div> 
     <div id="form-message" class="message hide"> 
      Thank you for your enquiry! 
     </div> 
     <div id="form-content"> 

      <div class="group" action="javascript:void(0);"> 
       <label for="start">Start</label> 
       <input type="text" name="location" class="textbox" id="location" value="From" /> 
      </div> 
      <div class="group" action="javascript:void(0);"> 
       <label for="destination">Destination</label> 
       <input type="text" name="location" class="textbox" id="location2" value="To" /> 
      </div> 

      <div class="group"> 
       <label for="date-from">From</label> 
       <div class="addon-right"> 
        <input id="date-from" name="date-from" class="form-control" type="text"> 
        <i class="fa fa-calendar"></i> 
       </div> 
      </div> 
      <div class="group"> 
       <label for="date-to">To</label> 
       <div class="addon-right"> 
        <input id="date-to" name="date-to" class="form-control" type="text"> 
        <i class="fa fa-calendar"></i> 
       </div> 
      </div> 

      <div class="group"> 
       <label for="room-type">Car type</label> 
       <div> 
        <select id="room-type" name="room-type" class="form-control"> 
         <option value="Single room">a</option> 
         <option value="Double room">b</option> 
         <option value="Apartment">c</option> 
        </select> 
       </div> 
      </div> 

      <div class="group"> 
       <label for="room-requirements">Car requirements</label> 
       <div> 
        <select id="room-requirements" name="room-requirements" class="form-control"> 
         <option value="No Preference">a</option> 
         <option value="Non Smoking">b</option> 
         <option value="Smoking">c</option> 
        </select> 
       </div> 
      </div> 




      <div class="group"> 
       <label for="adults">Adults</label> 
       <div> 
        <select id="adults" name="adults" class="form-control"> 
         <option value="1">1</option> 
         <option value="2">2</option> 
         <option value="3">3</option> 
         <option value="4">4</option> 
        </select> 
       </div> 
      </div> 
      <div class="group"> 
       <label for="children">Children</label> 
       <div> 
        <select id="children" name="children" class="form-control"> 
         <option value="-">-</option> 
         <option value="1">1</option> 
         <option value="2">2</option> 
         <option value="3">3</option> 
         <option value="4">4</option> 
        </select> 
       </div> 
      </div> 
      <div class="group"> 
       <label for="name">Name</label> 
       <div><input id="name" name="name" class="form-control" type="text" placeholder="Name"></div> 
      </div> 
      <div class="group"> 
       <label for="email">Email</label> 
       <div><input id="email" name="email" class="form-control" type="email" placeholder="Email"></div> 
      </div> 
      <div class="group"> 
       <label for="phone">Phone</label> 
       <div><input id="phone" name="phone" class="form-control" type="text" placeholder="Phone"></div> 
      </div> 
      <div class="group"> 
       <label for="special-requirements">Special requirements</label> 
       <div><textarea id="special-requirements" name="special-requirements" class="form-control" cols="" rows="5" placeholder="Special requirements"></textarea></div> 
      </div> 
      <div class="group submit"> 
       <label class="empty"></label> 
       <div><input name="submit" type="submit" value="Submit"/></div> 
      </div> 
     </div> 
     <div id="form-loading" class="hide"><i class="fa fa-circle-o-notch fa-spin"></i></div> 
    </form> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>  
    <script src="js/plugins.js"></script> 
    <script src="js/main.js"></script> 

    <script type="text/javascript"> 
//Autocomplete variables 
var input = document.getElementById('location'); 
var input2 = document.getElementById('location2'); 
var searchform = document.getElementById('booking_form'); 
var place; 
var autocomplete = new google.maps.places.Autocomplete(input) 
var autocomplete2 = new google.maps.places.Autocomplete(input2); 

//Google Map variables 
var map; 
var marker; 

//Add listener to detect autocomplete selection 
google.maps.event.addListener(autocomplete, 'place_changed', function() { 
    place = autocomplete.getPlace(); 
    //console.log(place); 
}); 

//Add listener to detect autocomplete selection 
google.maps.event.addListener(autocomplete2, 'place_changed', function() { 
    place = autocomplete2.getPlace(); 
    //console.log(place); 
}); 

//Add listener to search 
searchform.addEventListener("submit", function() { 
    var newlatlong = new google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng()); 
    map.setCenter(newlatlong); 
    marker.setPosition(newlatlong); 
    map.setZoom(12); 

}); 

//Reset the inpout box on click 
input.addEventListener('click', function(){ 
    input.value = ""; 
}); 
//Reset the inpout box on click 
input2.addEventListener('click', function(){ 
    input2.value = ""; 
}); 



function initialize() { 
    var myLatlng = new google.maps.LatLng(51.517503,-0.133896); 
    var mapOptions = { 
    zoom: 1, 
    center: myLatlng 
    } 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title: 'Main map' 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

Depuis que vous avez chargé jQuery, je vous recommande enveloppez tout ce que vous le code js à runned une fois que la page est chargée:

$(document).ready(function(){ 
//CODE HERE 
}); 

En faisant cela, votre problème est résolu, vérifier ce violon: http://jsfiddle.net/kmwhukj2/