How to create button event occurs without page load?

Question

I am working on an asp.net application where I have button written like this:-

<button onclick='javascript:imagech(this);' class='close_product color_dark tr_hover'><i class='fa fa-times'></i></button>

I have also a client-side javascript function for the above button:

<script type="text/javascript">
 function imagech() {
 alert('image clicked.');
 }
</script>

What I want that is whenever I click that function then the button click event should not fire page-load. The above object is not server control but it's event occurs page-load. I can also use another html control like this:

<input type='button' onclick='javascript:cartclicked(this);' value='X' class='close_product color_dark tr_hover' />

and this does not occurs page-load but I want icon also used as :

<i class='fa fa-times'></i>

inside <button> tag. but the <i> tag is not used in <input> tag. How I can <button> tag event without any page-load? Please help me someone here.

• guradio: without any page-load i am not sure if i understand this one correctly
• Rayon: Use JavaScript event binding inside window.onload handler
• Sunny Sandeep: @Rayon Dabre how can i use that?
• Rayon: window.onload= function(){ document.getElementById(YOUR_ID).addEventListener('click', ....) }
• Sunny Sandeep: @guradio when i use <button> tag which is a html control not a server control and when i click on this the page-load occurs which i want to stop.

Answer 1

it seems you are using <button> inside a <form> element. By default a button acts as a submit button and it tries to submit your form on click.

In order to continue using button and avoid this issue you need to specify type as button as shown below

<button type="button" onclick='javascript:imagech(this);' class='close_product color_dark tr_hover'><i class='fa fa-times'></i></button>

Answer 2

If I understand you correctly the problem is that the button is inside a form (The main asp.net form) and the click event post the form to the server. That's why you the page load occurred.

The solution Just add to the button (it doesn't matter if you are using input or button) attribute type="button".