按钮onclick调用javascript函数无法正常工作

时间:2015-11-07 13:51:13

标签: javascript asp.net

我试图在用户点击导航栏搜索按钮时调用一个函数,但它似乎没有调用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>

3 个答案:

答案 0 :(得分:1)

听起来您使用的是Asp.net Web表单,如果为true,则您的页面将包含form元素,然后对于button type=submit,将触发表单默认提交,通常会重定向到您当前的页面。

您可以通过点击处理程序中的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.
         }

答案 1 :(得分:1)

如果您只想在点击按钮时拨打NavToSearch(),则必须将按钮类型从submit更改为button

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

在评论代码中,您必须$替换#代表navinput.text()代替.val()

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

而不是:

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

希望这有帮助。

答案 2 :(得分:0)

对于提交按钮,表单提交将取消重定向,或者如果在之后添加return false,重定向将取消提交。

检查此问题:

How do I redirect users after submit button click?