I have a requirement where I print all the email addresses in <input type="text" value="emailaddress"> on the jsp page. I should be able to edit the field, so I have a button at the end of it. But the email addresses can be of any number. How to select the button ending with any number
$('#button_1').on("click", function() {
//enter code here
});
$('#button_2').on("click", function() {
//enter code here
});
I am trying to do something like
$('#button_'[]).on("click", function() {
});
Can someone help me with this solution?
CSS wildcard:
$("button[id^='button_']").click(function() {
// button elements with id starting with "button_"
// return($(this).attr('id'));
});
$("button[id*='button_']").click(function() {
// button elements with id containing "button_"
// return($(this).attr('id'));
});
There is a starts-with attribute selector.
You can do the following:
$('[id^="button_"]').on('click', function () {
// your code here
});
The $('[id^="button_"]') selects all the elements that have an id beginning with button_. Then you are able to bind a single handler to cater for all button events.
Also instead of giving an Id you can put a class on these buttons since class can be duplicated:
<button class='email' id="#button_1"/>
<button class='email' id="#button_2"/>
Then its easier to select only these:
$('.email').on("click", function() {
// get access to the current button via this:
$(this).attr("value","delete");
});
Related
So I have this function where I add content on click to a "Favorites page", but when I click the button to remove it from the Favorites tab it removes the content but the button on the main page does not reset, the question is, how do I reset the button to it's original state after clicking the "Unfavorite" button?
https://jsfiddle.net/yjL7L6g7/3/
$(document).ready(function() {
$('button').click(function() {
if ($(this).html() == 'Favorite') {
var $favorited = $(this).parent().parent().parent().clone();
$(this).html('Favorited');
$favorited.find('button').html('Unfavorite');
$($favorited).click(function() {
$(this).remove();
});
$('#favorites').append($favorited);
}
});
});
And my second question related to this code is, how do I add a button to be on the same row with the content that is being added to the "Favorites"? I tried a simple .append(); but it did not suffice as the button got placed in a new row, will .css() suffice?
The questions might be stupid but I am still on my first steps in learning jquery
I'd avoid cloning if possible because there are simpler ways to do what you're trying to do. The code below will create a new button and add it to your favorites page. It will also attach an event to the Remove button to change the text of the Favorited button as well as remove itself after being clicked.
$(document).ready(function () {
$('button').click(function () {
if ($(this).html() == 'Favorite') {
var that = this;
$(this).html('Favorited');
var id = $(this).attr('id');
$('#favorites').append('<button id="' + id + 'Remove" class="ui-btn">Remove</button>');
$('#' + id + 'Remove').click(function () {
$(this).remove();
$(that).html('Favorite');
});
}
});
});
As for your second question, there is CSS that allows elements to live on the same line. For example, if you have two buttons that you want on the same line, it would look something like this:
<button style="display: inline;">Button1</button>
<button style="display: inline;">Button2</button>
Let me know if you have any questions.
On a page I have couple of divs, that look like this:
<div class="product-input">
<input type="hidden" class="hidden-input">
<input type="text">
<button class="remove">X</button>
</div>
I'm trying to bind an event to that remove button with this code (simplified):
$('.product-input').each(function() {
product = $(this);
product_field = product.find('.hidden-input');
product.on('click', '.remove', function(event) {
product_field.val(null);
});
});
It works perfectly when there is only one "product-input" div. When there is more of them, all remove buttons remove value from the hidden field from the last product-input div.
https://jsfiddle.net/ryzr40yh/
Can somebody help me finding the bug?
You dont need to iterate over the element for binding the same event. you can rather bind the event to all at once:
$('.product-input').on('click', '.remove', function(event) {
$(this).prevAll('.hidden-input').val("");
});
If the remove buttons are not added dynamically, you will not need event delegation:
$('.remove').click(function(event) {
$(this).prevAll('.hidden-input').val("");
});
Working Demo
You need to declare product and product_field as local variables, now they are global variables. So whichever button is clicked inside the click handler product_field will refer to the last input element.
$('.product-input').each(function() {
var product = $(this);
var product_field = product.find('.hidden-input');
product.on('click', '.remove', function(event) {
product_field.val(null);
});
});
Demo: Fiddle
But you can simplify it without using a loop as below using the siblings relationship between the clicked button and the input field
$('.product-input .remove').click(function () {
$(this).siblings('.hidden-input').val('')
})
Demo: Fiddle
When a user clicks on a certain icon, I want to hide/show relevant divs that are appropriate upon that action.
This is the JQuery I use:
$('.aTask').on('click','.descHide',function(){
$(this).closest('.taskDesc').hide();
$(this).closest('.descShow').show();
$(this).closest('.descHide').hide();
});
$('aTask').on('click','.descShow',function(){
$(this).closest('.taskDesc').show();
$(this).closest('.descShow').hide();
$(this).closest('.descHide').show();
});
$('#showTasks').on('click','.delete',function(){
$(this).closest('.aTask').remove();
});
But the intended actions do not happen as can be shown in this JSFIddle. Where I would click on the minus sign a plus sign should appear and the text below should either disappear or appear.
Use .parent().find(...) instead of .closest(...). Also, ids must be unique.
Fiddle
$('.aTask').on('click', '.descHide', function () {
$(this).parent().find('.taskDesc').hide();
$(this).parent().find('.descShow').show();
$(this).parent().find('.descHide').hide();
});
// you had a typo here $('aTask')
$('.aTask').on('click', '.descShow', function () {
$(this).parent().find('.taskDesc').show();
$(this).parent().find('.descShow').hide();
$(this).parent().find('.descHide').show();
});
$('#showTasks').on('click', '.delete', function () {
$(this).closest('.aTask').remove();
});
Now, If I hit the button, it clears all in the input field, and it automatically inputs "#marry" to it.
But, I don't want it to be cleared:(
What if I want to add "#marry" to the end of the strings that already exists in the input field?
How can I customize my javascript part?
Input field
<textarea class="box text_area" cols="10" id="input" name="comment[body]"></textarea>
button
<a href="#topic" id="username" value="#marry”><span class='btn'>reply</span></a>
javascript
$(document).on('click', 'a#username', function() {
$(".box#input").val($(this).attr('value'));
}
val() has a callback with the arguments index and value, you can use that to easily add something to the value.
$(".box#input").val(function(_, val) {
return this.value + 'some extra string';
});
$(document).on('click', 'a#username', function() {
var self = this;
$(".box#input").val(function(_, val) {
return val + self.value;
});
});
First of all adeneo's answer is good and you should read it. Here is an alternative solution that does not use jQuery:
I assume that both these elements are a part of a form. Let's say for instance the form has an ID of "post". We can access it using document.forms and then its fields as such:
var input = document.forms.post["comment[body]"];
Now, we can add to its value whenever the button is clicked. First select username with getElementById or querySelector and then add the event:
username.addEventListener("click", function(ev){
input.value += ev.target.value;
});
Or with jQuery (this also delegates if the element is not in the DOM yet):
$(document).on('click', 'a#username', function() {
input.value += this.value;
});
It might be desirable to append an extra space between the current text and the username.
append #marry at the end of text area. you can use bellow code its working fine.
$(document).on('click', 'a#username', function () {
var txtvalue = $(".box#input").val();
$(".box#input").val(txtvalue + $(this).attr('value'));
});
see jsfiddle link http://jsfiddle.net/F6mkh/1/
I would like a span to update when a value is entered into a text field using jquery.
My form field has a text box with the name "userinput" and i have a span with the id "inputval".
Any help would be greatly appreciated.
UPDATE:
although you marked this as the correct answer, note that you should use the keyup event rather than the change event or the keydown
$(document).ready(function() {
$('input[name=userinput]').keyup(function() {
$('#inputval').text($(this).val());
});
});
Try the following, you have to call again keyup() to trigger for the last char:
$(".editable_input").keyup(function() {
var value = $(this).val();
var test = $(this).parent().find(".editable_label");
test.text(value);
}).keyup();
Try this. Be sure that you understand what is going on here.
// when the DOM is loaded:
$(document).ready(function() {
// find the input element with name == 'userinput'
// register an 'keydown' event handler
$("input[name='userinput']").keydown(function() {
// find the element with id == 'inputval'
// fill it with text that matches the input elements value
$('#inputval').text(this.value);
}
}
$(function() {
$("input[name=userinput]").keydown(
function() {
$('#inputval').text(this.value);
}
)
})