发送表格/谷歌地图自动完成

Question

我正在尝试以表格形式收集一些信息。 问题是这样的。 当我使用

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

表单有效，但自动完成功能无效。 当我将其更改为

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

自动完成功能有效，但发送表单无效。 有什么简单的解决方案吗？

<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

由于您已加载jQuery，因此我建议您包装页面加载后要运行的所有js代码：

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

通过这样做，您的问题得到解决，请检查以下小提琴： http : //jsfiddle.net/kmwhukj2/