Question

我试图在用户在文本字段中输入数据后执行Javascript函数，然后按Enter键。但是当按下输入时，它会刷新页面。这是我的代码：

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <link rel="stylesheet" type="text/css" href="css/distance.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
    <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?v=3&key=xxxxxxxxxxxxxxxxxxxxxxxxxxxx&libraries=geometry&sensor=true">
    </script>
</head>


<form action="distance_calc_sort_db.php">
    Patient Zip Code at Minimum
    <input type="text" id="address1" name="address1" value="" size="15" autofocus>
    <input type="button" id="nsgsearchbutton" name="find" value="search" onclick="showLocationLoop()">
    <input type="submit" name="find0" value="clear">
</form>

<script>
    function showLocationLoop() {
        alert("In showLocationLoop");
        geocoder.geocode({'address': document.getElementById("address1").value}, function (response, status) {
                if (status != google.maps.GeocoderStatus.OK) {
                    alert("Please enter patient's zip code!");
                }
                else {
                    /***** 1 */
            <?php   $loop_count = 1;
                    foreach ($locations_array as $location_name => $location_address) { ?>
                        var location1 = {LatLng: response[0].geometry.location, address: response[0].formatted_address};
                    <?php   if ($loop_count==1) { ?>
                                createPoint(location1.address,'red');
                    <?php } ?>
                        geocoder.geocode({'address': '<?php echo $location_address ?>'}, function (response,status) {
                            if (status != google.maps.GeocoderStatus.OK) {
                                alert("Sorry, we were unable to geocode the second address due to " + status);
                            }
                            else {
                                setTimeout(function() {
                                    var location2 = {LatLng: response[0].geometry.location, address: response[0].formatted_address};
                                    try {
                                        var glatlng1 = new google.maps.LatLng(location1.LatLng.lat(), location1.LatLng.lng());
                                        var glatlng2 = new google.maps.LatLng(location2.LatLng.lat(), location2.LatLng.lng());
                                        // (y meters * 1.0936) / 1760 ===> miles
                                        var distancemeters = google.maps.geometry.spherical.computeDistanceBetween(glatlng1, glatlng2);
                                        var distancemiles = ((distancemeters * 1.0936) / 1760).toFixed(1);
                                        var distancekm = (distancemeters / 1000).toFixed(1);
                                <?php   if ($loop_count==1) { ?>
                                            document.getElementById('results1').innerHTML = "<strong><font color='red'>Patient's Address: </strong>" + location1.address + "</font>";
                                <?php   } ?>
                                        document.getElementById('results' + '<?php echo $loop_count+1 ?>' + '_1').innerHTML = "<?php echo $location_name ?>";
                                        document.getElementById('results' + '<?php echo $loop_count+1 ?>' + '_2').innerHTML = distancemiles + " miles";
                                        setTimeout(function() {
                                            createPoint(location2.address,'green');
                                        }, <?php echo $loop_count * 500 ?>/*2500 for 6 locations*/);
                                <?php   // sort table after all geocoding is complete
                                        if ($loop_count==count($locations_array)) { ?>
                                            $(document).ready(function() {
                                                //setTimeout(function(){ $("#myTable").tablesorter({sortList: [ [1,0]]});  }, 5000);
                                                // tablesorter to sort on the second column in ascending order http://tablesorter.com/docs/
                                                $("#myTable").tablesorter({sortList: [ [1,0] ]});
                                            });
                                <?php   } ?>
                                    }
                                    catch (error) {
                                        alert(error);
                                    }
                                }, <?php echo $loop_count * 600; ?>/*2000 for 6 locations*/);
                            }
                        });
            <?php       $loop_count++;
                    } ?>
                }
            });
        }
</script>

<script>
    $(document).ready(function(){
        $('#address1').keypress(function(e){
          if(e.keyCode==13) {
            $('#nsgsearchbutton').click();
            //alert("PRESSED test Search!!! Wooohhhooo!!!");
          }
        });
    });
</script>

由于一些奇怪的原因，我得到警告消息显示但它没有在showLocationLoop（）函数中运行地理编码代码，而是刷新页面。请帮忙。

Answer 1

当您在form标记内按Enter键时，它会提交表单。您可以对onsubmit标记使用form属性，并从那里调用您的JavaScript函数。在调用函数后写return false，这将告诉表单不提交，因此页面将不会刷新。

按Enter进入刷新页面而不是执行Javascript功能

1 个答案: