Question

我正在做一个计算两个地址之间距离的表单（使用Google矩阵API），当我提交表单时，它仅显示我在两点之间的距离和持续时间（在2输入提交中）。我希望第一个输入是显示两点之间的持续时间和公里数的输入，第二个输入是将这些信息发送到将放入数据库的文件“ toreservationRequest.php”的方法。

这里有个更好的主意：

<form action="reservationRequest.php" method="POST" class="container form-control text-center" id="distance_form">
<a href="book.php" class="closeJquery float-right"><img src="img/backspace-arrow.png"></a>
    <h3>Réservation standard :</h3><br>
    <label>Date de départ</label>
    <input type="text" id="datepickerGo" name="datepickerGo" class="datepicker form-control" name="go" placeholder="Selectionez une date"><br>
    <br>

    <div class="form-group"><label>Départ: </label> <input class="form-control" id="from_places" placeholder="Entrez l'adresse de départ" name="from_places"/> <input id="origin" name="origin" required="" type="hidden" /></div>

    <div class="form-group"><label>Arrivée: </label> <input class="form-control" id="to_places" placeholder="Entrez l'adresse d'arrivée" name="to_places"/> <input id="destination" name="destination" required="" type="hidden" /></div>
    <input class="btn btn-dark" type="submit" id="calculate" value="Calculer la durée et la distance en KM" />

    <div id="result"></div>

    <br>
    <label>Remarque</label>
    <input type="text" name="note" class="form-control" placeholder="Entrez une remarque">
    <br>
    <div class="alert alert-secondary" role="alert">
      Prix TTC : 50€
    </div>
    <br>
    <input type="submit" class="btn btn-outline-dark form-control">

</form>

javascript代码：

$(function() {

    google.maps.event.addDomListener(window, 'load', function () {
        var from_places = new google.maps.places.Autocomplete(document.getElementById('from_places'));
        var to_places = new google.maps.places.Autocomplete(document.getElementById('to_places'));

        google.maps.event.addListener(from_places, 'place_changed', function () {
            var from_place = from_places.getPlace();
            var from_address = from_place.formatted_address;
            $('#origin').val(from_address);
        });

        google.maps.event.addListener(to_places, 'place_changed', function () {
            var to_place = to_places.getPlace();
            var to_address = to_place.formatted_address;
            $('#destination').val(to_address);
        });

    });

    // calcule la distance entre point A et point B:
    function calculateDistance() {
        var origin = $('#origin').val();
        var destination = $('#destination').val();
        var service = new google.maps.DistanceMatrixService();
        service.getDistanceMatrix(
            {
                origins: [origin],
                destinations: [destination],
                travelMode: google.maps.TravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.metric, // KM et métres
                avoidHighways: false,
                avoidTolls: false
            }, callback);
    }

    // renvoie la distance:
    function callback(response, status) {
        if (status != google.maps.DistanceMatrixStatus.OK) {
            $('#result').html(err);
        } else {
            var origin = response.originAddresses[0];
            var destination = response.destinationAddresses[0];
            if (response.rows[0].elements[0].status === "ZERO_RESULTS") {
                $('#result').html("erreur");
            } else {
                var distance = response.rows[0].elements[0].distance;
                var duration = response.rows[0].elements[0].duration;
                console.log(response.rows[0].elements[0].distance);
                var distance_in_kilo = distance.value / 1000;

                var duration_text = duration.text;
                var duration_value = duration.value;

                $('#in_kilo').text(distance_in_kilo.toFixed(2));
                $('#duration_text').text(duration_text);
                $('#duration_value').text(duration_value);
                $('#from').text(origin);
                $('#to').text(destination);

                console.log(distance_in_kilo);
                console.log(duration_text);

                $("#result").html("<label>Distance (KM): </label><p id='distance'>"+ distance_in_kilo +"</p> <label>Durée : </label><p id='duree'>"+ duration_text +"<p>");
            }
        }
    }

    // affiche resultat
    $('#distance_form').submit(function(e){
        e.preventDefault();
        calculateDistance();

        var strFromPlaces = $('#from_places').val();
        var strToPlaces = $('#to_places').val();

        if(strFromPlaces.length == '' || strToPlaces.length ==''){
            alert('Veuillez renseigner tout les champs');
        }

    });


});

非常感谢您的帮助。

Answer 1

因为您有e.preventDefault();提交

将此用于预期结果：

    $('#submit').click(function(e){
        e.preventDefault();
        calculateDistance();

        var strFromPlaces = $('#from_places').val();
        var strToPlaces = $('#to_places').val();

        if(strFromPlaces.length == '' || strToPlaces.length ==''){
            alert('Veuillez renseigner tout les champs');
        }
        $("#distance_form").submit();

    });

Answer 2

e.preventDefault();将阻止表单提交。哪个好但是，完成计算后，您需要提交表格。因此，添加$("#distance_form").submit();，表单数据将被提交。

Answer 3

我找到了解决方案：我在第一个输入提交中输入了ID和“计算”，在第二个提交中输入了ID“提交2”。

在表格上，我删除了action =“ reservationRequest.php”

在第二次提交时，我输入了属性formaction="reservationRequest.php"

，对于javascript：

$('#calculate').click(function(e){
        e.preventDefault();
        calculateDistance();
}

为什么带有两个按钮的表单不提交表单？

3 个答案: