How to add an event to button with two classes in jQuery - javascript

my button is defined:
<td>
<button type="button" class="btn btn-danger" id="${machine.uid}">
<spring:message code="vending.generic.delete" />
</button>
</td>
I want to add an event handler to the button.
I tried this:
$(document).on("click",'.btn btn-danger',function(e){
....
}

You can use another dot . without space to target element by multiple classes name:
$(document).on("click",'.btn.btn-danger',function(e){
....
}

Actually .btn btn-danger is an invalid selector, you have to merge by using a dot, so that the meaning becomes "Hey select all elements which contains class btn and class btn-danger"
Try,
$(document).on("click",'.btn.btn-danger',function(e){
....
}

Related

How to get element with a certain attribute and without another with vanilla js?

I am trying to get an element that has an attribute of title="some title" but there are multiple ones that come back and I'm to get the first one that has no style attribute.
I tried adding the :not[style] to my select it as an additional argument but it did not work.
document.querySelector(':not([style])', 'not[title="Add to Bag"]');
the element I'm looking for should be:
<button type="submit" class="pdp-add-to-bag add-to-cart pid-19GRB-004f78165ba0cb247a9d38d110" title="Add to Bag">Add to Bag</button>
Combine the two selectors - '[title="Add to Bag"]:not([style])':
const els = document.querySelectorAll('[title="Add to Bag"]:not([style])');
console.log('Number of buttons found: ', els.length);
console.log(els[0]);
<button type="submit" class="pdp-add-to-bag add-to-cart pid-19GRB-004f78165ba0cb247a9d38d110" title="Add to Bag">Add to Bag</button>
<button type="submit" class="pdp-add-to-bag add-to-cart pid-19GRB-004f78165ba0cb247a9d38d110" title="Add to Bag" style="color: red;">Add to Bag</button>

How may I get the value of a button when a user clicks on it?

I have four buttons:
<button id="button-yardSize" class="btn btn-success" value="2"><h1>2</h1></button>
<button id="button-yardSize" class="btn btn-success" value="4"><h1>4</h1></button>
<button id="button-yardSize" class="btn btn-success" value="6"><h1>6</h1></button>
<button id="button-yardSize" class="btn btn-success" value="8"><h1>8</h1></button>
And I want to capture the value of the button clicked so that I may add it later with another button and add them together.
I added this for the JS:
var inputYardSize = $("#button-yardSize").on("click", function(){
$("#button-yardSize").val();
console.log(inputYardSize);
});
I read that I may need to use .attr instead, however not sure how to add a custom attribute to the buttons?
First of all, you should use a class, not an ID. IDs should be unique, and $("#button-yardSize") will only select the first button.
In the event listener you can use this to refer to the button that was clicked.
You need to assign the inputYardSize variable inside the function. .on() just returns the jQuery object you're binding the handler to, not the value from inside the function.
$(".button-yardSize").on("click", function() {
var inputYardSize = $(this).val();
console.log(inputYardSize);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-success button-yardSize" value="2"><h1>2</h1></button>
<button class="btn btn-success button-yardSize" value="4"><h1>4</h1></button>
<button class="btn btn-success button-yardSize" value="6"><h1>6</h1></button>
<button class="btn btn-success button-yardSize" value="8"><h1>8</h1></button>
EDIT: You should use ID for unique elements and class for repeating element.
So if you would replace the ID with class on the button, the code should look like this:
Remove the declaration from the beginning and instead use it to store the values inside the click function.
In this way, you will have the value of the clicked button with the specified class.
$('.button-yardSize').on('click', function(){
var inputYardSize = $(this).val();
console.log(inputYardSize);
})
The id of each element has to be unique
<button id="button-yardSize1" class="btn btn-success" value="2"><h1>2</h1></button>
<button id="button-yardSize2" class="btn btn-success" value="4"><h1>4</h1></button>
The JS function is incorrect, you need a click handler which will log the button value
$("#button-yardSize1").on("click", function(){
inputYardSize=$("#button-yardSize1").val();
console.log(inputYardSize);
});

Handle event in all nested HTML elements in ReactJS

While building a table, I'm binding onClick handler to td element:
<td data-person-id={person.id} onClick={this.removePerson}>
<button type="button" className="btn btn-default btn-default">
<span className="glyphicon glyphicon-remove" aria-hidden="true">Remove</span>
</button>
</td>
But when an event is handled, it points to button or span elements but not td one so it means I can't just get needed data-person-id attribute. How can I fix it?
Full code https://jsfiddle.net/osqbvuub/1/
Thank you.
<td>
<button
type="button"
className="btn btn-default btn-default"
onClick={this.removePerson.bind(this, person.id)}>
<span className="glyphicon glyphicon-remove" aria-hidden="true">Remove</span>
</button>
</td>
Let your button element handle onClick (otherwise you might have weird behavior like clicking outside of the button but inside of td triggering an event) and bind the id to the context.
Then, later on your removePerson function access id directly:
...
removePerson(id) {
// do stuff
}
...

How to disable a button on click and replace that button with another button with different function using AngularJS?

How to disable a button on click and replace that button with another button with different function using AngularJS?
The following is my button,
<button type="submit" class="btn btn-small btn-default"
ng-disabled="isteam==0 || secondEdit" ng-click="editSetting()">
<span class="glyphicon glyphicon-edit"></span> Edit Setting</button>
you can use a state setting, say $scope.showFirstButton=true to control when to show the submit button:
<button ng-show="showFirstButton" type="submit" class="btn btn-small btn-default" ng-disabled="isteam==0 || secondEdit" ng-click="editSetting()">Edit Setting</button>
and another button, showing them alternatively:
<button ng-show="!showFirstButton" type="submit" class="btn btn-small btn-default" ng-click="doSomethingElse()">Seccond Button</button>
In the controller method $scope.editSetting() you change the value of the state: $scope.showFirstButton = !$scope.showFirstButton'.
Edit: if you need to revert the state of the buttons, do the same thing in the second method:
$scope.doSomethingElse = function(){
//some cool things happen here, and:
$scope.showFirstButton = !$scope.showFirstButton
}
and this will get back the first button and hide the second.

handle javascript function inside loop

I am using javascript function inside of while loop. That loop prints list of records and edit button. When click on edit button there is function(Let say editBtnClicked(id)).
Problem: It is getting called to there but page is refreshing automatically.
What is happening over there I couldn't find? Someone have a look on this.
function editBtnClicked(id) {
console.log("Edit Section");
$(".showData").css("display", "none");
$(".showInputField").css("display", "block"); }
<button id="edit" name="Edit" value="Edit" class="edit btn btn-info"onclick="editBtnClicked('<%=id%>');">
By defualt, button elements are type="submit". If you don't want it to be a submit button, use type="button" instead:
<button type="button" id="edit" name="Edit" value="Edit" class="edit btn btn-info"onclick="editBtnClicked('<%=id%>');">
If for some reason you want it to continue to be a submit button, but you want to prevent submission: In your onclick attribute, pass the event into your function:
<button id="edit" name="Edit" value="Edit" class="edit btn btn-info"onclick="editBtnClicked(event, '<%=id%>');">
That event will exist within the context created for that call, either as a global (Chrome, IE) or as a local (Firefox).
Then in your handler, use preventDefault:
function editBtnClicked(event, id) {
$.Event(event).preventDefault(); // Note the jQuery event wrapper
console.log("Edit Section");
$(".showData").css("display", "none");
$(".showInputField").css("display", "block");
}
That said, I'd probably change this up completely and use event delegation instead of an onclick attribute.
On some container all these buttons will be in:
$("selector for the container").on("click", "button.edit", editBtnClicked);
...and when outputting them (note I've removed the id — you said this was a loop, you can't have the same id more than once!):
<button type="button" type="button" value="Edit" class="edit btn btn-info" data-id="'<%=id%>'">
And in the function:
function editBtnClicked() {
var id = $(this).attr("data-id"); // Get the ID
console.log("Edit Section");
$(".showData").css("display", "none");
$(".showInputField").css("display", "block");
}
1- attach preventDefault() to click event or return false at the end of function to prevent submitting. In second case you should write onclick="return editBtnClicked('<%=id%>')"
2- Do not put your function inside the loop. Consider using ID inside your function so you wont need to repeat function inside the loop.
Please use PreventDefault for reference :http://api.jquery.com/event.preventdefault/
function editBtnClicked(e) {
e.preventDefault();
console.log("Edit Section");
$(".showData").css("display", "none");
$(".showInputField").css("display", "block");
}
<button id="edit" name="Edit" value="Edit" class="edit btn btn-info"onclick="editBtnClicked('<%=id%>');">

Categories