The problem is simple, I just can't find a way to solve it. I just to display a text with a click of a button but when the page is reloaded I want the text to still be displayed without clicking the button again. My code is the following:
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<div id='result' style: 'display:none;'>
<p></p>
</div>
<form method="post" action="#">
<input type="button" value="Show" id='button'/>
</form>
<script type="text/javascript">
$(document).ready(function(){
var div1Show = localStorage.getItem('div1_show');
if (div1Show) {
$("#div1").remove();
} else {
$("#div1").show();
}
$("#button").click(function(){
$("#result").text("Complete");
$("#div1").show();
localStorage.setItem('div1_show', 'true');
});
});
</script>
You are placing a string into the cookie just change the following line
localStorage.setItem('div1_show', 'true');
To a boolean
localStorage.setItem('div1_show', true);
Related
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<button onclick="demo()" name="btn">click here</button>
</form>
<script type="text/javascript">
function demo()
{
location.href="http://www.google.com";
}
</script>
</body>
</html>
if the button is placed without the form tag it is working properly. If it is placed inside the tags its not getting redirected when clicked on it.
Always specify the type attribute for a <button> element. Different browsers use different default types for the <button> element.
If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form.
<form>
<button type="button" onclick="demo()" name="btn">Click Here</button>
<!-- or you can use input element -->
<input type="button" onclick="demo()" value="Click Here" />
</form>
<script>
function demo() {
window.location.href = "http://www.google.com"
}
</script>
<html>
<head>
<title></title>
</head>
<body>
<form>
<button onclick="return demo()" name="btn">click here</button>
</form>
<script type="text/javascript">
function demo()
{
location.href="http://www.google.com";
return false;
}
</script>
</body>
</html>
This modification prevent the default action of clicking on a button inside a form (which is submitting it) and relocate to google.
If you don't need the form do not use it.
It should be look like this.
<form>
<button onclick="demo(event)" name="btn">click here</button>
<script type="text/javascript">
function demo(e) {
e.preventDefault();
window.location.href = "http://www.google.com";
}
</script>
</form>
or you can try this also
<form>
<button onclick="demo(event)" name="btn">click here</button>
</form>
<script type="text/javascript">
function demo(e) {
e.preventDefault();
window.location.href = "http://www.google.com";
}
</script>
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>
You are using form so you need to return true or false on validate action so your code should be like
if (str.match(/^[0-9]*$/)) {
$('#search-form').tooltip({title="You did good :)"});
return true;
}
else
{
$('#search-form').tooltip({title="Please enter numbers ONLY !"});
return false;
}
are you initialising the tooltip in the js? - tooltips won't show unless you have this in the code:
$(function(){
$("[data-toggle=tooltip]").tooltip();
})
ok - I just looked at your code - you have :
$('.btn').tooltip();
listed in theree, but your button has the class "btntxt" and you are also trying to get a tooltip on the search form - but that has the id of "search-form" - neither of which will be affected by your tooltip declaration. Best to use the one I gave in the is post so that all elements with tooltips can display them. Setting them to individual classes or ids is too restrictive if you forget that your class or id is not the same as the one listed in the js.
you have this order to your scripts:
<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>
Does the tooltip.js require jquery? - if so you may need to invert that order
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/tooltip.js"></script>
I would like the popup to automatically set on and not have to click to make the event. Can you help?
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#open').click(function(){
// enter code here
$('.popup-overlay').fadeIn('slow');
$('.popup-overlay').height($(window).height());
return false;
});
$('#close').click(function(){
$('#popup').fadeOut('slow');
$('.popup-overlay').fadeOut('slow');
return false;
});
});
</script>
</head>
<body>
<div id="content">
<div id="column-right">click aqui</div>
</div>
<div id="popup" style="display: none;">
<div class="content-popup">
<div class="close"><img src="images/close.png"/></div>
<div> enter code here
<h2>Contenido POPUP</h2>
</div>
</div>
Means whenever the page is loaded the pop up automatically opens without any client side event.
Just take the code out of the click() event:
And remove the div with .popup-overlay class. It's useless
$(document).ready(function(){
$('#popup').fadeIn('slow');
$('#popup').height($(window).height());
});
You may need to fade the #popup also.
$(document).ready(function(){
$('#popup').fadeIn('slow');
$('.popup-overlay').fadeIn('slow');
$('.popup-overlay').height($(window).height());
});
On clicking the radio button nothing happens, why?
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="jquery.js">
$("input[name='check1']",$('#Search_By')).change(function()
{
alert('yo');
});
</script>
</head>
<body class="well">
<form action="/abc/readservlet" method="post">
<div class="well" id="Search_By">
<h3><b/>Search BY</h3>
<input type="Radio" name="check1" value="Search BY Key"> Key<br/><br/>
<input type="Radio" name="check1" value="Search By Tablename"> Tab_name
<br/>
</div>
On clicking radio button nothing happens...
If your <script> tag has a src attribute, its contents will be ignored, so your code isn't going to actually run at all.
You need to put your code into a separate script tag and run the code when the document is ready:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#Search_By input[name='check1']")).change(function() {
alert('yo');
});
});
</script>
Or put both of those script tags at the very bottom of the <body> tag.
The javascript code to create the onchange handler should be as follows. Try it out.
...
$("#Search_By input[name='check1']").change(
function()
{
alert('yo');
});
...
To make a long story short, I need to be able to prevent the default action from a input type="file". In other words I do not want to display the system's open dialog box when the user clicks on the "Browse" or "Choose File". I already have the replacement dialog working, but the system's open dialog box still appears.
Below is a sample of what I am currently trying to accomplish this. (PS: I am using Chrome 21)
<html>
<head>
<script type="text/javascript">
<!--
file_onclick = function()
{
// Show custom dialog instead...
event.stopPropagation(); // Doesn't work
return false; // Neither does this
};
//-->
</script>
</head>
<body>
<input type="file" onclick="javascript: file_onclick();" />
</body>
</html>
Any ideas?
How about
<input type="file" onclick="return false" />
or if you need the file_onclick function
<html>
<head>
<script type="text/javascript">
<!--
file_onclick = function()
{
// Show custom dialog instead...
return false;
};
//-->
</script>
</head>
<body>
<input type="file" onclick="return file_onclick();" />
</body>
</html>
Got it. I needed to disable the tag and then use the setTimeout method to re-enable it.
<html>
<head>
<script type="text/javascript">
<!--
file_onclick = function(o)
{
// Show custom dialog instead...
o.disabled = true;
setTimeout(function() { o.disabled = false; }, 1);
};
//-->
</script>
</head>
<body>
<input type="file" onclick="javascript: file_onclick(this);" />
</body>
</html>