Yes, i know this is a duplicate, but all the answers i've read didn't help me, i have a side by side working example, from w3school, it works, and mine doesn't, what i am trying to do is show a tooltip warning the user to use numbers only, but instead, it just refreshes the page.
This is my full html page code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" media="screen" href="Css/style.css"> /*---not using the bootstrap css because it messes up the form layout, so i copied every tooltip referenced block to my style.css instead.---*/
<script type="text/javascript" src="js/tooltip.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var previous;
$(document).ready(function(){
$('.btn').tooltip();
});
//Buy Button JS code
$(function () {
$("#searchform").bind('submit', function () {
var str = $('#search-form').val();
if (str.match(/^[0-9]*$/)) {
$('#search-form').tooltip({title="You did good :)"});
}
else
{
$('#search-form').tooltip({title="Please enter numbers ONLY !"});
}
});
});
</script>
</head>
<body>
<div class="box">
<form class="search-form" method="post" id="searchform">
<input type="text" id="search-form" name="textbox" placeholder="Please enter your code" required/>
<button type="submit" name="submit" class="btntxt">Validate</button>
<div id="search_results"></div>
</form>
</div>
</body>
</html>
I didn't put the data-toggle:"tooltip" neither a title:"sometitlehere" in the element's options, because i don't really need it.
There are few mistakes in your code,
//it should be title: and not title=
$('#search-form').tooltip({title:"You did good :)"});
The above line initializes the tooltip once your code excutes. After that if the tooltip title is updated, the tooltip is needed to be destroyed and re-initialized with new title.
var previous;
//Buy Button JS code
$(function () {
$("#searchform").bind('submit', function () {
var newTooltip="";
var str = $('#search-form').val();
if (str.match(/^[0-9]*$/)) {
newTooltip = "You did good :)";
}
else
{
newTooltip = 'Please enter numbers ONLY !';
}
$('#search-form').attr('title', newTooltip).tooltip('fixTitle').tooltip('setContent').tooltip('show');
setTimeout(function(){
$('#search-form').tooltip('hide').tooltip('destroy');
}, 1500);
});
});<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
/*---not using the bootstrap css because it messes up the form layout, so i copied every tooltip referenced block to my style.css instead.---*/
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="box">
<form class="search-form" method="post" id="searchform">
<input type="text" id="search-form" name="textbox" placeholder="Please enter your code" required/>
<button type="submit" name="submit" class="btntxt">Validate</button>
<div id="search_results"></div>
</form>
</div>