窗體行爲不同時按下輸入，而不是按鈕

我有一個窗體，我已經使用jquery來檢測何時按下按鈕，以及用於顯示數據沒有頁面重新加載。窗體行爲不同時按下輸入，而不是按鈕

當按鈕被按下時，它正在工作完美，但是當按下進入頁面時刷新並沒有任何反應。我有按鈕綁定到jQuery，但我不知道該怎麼做來處理按下輸入。

HTML：

<table border="0" width="100%" cellspacing="1" cellpadding="2" style="margin-bottom:20px;"> 
    <tbody> 
     <tr class="infoBoxContents"> 
      <td style="padding:20px;"> 
       <table border="0" width="100%" cellspacing="0" cellpadding="2"> 
        <tbody> 
         <tr> 
          <td width="50%"> 
           <table width="100%"> 
            <tbody> 
             <tr> 
              <td class="main"> 
               <b>Calculate shipping</b> 
               <div class="smallText">Shipping Weight: 6lbs</div> 
              </td> 
             </tr> 
             <tr> 
              <td class="main" style="padding:10px;">Country: 
               <select name="ship_country_id" id="ship_country_id"> 
                <option value="1">Afghanistan</option> 
                <option value="2">Albania</option> 
                <option value="3">Algeria</option> 
                <br>Post code/ Zip code: 
                <input type="text" name="postcode" id="postcode_entry"> 
              </td> 
             </tr> 
            </tbody> 
           </table> 
          </td> 

          <td class="main" width="50%" align="right"> 
           <div class="contentText" id="shipping_method"></div> 
          </td> 

         </tr> 
         <tr> 
          <td> 
           <button type="button" id="estimate" style="cursor:pointer; width:110px; margin-left:10px; padding:5px;"> 
            <span class="ui-button-text" style="float:left;">Calculate</span> 
            <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-e" style="float:right;"></span> 

           </button> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
     </tr> 
    </tbody> 
</table>

的javascript：

$(function() { 

    $('#estimate').click(function() {  
     var postcode_entry = $('#postcode_entry').val(); 
     var country_entry = $('#ship_country_id').val(); 

     $("#shipping_method").html("<div style=\'margin:20px auto;width:100px;text-align:center;\'><img src=\'ext/jquery/bxGallery/spinner.gif\' /></div>").show(); 

     $.get("checkout_shipping.php", { 
       country: country_entry, 
       refresh_quotes: "1", 
       postcode: postcode_entry, 
       zone_name: "canada" 
      }, 
      function (data) { 
       $("#shipping_method").html(data); 
      } 
     ); 

    }); 
});

來源

2013-12-17 Sackling

使用[.submit（）]（http://api.jquery.com/submit/）而不是'.click（）'。 '.submit（）'考慮到你可以提交的每一種方式。 –

如果我更改表單提交，表單將被提交，頁面將不得不刷新。 – Sackling

使用'e.preventDefault（）;' –

這是因爲您需要找到submit上發生的情況 - 這是您按Enter時調用的事件，它不會觸發按鈕的單擊。

我不知道你form的ID是的，但你可以做一些這樣的：

$("#myform").submit(function(e) { 
    e.preventDefault(); 
    //do something 
    ...

用此代替按鈕點擊事件。

來源

2013-12-17 17:48:41 MMM

謝謝你結束了工作。起初我很困惑，因爲我的按鈕不再工作，但輸入是當我改變提交。我需要更改按鈕類型以提交。爲什麼函數需要參數「e」或任何參數？爲什麼不只是preventDefault（）;工作？ – Sackling

因爲'e'是事件，並且您想要防止與該事件關聯的默認行爲。如果有'preventDefault（）'，那就意味着在全局範圍內有一個類似這樣的函數。它怎麼知道你在說什麼事件？它不會，所以它就是事件對象的一部分。我希望這有幫助！ – MMM

取而代之的是單擊按鈕時運行代碼，提交表單時運行它。

$('YOUR_FORM_HERE').submit(function() {

這將捕獲任何提交表單的方式。

來源

2013-12-17 17:48:17

您可以添加此jQuery來綁定到同一個事件：

$(document).on('keypress', function(e){ 
    if(e.which === 13){ 
    $('#estimate').click(); 
    } 
});

雖然這將是更好的分離是被執行到一個單獨的函數的函數，並調用的是，這仍然會工作得很好。

來源

2013-12-17 17:50:21

窗體行爲不同時按下輸入，而不是按鈕

回答

相關問題