button onclick call javascript function not working

Question

Im trying to call a function when user clicks on the navbar search button but it does not seem to call the javascript fuction and just loads the same page. I have looked at examples and other questions but I dont see anyhing wrong.. Any help would be much appreciated, Here is my code, It is in my 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>

Here is my Js code (also in Masterpage.aspx): I just have the test redirect to see if it works. (The code that i want to implement is in comments please check that is okay as well, I then want to use the input text to search database)

  <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>

UPDATED script/function:

 <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>

What you expect from your button to do? submit form or call `NavToSearch() ` or the both? — Zakaria Acharki, Nov 07 '15 at 14:03
Just to call/run the function NavToSearch() so I can use/save input and redirect to the Search.aspx page — user2164182, Nov 07 '15 at 14:07

Zakaria Acharki · Accepted Answer · 2015-11-07T15:12:50.200

1

If youwant just to call the NavToSearch() when the button clicked you have to change the type of the button from submit to button :

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

In your commented code you have to replace $ sign by # for the id navinput and also .text() by .val() :

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

Instead of :

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

Hope this helps.

edited Nov 07 '15 at 15:12

answered Nov 07 '15 at 13:55

Zakaria Acharki

66,747
15
75
101

Thanks for commented code, Ive tried both onclick() and submit (Im not sure if Im doing the submit correctly though) but I get the same result in which the current page is just reloaded (ie No redirect) – user2164182 Nov 07 '15 at 14:10
You're welcome, if you want _Just to call/run the function NavToSearch()_ you have to change a button type to `buttton` instead of submit check my updated answer. – Zakaria Acharki Nov 07 '15 at 14:12
I have replaced the $ with # and it works for the "" input and gives the correct placeholder. BUT when text is added and I click the page does not even reload. Whats the problem? – user2164182 Nov 07 '15 at 14:32
Okay update the code in your question with the changes you made and i'll check. – Zakaria Acharki Nov 07 '15 at 14:45
You're welcome brother, you have just to change `$('#navinput').text();` by `$('#navinput').val();` and it will work gracefully (check my updated answer). if the answer help you vote it up, if the answer is really what you looking for mark it as correct answer, GOOD LUCK. – Zakaria Acharki Nov 07 '15 at 15:09
1

Thanks so much, it worked! For readers: remember return false; at both the if AND else. – user2164182 Nov 07 '15 at 15:38

score 1 · Answer 2 · answered Nov 07 '15 at 14:08

Sounds like you are using Asp.net Web Forms, if true, your page will have a form element, then for a button with type=submit will trigger the form submit by default, generally this will redirect to your current page.

You can avoid this by return false in the click handler:

         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.
         }

score 0 · Answer 3 · edited May 23 '17 at 12:15

0

For a submit button, either the form submission will cancel the redirect, or the redirect will cancel the submission if return false is added after.

Check this question:

How do I redirect users after submit button click?

edited May 23 '17 at 12:15

Community

1
1

answered Nov 07 '15 at 13:57

numX

830
7
24

button onclick call javascript function not working

3 Answers3