CODEWITHSUNDEEP
javascriptjqueryhtml
LordCommander
LordCommander

Reputation: 91

avoid auto-refresh on clicking button

I have simple HTML code 

<form class="searchbox" action="" >
<input type="search" placeholder="Search KB" id="SearchField"/>
<button value="search" id="SearchButton">&nbsp;</button>
</form>

and simple event listener

$('#SearchButton').on("click",function(events) {
// your stuff
alert("work darn it!!!!!!!!!!!!!!!!!!!!!!!!!")
events.preventDefault();
var bla = $('#SearchField').val();
console.log("bla")
 var jsonString = JSON.stringify(bla);
  return false;
  });

when i click button page keeps refreshing when i put this It doenst run my event listener when i do this

I am not getting where i am going wrong

Upvotes: 0

Views: 2240

Answers (3)

Rohit Batra
Rohit Batra

Reputation: 670

This should work now. You've to just disable the default function that submit button in a form has that is to self post. 

 $('#SearchButton').on("click",function(e) {
 // Stop propagation & prevent Default action
e.stopPropagation();
e.preventDefault():
alert("work darn it!!!!!!!!!!!!!!!!!!!!!!!!!")
var bla = $('#SearchField').val();
console.log("bla")
 var jsonString = JSON.stringify(bla);
  return false;
  });

Upvotes: 0

MMMMS
MMMMS

Reputation: 2201

Update like below,

$(function(){
$('#SearchButton').click(function() {
    alert('working fine..');
    var bla = $('#SearchField').val();
    alert('Search field name :'+bla);
    return false;
});

Upvotes: 0

Rohit Suthar
Rohit Suthar

Reputation: 3628

Update your Jquery like this - 

$(document).ready(function(){
  $('#SearchButton').click(function() {
    alert('working fine..');
    return false;
  });
});

Upvotes: 2

Related Questions