button causing page to reload

Question

I am using html and jquery on my page.

In my html i have one button which when clicked will fire one function.

When page loads i call main function in document ready. Here is my code

<script>
      $(document).ready(function () {
        main();

      });
      function main(){
             //some code goes here
      }

      function search(){
           //some logic
      }
</script>

<div>
  <button id="btnSearch" onclick="search()" >Search</button>
</div>

But when i click on button then it goes inside main function and executes code inside it. Why? It should only call function search and nothing else. What am i doing wrong?

Add your code inside of those functions so that we can answer. — Uzbekjon, May 06 '16 at 12:54
The description of the problem and the title of the question don't seem to be the same thing... — David, May 06 '16 at 12:56

score 3 · Accepted Answer · answered May 06 '16 at 12:53

3

by default BUTTONS are of type SUBMIT, try this instead

<button type="button" id="btnSearch" onclick="search()" >Search</button>

answered May 06 '16 at 12:53

imvain2

15,480
1
16
21

score 0 · Answer 2 · answered May 06 '16 at 12:56

This is working fine for me. See demo

      $(document).ready(function () {
        main();

      });
      function main(){
          //some code goes here
         alert('main');          
      }

      function search(){
           //some logic
           alert('search');
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button id="btnSearch" onclick="search()" >Search</button>
</div>

button causing page to reload

2 Answers2

Linked

Related