I'm basically creating a filter button.
If I press button1 {this will happen}
If press button2 {this will happen}
but if I press button1 and then button2 {this has to happen}
This is the code I have so far. Thanks!
$(document).ready(function() {
if($('#button1').click(function() && $('#button2').click(function()){
//perform actions
});
Here is the logic
button 1 handler {
set var to indicate click
do what you need
}
button 2 handler {
check var to see if button 1 is clicked
do whatever you need based on the var check
}
This only handles button 1 click followed by 2, but you get the idea and should be able to figure out if button 2 is clicked then 1
Try this using the data-attribute
$('#button1').click(function(){
alert('button one clicked');
$(this).data('lastClicked',true);
});
$('#button2').click(function(){
if(!!$('#button1').data('lastClicked')){
alert('Button 1 then button 2')
}else{
alert('button two clicked');
}
});
$("body > *").not("#button1").click(function(){
$('#button1').data('lastClicked',false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1">Button 1 </button>
<button id="button2"> Button 2</button>
<button id="button3"> Button 3</button>
As you would notice if there is any click that is not on #button1 then the next click will not be considered as button1 --> button2
$(document).ready(function() {
$('#button1').click(function(){
//perform regular button1 actions
var btn1clicked=true;
});
$('#button2').click(function(){
//perform regular button2 actions
if(btn1clicked){
//perform button2 clicked after button1 was clicked action
}
});
});
You need to set a variable after the first button is clicked. Then when the second button is clicked, you check if the variable is set and if it is, you perform the special action.
You could save the data about the clicking state using jQuery .data(), then use it in other handlers. Something like this:
$('.js-button-1').on('click', function() {
$(this).data('clicked', true);
$('.js-result').text('Button 1 is clicked');
});
$('.js-button-2').on('click', function() {
if ($('.js-button-1').data('clicked')) {
$('.js-result').text('Button 1 + Button 2 are clicked');
} else {
$('.js-result').text('Button 2 is clicked');
}
});
$('.js-button-clear').on('click', function() {
$('.js-button-1').data('clicked', false);
$('.js-result').text('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="js-button-1">Button 1</button>
<button class="js-button-2">Button 2</button>
<button class="js-button-clear">Clear</button>
<div>
<span>Result: </span>
<span class="js-result"></span>
</div>
Related
I have two buttons - A and B. If A becomes disabled/enabled I want B to always be the same.
Is there a simple way to do this in JavaScript?
Let's assume there's no click event etc. I just want to monitor the state of A and B change accordingly.
// WITH CLICK ----------------------------------------------------
/*
$("#dissablebtnA").on("click", function() {
$("#btnA").attr("disabled", "disabled");
if ($("#btnA").attr("disabled") == "disabled") {
console.log("dissabled button B because button A is disabled");
$("#btnB").attr("disabled", "disabled");
}
});
*/
// WITHOUT CLICK ----------------------------------------------------
/*
If you just want to monitor it without clicking you could do like this
*/
// check every 5 seconds to see if it is dissabled and set b to dissabled accordingly
window.setInterval(function(){
if ($("#btnA").attr("disabled") == "disabled") {
console.log("dissabled button B because button A is disabled");
$("#btnB").attr("disabled", "disabled");
}
}, 5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button id="btnA">button A</button>
<button id="btnB">button B</button>
<br>
<br>
<button id="dissablebtnA">DISABLE BUTTON A</button>
I am new to Javascript, and i run into some big problems. I got some functions, which I can type into a text field and press enter, and the functions works. But i have created 4 buttons, which i want to connect to the actions.. i got 4 actions: "UP","DOWN","LEFT" and "RIGHT".
This is the js fiddle over my code: http://jsfiddle.net/n24gQ/
I have made the buttons like this but I dont know what to write inside the OnClick tag?
<div id="gamebuttons">
<button id="up" button onClick="">UP</button>
<button id="down" button onClick="">DOWN</button>
<button id="left" button onClick="">LEFT</button>
<button id="right" button onClick="">RIGHT</button>
</div>
I hope you can understand what my problem is. I made 4 javascript cases which I want to bind to 4 html buttons if possible.. :) It is the cases: "frem" "tilbage" "hoejre" and "venstre" i need to bind.. Sorry not everything in the code is english, but it should be understandable..
Fiddle
You can simply write the function name you've defined for the buttons into the onclick attribute, e.g. like this:
<button id="up" type="button" onclick="alert('UP'); return false;">UP</button>
However, as your buttons already have id's you can also check if one of those id's got clicked without the need of onclick in your markup:
JavaScript:
var buttonUp = document.getElementById('up');
buttonUp.onclick = function() { myFunction(); return false; }
jQuery:
$('#up').on('click', myFunction());
Instead of using inline handlers (bad practice) or multiple handlers for each button, I would use event delegation on your button wrapper, like so
$('#gamebuttons').on('click', 'button', function() {
/* get the id attribute of the clicked button */
var button_id = this.id;
case (button_id) {
"UP" : /* code for up button */ break;
"DOWN" : /* code for down button */ break;
"LEFT" : /* code for left button */ break;
"RIGHT" : /* code for right button */ break;
}
});
Please pass the function name inside the OnClick tag
for example if you want to associate playGame function to DOWN button
write
<button id="down" onclick="playGame();">DOWN</button>
I think these below changes will give you solution.
Instead of the first button, you need to bind events to all of the buttons which you required. Currently, querySelector() getting only first button to bind events. So, use querySelectorAll()
Replace this code
var button = document.querySelector("button");
button.style.cursor = "pointer";
button.addEventListener("click", clickHandler, false);
button.addEventListener("mousedown", mousedownHandler, false);
button.addEventListener("mouseout", mouseoutHandler, false);
With below code
var gamebuttonslist=document.querySelectorAll("#gamebuttons button");
for (var vitem=0;vitem<gamebuttonslist.length;vitem++) {
if (typeof gamebuttonslist[vitem] != "undefined" && gamebuttonslist[vitem] != null) {
gamebuttonslist[vitem].style.cursor = "pointer";
gamebuttonslist[vitem].addEventListener("click", clickHandler, false);
gamebuttonslist[vitem].addEventListener("mousedown", mousedownHandler, false);
gamebuttonslist[vitem].addEventListener("mouseout", mouseoutHandler, false);
}
}
Have a basic link that I am using as a button and changing the text when the user clicks it to go from edit to done editing. When I first click the button, the click event happens but the text does not change until I click it again which is throwing off and not behaving as I would like:
HTML:
<a type="button" id="editButton" class="editButton" style="cursor: pointer">EDIT</a>
JS:
$("#editButton").click(function () {
var $this = $(this);
$this.toggleClass('editButt');
if ($this.hasClass('editButt')) {
$this.text('EDIT');
} else {
$this.text('DONE EDITING');
}
});
Fiddle
You toggle a class that is not present at first click, so it mean it will add it and then run your condition.
Add the class and problem solved
<a type="button" id="editButton" class="editButton editButt" style="cursor: pointer">EDIT</a>
http://jsfiddle.net/U8Ns3/4/
Try this out, and see fiddle
$("#editButton").click(function () {
var $this = $(this);
if ($this.hasClass('editButt')) {
$this.text('EDIT');
} else {
$this.text('DONE EDITING');
}
$this.toggleClass('editButt');
});
Simpler solution, here's a FIDDLE
<button type="button" id="editButton" class="edit">EDIT</button>
$('#editButton').click(function() {
var text = ($(this).text() === 'EDIT') ? 'DONE EDITING' : 'EDIT';
$(this).text(text).toggleClass('done');
});
Ok, if i have jQuery like this:
$(document).ready(function(){
$('#btn1').click(function(){
//Add stuff to table
$('#items_table tr:last').after('<tr><td><input type="button" id="btn2" value="second button" /></td>/tr>');
});
//Created button above is triggered
$('#btn2').click(function(){
alert('btn 2 was clicked');
});
});
Nothing will happen when i click on the "btn2". I guess that's becaouse it's not there when $(document).ready() ? If i send that js for btn2 into the table row, it works fine. something like this:
$(document).ready(function(){
$('#btn1').click(function(){
//Add stuff to table
$('#items_table tr:last').after('<tr><td><input type="button" id="btn2" value="second button" /><script type="text/javascript ..... BLAH $(\'#btn\').click BLAH </script>;
});
});
Ideas?
Use on to let the table delegate the event to elements that may appear later :
$('#items_table').on('click', '#btn2', function(){
alert('btn 2 was clicked');
});
Attach an event handler to a parent element using .on(), and pass the selector as an argument. This works for dynamically added elements as well...
$('#items_table').on('click', '#btn2', function(){
alert('btn 2 was clicked');
});
I have a JSP page, which has standard form on it. I have two buttons, each perform a different action when pressed, and the form is submitted - action 1 and action 2.
I originally had this set up for one button, so it was all done through the following and worked fine:
$('#form').submit( function() { .... }
But now I have two buttons, I want it to do the same, but how to find which button I pressed.
I could do this through the .click function, but I dont want to break my existing form.submit functionality.
Below is my code for this - which doesn't work:
$('#form').submit( function() {
// Set the field array variables with data
$('button[name="action1"], [name="action2"]').each(function(index) {
alert('index : ' + index );
alert('value : ' + this.value);
});
$('button[name="action1"]').click(function(e) {
alert('ac1 clicked');
});
$('button[name="action2"]').click(function(e) {
alert('ac2 clicked');
});
my html buttons are:
<button id="submitButton" name="action1" value="action1" type="submit">action 1</button>
<button id="submitButton" name="action2" value="action2" type="submit">action 2</button>
Is there a way I can do this inside my form.submit, or a way to do the .click, which then submits the form. I am a little lost for a solution on this?
Please help :)
You can read the related target of the event object.
$('#form').on('submit', function(evt) {
if (evt.relatedTarget && $(relEl).is('input[type=submit]')) {
/* related element is a button - do something */
}
evt.preventDefault(); //cancel form submit, as required
});
In the button's click handler, set a hidden field before submitting the form. Then read the value of that hidden field in the request handler to find out which action was requested.
Bind a event handler to your buttons
$('button').on('click', function(e) {
var buttonId = $(this).attr('name');
if(buttonId = 'action1') {
// action1 was pressed
} else {
// action2 was pressed
}
$('#form').trigger('submit'); // trigger submit of form.
e.preventDefault();
});
First of, never include two dom elements with the same id on the same page. The class attribute is for such things. Change the id's of the buttons to submitButton1 and submitButton2 respectively and then this ought to work:
$('#submitButton1').closest('#form').submit(function() {
// first button action
});
$('#submitButton2').closest('#form').submit(function() {
// second button action
});
For standard HTML form submission :
HTML:
<form method="..." action="...">
...
<input type="hidden" name="action">
<input value="action1" type="submit" value="action 1" />
<input value="action2" type="submit" value="action 2" />
...
</form>
Javascript:
$('button[type="submit"]').on('click', function() {
$("#action").val(this.value);//where "#action" selects an input field (in the same form) of type="hidden"
});
For AJAX submission, do the same but read the action field's value back into javascript in the submit handler.