On click of button reload page and change button text - javascript

I'd like to have a click on a button reload the page and change the text inside the button.
For reload I got:
Javascript:
function reloadPage(){
window.parent.location = window.parent.location.href;}
HTML:
<button type="button" onClick="reloadPage()">Start</button>
<script src="reloadpage.js"></script>
After click, the text in the button must change from "Start" to "Try Again!"
How can I do this?
Thank you.

You could do this by adding a query string on reload, and then have a script that detects the query string and changes the text of the button onload.
JavaScript:
function reloadPage(){
window.parent.location = window.parent.location.href+"reload=true";}
function checkQString(){
// get query strings and store reload qstring in variable
if (reload) {
document.getElementById('btn').innerHTML = 'Try Again!';
}
HTML
<button id='btn' type="button" onLoad='checkQString();' onClick="reloadPage()">Start</button>
<script src="reloadpage.js"></script>

You can use Cookies. With js you can use https://plugins.jquery.com/cookie/ Or can use server side cookies

Related

Button onclick event does not redirect to another page although it calls the functions

The following code does not redirect to the given webpage
<form>
<button onclick='window.location.replace("../magnet/index.php")'>Replace document</button>
</form>
It is so because when you create a button within the form tags, it is created as a submit button by default. So, instead of redirecting the webpage, it submits the data and reloads the current webpage.
The following code will do the required job because now, the type of the button is button and not submit.
<button type="button" onclick='window.location.replace("../magnet/index.php")'>Replace document</button>
Even better, you can place your redirect code into a JavaScript function. Then you can call that function from within your HTML code. Like this
<script type="text/javascript">
<!--
function redirectTo(sUrl) {
window.location = sUrl
}
//-->
</script>
<button onclick="redirectTo('../magnet/index.php')">Get HTML!</button>
Hope this will work for you. Cheers
The answer was to add type="button" like #shivamag00 explained.
But be careful with replace(), it's not possible to use "back" to navigate back to the original document since you are replacing the history state.
An alternative is to use the assign() function, (documentation here)
Suppose you have a base url as
www.website.come
and want to go to
www.website.come/new-page
it's simple
<button type="button" onclick='window.location.assign("new-page")'>Go to new page</button>
It's worked for me, hope it's useful for someone else.

Onclick window.location changes the updated css property using my javascript

The css property which is updated in the javascript does not stay when on click is triggered from html.
Javascript:
<script type="text/javascript">
function Redirect() {
window.location.replace("http://127.0.0.1:5000/testlink");
document.getElementsById('tab1').style.cssText = 'color:blue; font-size:22px;'}
</script>
HTML:
<input type="radio" name="tabset" id="tab1" aria-controls="rawdata"onclick="Redirect()">
Raw Data
Once the tag is clicked, the css property changes appears and goes away once the windows refreshes
Once the radio button is selected, you can set it to a local storage and then check it when the page is first loaded.
$(document).ready(function() {
var hasClick = localStorage.getItem("hasClick");
if(hasClick == true){
document.getElementsById('tab1').style.cssText = 'color:blue; font-size:22px;'}}
Javascript:
<script type="text/javascript">
function Redirect() {
sessionStorage.setItem("hasClick", true);
document.getElementsById('tab1').style.cssText = 'color:blue; font-size:22px;'};
window.location.replace("http://127.0.0.1:5000/testlink");
</script>
HTML:
<input type="radio" name="tabset" id="tab1" aria-
controls="rawdata"onclick="Redirect()">
That wont work, you will need to save these changes somewhere, for example:
Cookies
Local storage
Database
you save your change somewhere in these 3 saving options and then write a javascript code on window load to check if there is a color setting availaible and then change your tag color
Maybe you would prefer to do ajax? This way you can make a http request to the backoffice without the lost of your page state. Then your css property change will apply after your request.

Refresh Captcha , but also refreshing whole register form

Javascript Code
<script language="javascript" type="text/javascript">
function refreshCaptcha()
{
$("#captchaimage").attr('src','captcha_image.php');
}
</script>
Image Code
<img src="captcha_image.php" id="captchaimage">
Button Code
<button name="submit" class="btnRefresh" onClick="refreshCaptcha();">Refresh Captcha</button>
When i tried to click on refresh captcha button , it will refreshed the whole page. Any idea which causing the problem ?
<button>
by default has the attribute type="submit" which causes the form to submit.
Hence, adding type="button" to the button will suffice.
Because your form has property action, button triggers action behavior,then redirecting to action's url.
You can remove action or change button to a,or use event.preventDefault.

Redirecting to site from an existing button being clicked

I'm quite new to coding. I have a button with the ID='test'. I want to run a line of code in javascript or HTML to redirect users to a site when that button is clicked.
Button:
<button id="test" type="submit" onclick="setNick(document.getElementById('nick').value); return false; return false" class="btn btn-play-guest btn-success btn-needs-server primaryButton" data-itr="play_as_guest">
I tried running this:
<script>
document.getElementById("test").onclick = window.location='http://www.google.com/'
</script>
However, this would redirect straight away. I want it to redirect only when the button is clicked. Please help me fix this.
Many thanks.
You are assigning the redirect to the button where you need to assign it to a function.
You can try something like this:
document.getElementById("test").onclick = function(){
window.location='http://www.google.com/';
}
I would suggest use onclick on button, for example
your button will look like this
<button id="test" onclick="redirect()">Redirect</button>
Now in the script write the redirect function as
<script>
function redirect() {
window.location.href = "http://www.google.com/";
}
</script>

How do I add a cookie onclick of a button in Drupal7?

I have an article (Full Html) and I have a button. I want, when the button is clicked, to create a cookie and remember that the button is clicked. This is the code I currently have:
<button id="test" value="test" onclick="Press()">Press</button>
<script>
function Press() { text
}
</script>
How should I create the press function? This is the HTML of the article
function Press() {
document.cookie="button=pressed";
}
document.cookie will create a cookie..

Categories