2014-06-11 6 views
0

사용자가 텍스트 필드에 데이터를 입력 한 다음 enter 키를 누르면 Javascript 기능을 실행하려고합니다. 하지만 Enter 키를 누르면 페이지가 새로 고침됩니다. 대신 페이지를 새로 고침,Javascript 기능 대신 페이지 새로 고침 입력하기

<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() 함수에서 지오 코딩 코드를 실행하지 않습니다 얻을 어떤 이상한 이유 : 여기 내 코드입니다. 도와주세요.

+1

PHP를 구분할 수있는 JavaScript 코드입니다. 당신이 난독 화에 도전하지 않는다면,이 언어들을 혼합 할 이유가 없습니다. – Halcyon

+0

우리 중 일부는 다국어를 구사합니다. ;-) 귀중한 기술입니다. – bioCodeWarrior

+0

웹 개발자로서 다국어를 구사해야하지만 전투를 선택해야합니다. 지금은 마치 이야기를하고있는 것처럼 보이고 당신은 de idioma en el medio de dea frase를 바꾸고 있습니다. – Halcyon

답변

0

form 태그 안에 enter 키를 누르면 양식 제출이 수행됩니다. form 태그에 onsubmit 속성을 사용할 수 있으며 거기에서 자바 스크립트 기능을 호출 할 수 있습니다. 함수를 호출 한 후 return false을 쓰면 양식이 제출되지 않는다고 표시되므로 페이지가 새로 고쳐지지 않습니다.

+0

감사합니다. @ 엡실론 :-) 나는 폼 태그를 제거하고 버튼 섹션을 다음과 같이 변경했습니다 :'최소 환자 환자 우편 번호 \t \t \t \t \t \t 온 클릭 \t \t \t '및 페이지를 지우려면 JavaScript 기능을 추가했습니다. 다시 한 번 감사드립니다! :-) – bioCodeWarrior

관련 문제