Button disable after clicking issue - javascript

I have a submit button in my login page. I want to disable the submit button after clicking once.I'ts working fine with this.disabled = true; query and after disable the button it's going to the next page. The problem is that when I press back button it's still is disable because the page is not reloaded from server,It's loading from the local cache. I want to enable the button every time when I come back to the login page. I can clear the cache but there is some problem like if it will load from the server and project will be slow. What will be the best way to do this?
<script>
$(document).ready(function(){
$(document).on('click','button',function(){
this.disabled = true
window.location="https://www.google.co.in/"
})
})
</script>
<body>
<button type="submit" id="button">Click Me!</button>
</body>

I set the buttons initial disabled attribute to disabled in the body html to prove that the code does enable it again (so you can remove that in the body)
I hope this helps:
<script>
$(document).ready(function () {
$("#button").removeAttr('disabled');
$("#button").click(function(){
$(this).attr('disabled','disabled');
window.location="https://www.google.co.in/"
});
});
</script>
<body>
<button type="submit" id="button" disabled="disabled">Click Me!</button>
</body>

You need another event that ensures the button is enabled on page load. Kind of like:
<script>
$(document).ready(function(){
$("#button").disabled = false;
$(document).on('click','button',function(){
this.disabled = true
window.location="https://www.google.co.in/"
})
})
</script>
<body>
<button type="submit" id="button">Click Me!</button>
</body>
I didn't try running this so I'm not sure if the syntax is 100% but it should give you the right idea.

Related

Click JS button on page load

I want my webpage to auto click a button when the page is loaded. This is my button:
<button class="configure-product configure-product-simple elementor-button" type="button" data-price="95" data-product_id="1934">Stel samen!</button>
I think this button calls a JS function of a wordpress plugin, so that you open the product configurator. If i copy this button html on another page tho it wont work. It will only work on the product page.
Im very new to developing, so i could really use some help. Does anyone have any ideas how to implement this?
window.onload = function() {
document.getElementById("my-button").click();
}
<button id="my-button" class="configure-product configure-product-simple elementor-button" type="button" data-price="95" data-product_id="1934">Stel samen!</button>
this is how to do it in jQuery
$(document).ready(function(){ //on document loads (you could change to window also)
$('#click').click(); // click
})
$(document).ready(function(){
$('#click').click();
})
$('#click').click(()=>{
console.log('thanks!');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="click"> Click Meeh </button>
another shorter way to do it in vanilla js
document.onload = document.querySelector('#click').click();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="click" onclick="console.log('hi')"> Click Meeh </button>
other ways to do it
https://stackoverflow.com/a/38517365/18001301
window.onload vs document.onload
document.getElementById("input").click();

how to disable a button by default and enable it when page load completely in asp?

If I am having a button in user control and by default I want to disable it and enable it when the page loads completely how can I achieve it in ASP.Net?
Can any help me with this the type of the button is button and it is in user control.
<button type="button" id="demo">
Click me </button>
<script>
var demo = document.getElementById("demo");
demo.disabled=true;
window.onload = function(){
demo.disabled=false;
}
</script>
Using document.ready to know the page has loaded or not.
$( document ).ready(function() {
$("#demo").attr("disabled", false);;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="demo" disable>
Click me
</button>

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>

javascript : window.location.href/window.open is not working on iframe

Updated Code
<div>
<button type="button" class="submit btn btn-default" id="btnSubmit">Submit
</button>
<button type="button">Cancel</button>
</div>
<script>
$("#btnSubmit").click(function(e)
{
e.preventDefault();
//btn Click validation and code submission goes here..
alert("Form has been successfully submitted");
window.open("http://....../viewmyrequest.aspx","_self");
}
</script>
window.location.href is working only on debug mode and redirect to other window is not happening if i turned off debug mode.
i have explored many StackOverflow questions with the same topic but i haven't got any solid response for this issue.
window.location.href = "http://testwebsite.com/viewtickets.aspx"
i have tried for other options too
window.location = "http://testwebsite.com/viewtickets.aspx"
window.location.replace = "http://testwebsite.com/viewtickets.aspx"
Try this. Works cross browser in all my sites.
loc = "http://testwebsite.com/viewtickets.aspx";
window.open(loc,'_self');
EDITED:
This may work better for you..
<script>
function setURL(url){
document.getElementById('iframe').src = url;
}
</script>
<iframe id="iframe" src="idreesinc.com/research.html" />
<input type="button" onclick="setURL('URLHere')" />
It will insert the correct URL into the iframe.
I am 99% sure the issue is you are using a submit button and that is submitting the form which is not allowing your JavaScript to run. So either you need to set the type to be a button and not a submit button OR you need to cancel the click action.
<button type="button" ... >
or
<button onclick="foo(); return false;" ... >

window.history.back() not working.

I cant get this to work. I have been trying for ages. Please help me.
<script>
function goBack() {
window.history.back()
}
</script>
<button onclick="goBack()">Go Back</button>
Please have a look at this question: Inconsistency with window.history.back().
this
<button type="button" onclick="goBack()">Go Back</button>
could be what you're looking for
As Kevin B suggests
The browser could be interpreting the button as a submit button and
submitting the form, thus causing a page refresh. Adding type="button"
will prevent that.
First of all, you should make sure that your script tag have the proper type set:
<script type="text/javascript">
...
</script>
Also, I would suggest using the "go" function of the history object instead since the compatibility is higher. To simplify things you can simply do this:
<button onclick="javascript:history.go(-1)">Go Back</button>
Hope this helps.
This can stop it appearing to work
<a href="#" onclick=DoSomething()>Stop it working</a>
That's because the href will effectively add a new page in the history, the present page again
Incidently if you call
event.preventDefault()
in DoSomething then # will never get added to the history and it will appear to work again
This worked for me
<button type="reset" onclick="goBack()">Go Back</button>
The window.history.back() method does not work if it does not have any previous URL to go to. Your program needs to have a start URL and you will need to have your program moving forward to the next page to be able to go back and forward.
Try preventing the default action of the button. Note that nothing will happen if you have accessed no other pages in the current tab.
Javascript:
<button id="goBack">Go Back</button>
<span id="result"></span>
<script>
document.getElementById("goBack").addEventListener("click", function(event){
event.preventDefault();
document.getElementById("result").innerHTML = "Going back";
window.history.back();
});
</script>
jQuery:
<button id="goBack">Go Back</button>
<span id="result"></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#goBack').click(function(event){
event.preventDefault();
document.getElementById("result").innerHTML = "Going back";
window.history.back();
});
</script>
Go Back
The 'return false;' bit helped fix it for me
Actually for working of this you need to redirect to this website from any other website or if you are doing on local html file then you can just open any website and paste the link of your local file in search bar in that tab(don't open a new tab) and then it will work. Basically this fuction just press the back button of your browser so you need to have something so that it can go back.

Categories