I want to print the date when last time clicked on a button. It's actually working, but it's gone on page refresh but I don't want to hide it. How can I do it?
<input onclick="document.getElementById('demo').innerHTML=Date()" type="submit" name="Button" value="Button" />
<p id="demo"></p>
i hope this will work, you can check the codepen date and time of button clicked after clicking the button just refresh you will get the new date and time.
function storeDate() {
var currentDate = Date();
localStorage.setItem("dateofButton", currentDate)
}
(function(){
if(localStorage.dateofButton){
document.getElementById('demo').innerHTML = localStorage.dateofButton
}else{
// its empty
}
})()
<input onclick="storeDate()" type="submit" name="Button" value="Button" />
<p id="demo"></p>
You seem to have this at the end of a Form, so using the type submit submits the parent form, resulting in either a reload or a being redirected to the website specified in the action attribute of the form.
Either remove the type="submit" and make it a type="button" or return false from the onclick handler:
Input type button:
<input onclick="document.getElementById('demo').innerHTML=Date()" type="button" name="Button" value="Button" />
<p id="demo"></p>
Returning false:
<form action="something">
<input onclick="document.getElementById('demo').innerHTML=Date(); return false;" type="button" name="Button" value="Button" />
</form>
<p id="demo"></p>
The solution with localStorage, mentioned in comments, would look like this:
$(function() {
$("#demo").innerHTML = localStorage.date;
});
$("#buttonId").click(function() {
localStorage.date = Date();
});
Related
I am new to javascript and on every simple thing i get some kind of problem but this seems un-solve-able to me. I googled and nothing simillar.
After i input data into textbox and store it into variable, i print out variable in paragraph.
Problem is that output i printed out disappears within less than second. Code seems to be normal, what might it be? It looks like c when you dont put getch();
Thanks in advance.
<form>Unesite broj koji ce se ispisat kasnije.<br>
<input type="text" id="userInput">
<input type="submit" name="unos" value="Unesi i ispisi" onclick="unesi()"><br><br>
</form>
<br><br>
<p>Unjeli ste <b id="ispis"></b></p>
<script>
function unesi(){
var userInput = document.getElementById('userInput').value;
document.getElementById('ispis').innerHTML = userInput;
}
</script>
The <form> tag doesn't specify an action attribute, so when you click the submit button, the browser will submit the form to the current URL - which will look a lot like the page is refreshing.
If you want to run the unesi function when the user clicks submit and prevent the HTML form from submitting, you need to change it slightly:
<input type="submit" name="unos" value="Unesi i ispisi"
onclick="unesi(); return false;">
The return false prevents the form from submitting itself.
Because the form submits and refreshes the page. Cancel the form request.
<input type="submit" name="unos" value="Unesi i ispisi" onclick="return unesi()">
and the function
function unesi(){
var userInput = document.getElementById('userInput').value;
document.getElementById('ispis').innerHTML = userInput;
return false;
}
better option is to do it on the form level
<form action="#" method="get" onsubmit="return unesi()">
Instead of cancelling the form submitting, another option is to change
<input type="submit" name="unos" value="Unesi i ispisi" onclick="unesi()">
to
<input type="button" name="unos" value="Unesi i ispisi" onclick="unesi()">
This will make it so the form does not try to submit at all when the button is pressed.
I know this question has been asked a lot before, but none of the fixes worked for me. I made a window.location. href thing before and that worked but this one does not. I know the function runs because I tested it with an alert. Can someone see anything wrong here?
<form>
<input type="submit" name="agree" value="agree" onclick="fagree()">
<input type="submit" name="disagree" value="Decline and go to google" onclick="fdisagree()">
</form>
<script type="text/javascript">
function fagree(){
window.location.assign("index.html")
localStorage.setItem("Terms", "true")
}
function fdisagree(){
window.location.href="https://www.google.com/"
return false;
}
</script>
</body>
You can use button type instead of submit, otherwise, well, the form will be submit.
<form>
<input type="button" name="agree" value="agree" onclick="fagree()">
<input type="button" name="disagree" value="Decline and go to google" onclick="fdisagree()">
</form>
<script type="text/javascript">
function fagree(){
window.location.assign("index.html");
localStorage.setItem("Terms", "true"); //This line won't be executed, because the above line will reload the page
}
function fdisagree() {
window.location.href="https://www.google.com/"
return false; //This can be removed because the above line will redirect to google and the return false won't be executed
}
</script>
If you don't need any else form elements than those 2 buttons, you can get ride of the <form></form> and simply use <button>. In example :
<button type="button" name="agree" value="agree" onclick="fagree()">
<button type="button" name="disagree" value="Decline and go to google" onclick="fdisagree()">
Do not put it in the form if you don't have to (if that's the whole form code in the example). You are submitting it before functions have a chance to trigger.
OR:
<form>
<input type="button" name="agree" value="agree" onclick="fagree()">
<input type="button" name="disagree" value="Decline and go to google" onclick="fdisagree()">
</form>
<script type="text/javascript">
function fagree(){
window.location.assign("index.html")
localStorage.setItem("Terms", "true")
}
function fdisagree(){
window.location.href="https://www.google.com/"
return false;
}
</script>
</body>
I am trying to get a function to print out whatever the user inputs into the text-box. I am using onClick as an attribute on my submit button. I know I set it up properly because it flickers the answer, but only for a split second. How can I get the input to stay on the page? Here's the code: HTML: Type what you want to post to the website!
HTML:
<div id="main_div">
<section id="leftbox">
<form name="mybox">
Type what you want to post to the website!:
<br />
<input type="textbox" size="15" maxlength="15" name="text" id="text">
<br />
<input type="submit" value="Submit!" onClick="doFirst()">
</form>
</section>
</div>
<div id="insert"></div>
Javascript:
function doFirst(){
text = document.getElementById('text');
insert = document.getElementById('insert');
if(text.value == "")
{
insert.innerHTML = "Please input something!";
return false;
}
else
{
insert.innerHTML = text.value;
}
}
try this:
Using type=button
<input type="button" value="Submit!" onClick="doFirst()">
OR using type=submit
<form name="mybox" onsubmit="doFirst(); return false;">
<input type="submit" value="Submit!">
</form>
Explain:
The action for onclick in submit button DO executed. You keep see the page does not have any changes, because of there are a FORM. And the key point: the form handle the submit action after the JS function doFirst() immediately. Adding the onsubmit in the form with return false to stop default action, means:
<form name="mybox" onsubmit="return false;">
<input type="button" value="Submit!" onClick="doFirst()">
</form>
To simplify the changes, use button instead of submit type, or using onsubmit instead of onclick in form trigger.
onClick="doFirst()"
gets converted into an anonymous function:
function(){ doFirst() }
and whatever that function returns determines if the submit should be completed or aborted, so you should use:
onClick="return doFirst();"
In other words, it's not enough that doFirst return something, whatever doFirst returns should be returned again inside the onClick.
Whenever I click on the button I get the output for a second in the text-field "Result" and then it's gone.. why does it disappear? (I have tried to place the function in the body.. it doesn't help..)
<html>
<head>
<script>
function someFunction()
{
with (document.formy)
{
resultsBox.value= "In " + yearsBox.value + "you will be" + ageBox.value + yearsBox.value +" years old.";
}
}
</script>
</head>
<body>
<form name="formy">
Enter your current age: <input id="ageBox" type="text" value="18" />
<br/>
Enter number of years: <input id="yearsBox" type="text" value="5" />
<br/>
Click this button: <button onclick="someFunction()">Click me! </button>
<br/>
Results: <input id="resultsBox" type="text" />
</form>
</body>
</html>
The default type for buttons is submit. When you click the button the form is submitting and reloading the page. You can avoid this by setting the type attribute on the button:
<button type="button" onclick="someFunction()">Click me!</button>
Add an attribute to your form button called type. Specifically, something like:
type="button"
The reason is the default behavior of a button within a form is to act as a submit button. Submitting, results in the page being reloaded and thus the text field is cleared.
That submits the form & reloads, to prevent it:
onclick="someFunction(); return false;">
Also you should avoid with().
How to display second button after the click on first button??
I mean, when The user clicks on one button, he should see another button, on click of which he should return to his previous button!! Cyclic event kind of...
I wanted to do this using Java script and HTML.
I tried to use 'onclick' but it dint work!! Help!!
This is what I used..
`<body>
function alert()
{
alert("54");
// <input type="button" id="btnSer" value="Back"/>
}
<input type="button" id="btnSearch" value="Search" onClick="alert();">
</body>`
Something like this?
<button id="button1" style="display:block;" onclick="document.getElementById('button2').style.display = 'block'; this.style.display = 'none';">Button 1</button>
<button id="button2" style="display:none;" onclick="document.getElementById('button1').style.display = 'block'; this.style.display = 'none';">Button 2</button>
here is the code using simple plain javascript : (*note that naming your function alert() isnt smart because there is already a predefined function in js called alert)
Javascript Code
function addBtn(){
document.getElementById('btnHolder').innerHTML = '<input type="button" onClick="javascript:removeBtn();" value="click" />';
}
function removeBtn(){
document.getElementById('btnHolder').innerHTML = '';
}
HTML
<div id="btnOne"><input type="button" onClick="javascript:addBtn();" value="click" /></div>
<div id="btnHolder"></div>
this code is not tested but it should work, let me know if you have any other questions