How to disable a button to avoid multiple submission? - javascript

document.getElementById('confirm_save').onclick = function() {
this.disabled = true;
}
I have used the above code but still the button is not disabled

Your JS code is valid but you need to add type="button" to your button so it will not act as a submit button and refresh the page returning to the initial status.
document.getElementById('confirm_save').onclick = function() {
this.disabled = true;
}
<button type="button" id="confirm_save">Confirm save</button>

this should work:
document.getElementById('confirm_save').disabled = true;

Maybe create a variable at the start associated with the button and disable it as such:
let btn = document.getElementById("confirm_save");
btn.addEventListener("click", function() {
btn.disabled = true;
});
Hope this helps;

Related

Disable or enable buttons if input condition met in JS, While input is auto-generated

i'm newbie in JS.
as in the title, I want to create a disable button when the condition is met based on the following code:
<input class="input" type="text">
<button class="button">Click Me</button>
<script>
let input = document.querySelector(".input");
let button = document.querySelector(".button");
button.disabled = true;
input.addEventListener("change", stateHandle);
function stateHandle() {
if(document.querySelector(".input").value === "") {
button.disabled = true;
} else {
button.disabled = false;
}
}
</script>
value on input is auto generated after 500ms. the code above works if after the input value appears and then I enter any number. what I want is when the input value appears then the button will automatically be in the enable position.
Based on #David's answer, I added new Events and dispatch them later.
This is the updated code :
<script >
let input = document.querySelector("#input");
let button = document.querySelector("#button");
button.disabled = true; //setting button state to disabled
const event = new Event("change"); //adding new event
input.addEventListener("change", stateHandle);
function stateHandle() {
var t = document.getElementById("jarak").value,
check = "luar";
if (new RegExp('\\b' + check + '\\b').test(t)) {
button.disabled = true; //button remains disabled
} else {
button.disabled = false; //button is enabled
}
}
setTimeout(function() {
input.dispatchEvent(event); //dispatching event after 700ms
}, 700);
</script>

button toggle event onkeyup from body

I need help with this function. Clicking a button, the onkeyup event present in the body tag must be deactivated, and then pressing it again must reactivate
<body onkeyup="NoPreview()">
...
</body>
function NoPreview() {
var preview = true;
if (preview == true) {
document.body.onkeyup = null;
preview = false;
} else {
return true; }
}
the function was deactivated, but clicking again on the button, does not reactivate.
You can keep a global variable and store the status of your setting, like this
<body onkeyup="NoPreview()">
<button onClick="toggleKeyup()">Toggle</button>
</body>
and the js:
var enableKeyup = true;
function toggleKeyup() {
enableKeyup = !enableKeyup;
}
function NoPreview() {
if(enableKeyup) {
// Your code here...
document.body.appendChild(document.createTextNode("."));
}
}
this way you don't have to add and remove events and you can have more settings for your NoPreview function.
Here's a pen: https://codepen.io/wyzix33/pen/bXBPbz
Hope it helps :)
Happy codding!

Override a submit type button to call custom javascript method instead

I cannot alter the following code, but instead must override the default functionality of the button so that when clicked, a custom javascript method is called instead of the form being submitted.
And to accomplish this I must use javascript via injection.(Its a AIR desktop app using the twitter api)
Can anyone help?
<body>
<form><fieldset class="buttons">
<input class="submit button" id="cancel" name="cancel" type="submit" value="Cancel" />
</fieldset>
</form>
<body>
If you want to prevent form from submitting overiding click wont be enough. One can submit you form by Ctrl+Enter.
You can do the following http://jsfiddle.net/tarabyte/R5yQq/.
Find the form assuming you know button id.
function getForm(id) {
var button = document.getElementById(id);
while(button &&
(button = button.parentNode) &&
(button.nodeName !== 'FORM')){}
return button;
}
Add 'submit' event listener.
var form = getForm('cancel'),
handler = function(ev){
ev = ev || window.event;
if(ev.preventDefault) { //w3c browsers
ev.preventDefault();
}
else { //IE old
ev.returnValue = false;
}
alert('Custom logic goes here!');
};
if(form) {
if(form.addEventListener) {
form.addEventListener('submit', handler, false)
}
else if(form.attachEvent) {
form.attachEvent('onsubmit', handler);
}
}
Replace it via JS with a button that calls your function
document.getElementById('cancel').parentNode.innerHTML = '<input type="button" onClick="myFunc()" value="replaced">';
window.myFunc = function() { alert('clicked'); return false; }
http://jsfiddle.net/e37nd/

How to click on one button and if form is save to click on other

I have 3 buttons and 1 form.
1st button is new button. Button that i want to add. When i click on this new button i want jQuery to click on next button:
2nd button: Save - when this button is clicked need to add function like:
if($("#email").val().trim().length>0 && $("#customer_firstname").val().trim().length>0 && $("#customer_lastname").val().trim().length>0 ) {
if this is valid - form is saved successfully jQuery need to click on third button (when this is invalid stop to here. Other js will show errors in form):
3rd button: Send order - after clicked on it do not need nothing. Other js will do the rest.
Other way will be to use "save" button and if is valid to click on "send button" - may be is more is solution?
<p class="orderbutton">
<input type="submit" class="order-button-opc" id="order-button" value="Order Button">
</p>
<p class="submit">
<input type="submit" class="exclusive button" name="submitAccount" id="submitAccount" value="{l s='Save'}" />
</p>
<p class="cart_navigation" id="cart_navigation">
<input type="submit" value="I confirm my order" class="extraorderbutton">
</p>
I try this:
<script>
$(document).ready(function () {
var firstFormValid = false;
var isFormValid = false;
$('#order-button').click(function(){
if(anycondition)
firstFormValid = true;
});
$("#submitGuestAccount").click(function () {
if(firstFormValid ) {
if($("#email").val().trim().length>0 &&$("#customer_firstname").val().trim().length>0 && $("#customer_lastname").val().trim().length>0 ) {
isFormValid = true;
} else isFormValid = false;
} else firstFormValid =false;
});
$("#order-button").click(function () {
if(isValid && firstFormValid)
$('#order-button').submit()
});
});
</script>
But i get error:
Use this hope will help.
$(document).ready(function () {
var firstFormValid = false;
var isFormValid = false;
$('#newbutton').click(function(){
if(anycondition)
firstFormValid = true;
});
$("#savebutton").click(function () {
if(firstFormValid ) {
if($("#email").val().trim().length>0 &&$("#customer_firstname").val().trim().length>0 && $("#customer_lastname").val().trim().length>0 ) {
isFormValid = true;
} else isFormValid = false;
} else firstFormValid =false;
});
$("#sendbutton").click(function () {
if(isValid && firstFormValid)
$('#FORMID').submit()
});
});
Rather than just debug/throw some code at you, you could approach this better by working on each of the areas separately, likely help for this and the future ?
Declare elements/selectors
Validate Function
Form 'check' function
Form 'save' function
Event Handlers.
Say,
1) Declare elements/selectors
var _inputemail = $("#email"),
_inputfirstname =$("#customer_firstname"),
_inputlastname = $("#customer_lastname"),
_button_check = $("#checkbutton"),
_button_send = $("#sendbutton"); /* hidden initially in css */
2) Create a Validate function
function isValid() {
var is=false;
/* add in the checks */
if(_inputemail.val().length>0) { is=true; }
/* return true or false */
return is;
}
3) form 'check' function
function checkForm() {
/* use the validate function */
if(isValid()) {
/* show the 'save' button */
_button_send.show();
}
}
4) form 'send' function
function sendForm() {
/* sendform here */
if(isValid()) {
/* we could run the validate again if we like */
}
}
5) Event Handlers
_button_check.on("click", checkForm);
_button_send.on("click", sendForm);
/* now we have separate functions we can check/send
the form from other events too
eg. Checking as we type */
_inputlastname.on("keyup",checkForm);
Got some reusable / easy to manage 'components' now
will be some things to sort in this code, but hope helps in someway! ( ? )

Javascript - how to make true after clicking 2 buttons

I have 3 buttons.
Button #1 and Button #2 and Button #3
After they have clicked #1 and #2, button #3 will activate and they can click on it.
Thank you so much.
This is what I have done so far:
var l50K_WC = false;
var l6OK_WC = false;
function share()
{
alert('yo');
}
function getIt_wc()
{
if(l5OK_WC && l6OK_WC)
window.open('http://websitehere.ca','_self');
if(!l5OK_WC)
alert("Click Button #1)");
else if(!l6OK_WC)
alert("Click Button #2)");
}
This displays the message, but how do I finish the rest where they have to click the 2 buttons before continuing? thanks.
You need to set the values for the both other buttons to true:
var l50K_WC = false;
var l6OK_WC = false;
function click1(){
150K_WC = true;
}
function click2(){
160K_WC = true;
}
function share()
{
alert('yo');
}
function getIt_wc()
{
if(l5OK_WC && l6OK_WC)
window.open('http://websitehere.ca','_self');
if(!l5OK_WC)
alert("Click Button #1)");
else if(!l6OK_WC)
alert("Click Button #2)");
}
And then in the html Code:
<input type="button" value="150KWC" onclick="click1()">
<input type="button" value="160KWC" onclick="click2()">
<input type="button" value="Final Button" onclick="getIt_wc()">
//Javascript
var button1Clicked = false;
var button2Clicked = false;
if (button1Clicked && button2Clicked) {
document.writeln("<button>Button 3</button>");
}
<!--HTML-->
<button onclick="javascript:button1Clicked=true;">Button 1</button>
<button onclick="javascript:button2Clicked=true;">Button 2</button>

Categories

Resources