按鈕onclick調用javascript函數無法正常工作

Question

我試圖在用戶點擊導航欄搜索按鈕時調用一個函數，但它似乎沒有調用javascript函數，只是加載相同的頁面。 我看過例子和其他問題，但我沒有看到任何錯誤..任何幫助將不勝感激，這是我的代碼，它在我的Masterpage.aspx：

           <div class='navbar-form navbar-left' role='search'>
                    <div class='inputgroup'>
                         <input class='form-control' id='navinput' type='text' placeholder='Search'/>
                         <button class='btn btn-default' type='submit' id='navsearchbtn' runat='server' onclick='NavToSearch();'>
                             <span class='glyphicon glyphicon-search'></span>
                        </button>
                    </div>       
                </div>

這是我的Js代碼（也在Masterpage.aspx中）：我只是測試重定向以查看它是否有效。 （我要實現的代碼在評論中請檢查一下也沒問題，然后我想使用輸入文本來搜索數據庫）

  <script type='text/javascript'>                   
             function NavToSearch() {
                 window.location.href = 'Search.aspx';

                        /*var navsearchText = $('$navinput').text();

                    if (navsearchText == '')
                    {
                        $('$navinput').attr('placeholder', 'Enter Search Text');
                        return false;
                    }
                    else window.location.href = 'Search.aspx'; */
             }
 </script>

更新的腳本/功能：

 <script type='text/javascript'>
 function NavToSearch()
                 {                     
                 var navsearchText = $('#navinput').text();

                 if (navsearchText == '')
                 {
                     $('#navinput').attr('placeholder', 'Enter Search Text');
                     return false;
                 }
                 else {
                     window.location.href = 'Search.aspx';
                     //return false;
                 }

                     /*OR
                         $(document).ready(function(){
                             var url = "OrderHistory.aspx";
                             $(location).attr('href',url);
                         })*/                            
             }
        </script>

Answer 1

如果您只想在單擊按鈕時調用NavToSearch() ，則必須將按鈕類型從submit更改為button ：

<button class='btn btn-default' type='button' id='navsearchbtn' runat='server' onclick='NavToSearch();'>
      <span class='glyphicon glyphicon-search'></span>
</button>

在您的注釋代碼中，您必須使用#替換id為navinput $ sign，並將.text()替換$ .val() ：

$('#navinput').val();

代替 ：

$('$navinput').text();

希望這可以幫助。

Answer 2

聽起來像你使用的是Asp.net Web Forms，如果是，你的頁面將有一個form元素，然后對於一個type=submit的button ，默認情況下會觸發表單提交，通常會重定向到你當前的頁面。

您可以通過在單擊處理程序中return false來避免這種情況：

         function NavToSearch() {
             window.location.href = 'Search.aspx';

                    /*var navsearchText = $('$navinput').text();

                if (navsearchText == '')
                {
                    $('$navinput').attr('placeholder', 'Enter Search Text');
                }
                else window.location.href = 'Search.aspx'; */

             return false; //prevent the form submit whatever.
         }

Answer 3

對於提交按鈕，表單提交將取消重定向，或者如果之后添加了return false ，則重定向將取消提交。

檢查這個問題：

如何在提交按鈕單擊后重定向用戶？