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
– Zakaria Acharki, Commented Nov 7, 2015 at 14:03
Just to call/run the function NavToSearch() so I can use/save input and redirect to the Search.aspx page — user2164182
– user2164182, Commented Nov 7, 2015 at 14:07

Zakaria Acharki · Accepted Answer · 2015-11-07 15:12:50Z

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 7, 2015 at 15:12

answered Nov 7, 2015 at 13:55

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user2164182 Over a year ago

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)

Zakaria Acharki Over a year ago

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.

user2164182 Over a year ago

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?

Zakaria Acharki Over a year ago

Okay update the code in your question with the changes you made and i'll check.

user2164182 Over a year ago

Thanks so much, it worked! For readers: remember return false; at both the if AND else.

|

hguser · Accepted Answer · 2015-11-07 14:08:06Z

1

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

answered Nov 7, 2015 at 14:08

hguser

36.2k55 gold badges173 silver badges305 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:15:43Z

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, 2017 at 12:15

CommunityBot

11 silver badge

answered Nov 7, 2015 at 13:57

numX

8608 silver badges27 bronze badges

Collectives™ on Stack Overflow

button onclick call javascript function not working

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related