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>
Related
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;
Vanilla JavaScript
In vanilla JavaScript, one can easily enable and disable a button using the following statement:
button.disabled = state;
This works both when humans try to click a button and when buttons are clicked programmatically:
var button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('world');
});
button.disabled = true;
button.click(); // No output
button.disabled = false;
button.click(); // Output : "Hello" and "world
button.disabled = true;
button.click(); // No output
<input type="button" id="myButton" value="button" onClick="alert('Hello')"/>
This also works when using the MouseEvent interface:
var button = document.getElementById('myButton');
var click = new MouseEvent("click", {
"view": window
});
button.addEventListener('click', function() {
alert('world');
});
button.disabled = true;
button.dispatchEvent(click); // No output
button.disabled = false;
button.dispatchEvent(click); // Output : "Hello" and "world
button.disabled = true;
button.dispatchEvent(click); // No output
<input type="button" id="myButton" value="button" onClick="alert('Hello')"/>
jQuery
I can't seem to be able to do the same with jQuery, though :
var button = $("#myButton");
button.on("click", function() {
alert("world");
});
button.prop("disabled", true);
button.click(); // Output : "world" and "Hello"
button.prop("disabled", false);
button.click(); // Output : "world" and "Hello"
button.prop("disabled", true);
button.click(); // Output : "world" and "Hello"
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<input type="button" id="myButton" value="button" onClick="alert('Hello')"/>
Both button.prop("disabled", true); and button.attr("disabled", true); simply change the disabled property of the button element, but neither disables the actual click event. This means that events are triggered whenever button.click(); is called, even if the button is disabled!
Additionally, "world" and "Hello" are output in the wrong order.
The simplest code I could come up with to emulate the behavior of the vanilla JavaScript versions, is this :
var button = $("#myButton");
button.on("click", function() {
alert("world");
});
button.disable = (function() {
var onclick = null;
var click = [];
return function(state) {
if(state) {
this.prop('disabled', true);
if(this.prop('onclick') !== null) {
onclick = this.prop('onclick');
this.prop('onclick', null);
}
var listeners = $._data(this.get()[0], "events");
listeners = typeof listeners === 'undefined' ? [] : listeners['click'];
if(listeners && listeners.length > 0) {
for(var i = 0; i < listeners.length; i++) {
click.push(listeners[i].handler);
}
this.off('click');
}
} else {
this.removeProp('disabled');
if(onclick !== null) {
this.prop('onclick', onclick);
onclick = null;
}
if(click.length > 0) {
this.off('click');
for(var i = 0; i < click.length; i++) {
this.on("click", click[i]);
}
click = [];
}
}
}
})();
button.disable(true);
button.click(); // No output
button.disable(false);
button.click(); // Output : "Hello" and "world
button.disable(true);
button.click(); // No output
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<input type="button" id="myButton" value="button" onClick="alert('Hello')"/>
That is, of course, ridiculously convoluted and "hacky" code to achieve something as simple as disabling a button.
My questions
Why is it that jQuery - unlike vanilla JS - doesn't disable the events when disabling a button?
Is this to be considered a bug or a feature in jQuery?
Is there something I'm overlooking?
Is there a simpler way to get the expected behavior in jQuery?
To achieve expected result, you can utilize .isTrigger within jQuery triggered click handler to determine if event is triggered by javascript, and not user action.
Define attribute event listener as a named function, where this can be passed to check disabled property at if condition if alert() is called, or not called.
Use .attr("disabled", "disabled") to set disabled at element, .removeAttr("disabled") to remove attribute; .attr("onclick", null) to remove event attribute onclick handler; .attr("onclick", "handleClick(true)") to reset event attribute.
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input type="button" id="myButton" value="button" onclick="handleClick(this)" />
<script>
function handleClick(el) {
if (el.disabled !== "disabled")
alert("Hello")
}
var button = $("#myButton");
button.on("click", function(e) {
console.log(e);
if (e.isTrigger !== 3 && !e.target.disabled)
alert("world");
});
button.attr("disabled", "disabled");
button.attr("onclick", null);
button.click(); // no output
setTimeout(function() {
button.removeAttr("disabled");
button.attr("onclick", "handleClick(button[0])");
button.click(); // Output : "world" and "Hello"
// click button during 9000 between `setTimeout` calls
// to call both jQuery event and event attribute
}, 1000);
setTimeout(function() {
button.attr("disabled", "disabled");
button.attr("onclick", null);
button.click(); // no output
}, 10000);
</script>
If you take a look to jquery-1.12.4.js at these lines:
handlers: function( event, handlers ) {
var i, matches, sel, handleObj,
handlerQueue = [],
delegateCount = handlers.delegateCount,
cur = event.target;
// Support (at least): Chrome, IE9
// Find delegate handlers
// Black-hole SVG <use> instance trees (#13180)
//
// Support: Firefox<=42+
// Avoid non-left-click in FF but don't block IE radio events (#3861, gh-2343)
if ( delegateCount && cur.nodeType &&
( event.type !== "click" || isNaN( event.button ) || event.button < 1 ) ) {
/* jshint eqeqeq: false */
for ( ; cur != this; cur = cur.parentNode || this ) {
/* jshint eqeqeq: true */
// Don't check non-elements (#13208)
// Don't process clicks on disabled elements (#6911, #8165, #11382, #11764)
if ( cur.nodeType === 1 && ( cur.disabled !== true || event.type !== "click" ) ) {
You will you see a different handling of events according to the delegation type:
$(document).on("click", '#btn', function() {
console.log("world");
});
$(function () {
$('#btnToggle').on('click', function(e) {
$('#btn').prop('disabled', !$('#btn').prop('disabled'));
});
$('#btnTestClick').on('click', function(e) {
$('#btn').click();
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<button id="btn">Click Me</button>
<button id="btnToggle">Enable/Disable button</button>
<button id="btnTestClick">Test Click</button>
Of course, if you attach the event like in:
$('#btn').on("click", function() {
alert("world");
});
The behaviour is different and seems strange.
Using .prop() is the right way to do it. I think the issue is in the way that you are "testing" it. See this example where the buttons are disabled/enabled correctly using the toggle button regardless of whether the handler is attached via onclick or with jquery.
window.testFunc = function(event) {
if (!$('#myButton2').prop('disabled')) {
alert("hello");
console.log("hello");
}
}
$(document).ready(function() {
var button = $("#myButton2");
button.on("click", function(event) {
if (!$(this).prop('disabled')) {
alert("world");
console.log("world");
}
});
$('#toggleButton').click(function() {
$('#myButton1').prop('disabled', !$('#myButton1').prop('disabled'));
$('#myButton2').prop('disabled', !$('#myButton2').prop('disabled'));
});
$('#tester').click(function() {
$('#myButton1').click();
$('#myButton2').click();
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="myButton1" value="vanilla button (hello)" onclick="window.testFunc(event)"/>
<input type="button" id="myButton2" value="jquery button (world)"/>
<input type="button" id="toggleButton" value="toggle disabled"/>
<input type="button" id="tester" value="test the buttons"/>
The other obvious solution is to just use vanilla javascript. Just because you are using jQuery doesn't mean that everything "must" be done using it. There are some things that are fine to do without jQuery.
EDIT: I edited the snippet showing how you could prevent jquery's .click() from actually triggering the alerts.
You're calling the click function directly 3 times ( button.click() ) which fires regardless of disabled attribute.
The disabled property only responds to click events.
See the updated example:
var button = $("#myButton");
var button2 = $("#myButton2");
button.prop("disabled", false);
button.on("click", function() {
alert("world");
button2.prop("disabled", false);
});
button2.prop("disabled", true);
button2.on("click", function() {
alert("world");
button.prop("disabled", true);
});
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<input type="button" id="myButton" value="button" onClick="alert('Hello')"/>
<input type="button" id="myButton2" value="button2" />
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! ( ? )
Hi im new to javascript and messing about with it.
How can i (if possible) show an output when 2 buttons have been pressed one after the other?
Example: click button 1, click button 2, message shows "button 1 and 2 has been clicked"
use an && operator in an if statement.
Javascript:
var button1 = false;
var button2 = false;
var b1_id = document.getElementById('button1');
var b2_id = document.getElementById('button2');
b1_id.addEventListener('click',click1,false);
function click1() {
alert("Button1 clicked");
button1 = true;
check();
}
b2_id.addEventListener('click',click2,false);
function click2() {
alert("Button2 clicked");
if (button1 !== false) button2 = true; //this is to make sure they are clicked consecutivley
check();
}
function check() {
if (button1 === true && button2 === true) {
alert("Button1 and Button2 clicked consecutively");
}
}
HTML:
<input type='button' id='button1' value='button1' />
<input type='button' id='button2' value='button2' />
jsFiddle
<p id="status"></p>
<button id="btn1" onclick="clickfun(this);">button 1</button>
<button id="btn2" onclick="clickfun(this);">button 2</button>
<script>
clickfun(elm){
var currenthtml = document.getElementById('status').innerHTML;
document.getElementById('status').innerHTML = currenthtml += this.id+' clicked !';
}
</script>
I actually just wrote a library devoted to the mouse object. One thing it does it tracking what buttons are pressed, and follows DOM3 spec mostly.
https://github.com/Benvie/Mouse
Boiled down to minimum, you must continually track the muse to now if the browser does not provide the "buttons" property, which only Firefox 15 does so far. Specially, mousedown to start, then click and contextmenu to end.
The key bits for tracking buttons are
var buttons = 0;
function down(e){ buttons |= 1 << e.button; }
function up(e){ buttons &= ~(1 << e.button); }
window.addEventListener('click', up);
window.addEventListener('contextmenu', up);
window.addEventListener('mousedown', down);
I want to show and hide a button by using java script.
My problem is that the button should be hide on page load and when I changed the text in text box then button should be show.
thanks.....
pls, Check this page and tell if this is what you wanted.
Basically, you need to use onchange event to do whatever you want to do.
<html>
<head>
<script>
window.onload=function(){
document.getElementById("button").style.display='none';
}
function showButton(){
document.getElementById("button").style.display='block';
}
</script>
</head>
<body>
<input type="button" id="button" value="New Button"/>
Change the text in Input Box. Then Button will be show<br/><br/>
<input type="text" id="userText" value="Change the text" onchange="showButton()"/>
</body>
</html>
Try with jQuery:
$("#yourInput").bind("change", function() {
var value = $(this).val();
if (value && value.length > 0) {
// Exist text in your input
$("#yourButton").show();
} else {
$("#yourButton").hide();
}
});
For non-jQuery:
function onchangeInput() {
var value = this.value;
if (value && value.length > 0) {
// Exist text in your input
document.getElementById("yourButton").style.visibility = "visible";
} else {
document.getElementById("yourButton").style.visibility = "hidden";
}
}
window.onload = function() {
document.getElementById("yourButton").style.visibility = "hidden";
var el = document.getElementById("yourInput");
if (el.addEventListener) {
el.addEventListener("change", onchangeInput, false);
} else {
el.attachEvent('onchange', onchangeInput);
}
}
Again, don't show/hide a button, just disable it, that make the best user experience.
You could style the css to visibilty:hidden then in javascript add an event listner like this:
<script type="text/javascript">
var box = document.getElementById('box');
var textbox = document.getElementById('textbox');
textbox.addEventListener("focus",showbox,false);
function showbox() {
box.style.visibility = 'visible';
}
That would make it appear on focus but if you wanted to take it a step further you could add another event listener for a keystroke when the textbox is focused on. That would probably work.
This is to hide/show a div based on text changed in text box.
With JQuery
<script type="text/javascript">
window.onload = function () {
document.getElementById("submitdiv").style.display = 'none';
}
$(function () {
$('.Name').on('keyup change', function () {
if (this.value.length > 0) {
$('#submitdiv').show();
} else {
$('#submitdiv').hide();
}
});
});
</script>
HTML
<%:Html.TextBoxFor(m => m.FirstName, new { #class ="Name"}) %>
<div id="submitdiv">
<button type="submit" value="Submit" class="btn btn-primary pull-right value-set" id="btnLogin">Submit</button>
</div>
Try this:
<script>
function
changeButton() {
document.getElementById("changeButton").innerHTML = "Insert text for button";
document.getElementById("changeButton").removeAttribute("hidden");
}
</script>
<button hidden id="changeButton"></button>