We Keep Coding

Change attributes dynamically using jquery

I am running a loop which is appending input fields. Now, as I am using a loop, all the attributes are similars. So, when I need to grab any one of the then I am grabbing more than one field.
How do I dynamically change the attributes according to the index, so that I can grab the correct input field ?
ebs_no = data.number_ebs;
for(i=0;i<ebs_no;i++){
$('form.ebs').append("<br>EBS"+(i+1)+"</br>");
$('form.ebs').append('<br> SNAPSHOTNO <input type="text" name="'+i+'"></br>');
$('form.ebs').append('<input type="submit" name="submit">');
$('[name='+i+']').on('submit',function(){
alert($('[name='+i+']').val());
});
}

Replace this:
alert($('[name='+i+']').val());
by this:
alert($(this).val());
The code $(this) refers to the element being treated

Your are looking for event delegation.It is used for created Dynamically DOM elements and use class instead of iterare i in the loop
ebs_no = data.number_ebs;
for (i = 0; i < ebs_no; i++) {
$('form.ebs').append("<br>EBS" + (i + 1) + "</br>");
$('form.ebs').append('<br> SNAPSHOTNO <input type="text" class="someClass" name="' + i + '"></br>');
$('form.ebs').append('<input type="submit" name="submit">');
$('[name=' + i + ']').on('submit', function () {
alert($('[name=' + i + ']').val());
});
}
$(document).on('submit', '.someClass', function () {
alert($(this).val());
});

jQuery .each() index value

I’ve been teaching my self JavaScript and jQuery for a few months, but I’m still getting confused with JavaScript objects and jQuery objects.
In the following example I assigned a jQuery object to the variable $target. The $target should consist of an array of two objects.
My question is why I have to wrap the value variable again into the jQuery object in .each() function ?
$('select.to_append').change(function(){
var $target = $('select.to_append');
var $form = $('#anotherForm');
$.each($target, function(key, value){
$form.append('<input name="' + $(value).attr('name') + '" type="hidden" value="' + $(value).val() + '"></input>');
});
});
The sample code I use to append values from selects which are not parts of the form being submitted;

because $target is a jQuery object, but when you iterate you will get a dom element reference in your iteration handler not a jQuery object. So if you want to access jQuery methods on that object you need to wrap the object again.
By the way to iterate over a jQuery object you can use .each() instead of jQuery.each()
$('select.to_append').change(function () {
var $target = $('select.to_append');
var $form = $('#anotherForm');
$target.each(function (index, el) {
$form.append('<input name="' + $(el).attr('name') + '" type="hidden" value="' + $(el).val() + '"></input>');
});
});

Select all textboxes using jQuery

I have code which displayed a person's info in a table(fields:name, surname, address, etc.) and one of the inputs is a checkbox. The code is as follows:
$("#table").append('<tr class="trow'+j+'">'+
'<td class="ids" id="z'+i+'">'+totrecs+'</td>'+
'<td>'+member[i].jdate+'</td>'+
'<td class="users"
'<td id="contact'+i+'">'+member[i].fname+' '+member[i].lname+'</td>'+
'<td id="myaddress'+i+'">'+member[i].address1+' '+member[i].town+'</td>'+
'<td><input type="checkbox" name="whome" id="showMe'+i+'"'+
'class="boxes" onclick="getMe('+i+')" /></td></tr>');
totrecs++;
j++;
}
What I am tryin to do is program a function that when clicking a certain button all of the checkboxes will be selected/checked.
I would appreciate any help. Thank You.

this may be helpful: JQquery Select All Checkboxes tutorial

To check all checkboxes in #table using jQuery:
$('#table :checkbox').attr('checked', '');
Note that this will not trigger any click events you set for the checkboxes. You should use the change event instead of click to make it happen as expected.

<input type="button" value="Check/Uncheck All" />
$('#btnId').on('click', function() {
var check = false;
if( !$(this).hasClass('checked')){
bool = true;
}
$(this).toggleClass('checked');
$('#table input[type="checkbox"]').prop('checked', check)
});

Deleted specific appended element with jquery

I'm pretty new to JQuery, as you can tell by my question...
The user can append many new input fields to the form. This works great, but how can they delete a specific field? If they append 5 input fields, how do they delete lets say the third field?
Below is my following code. What is currently does is always delete the first item when clicked.
$("#addNewItem").click(function(){
$("#invoice_items").append('<input type="text" name="name[]" value="name" id="item_name" class="item_name" /><img src="images/delete.png" />');
});
$("#delete_input").live("click", function(){
$("#item_name").remove();
$(this).remove();
});

How about using additional container for inputs?
http://jsfiddle.net/dFpMV/
$("#addNewItem").click(function(){
$("#invoice_items").append('<div class="input-container"><input type="text" name="name[]" value="name" id="item_name" class="item_name" />X<img src="images/delete.png" /></div>');
});
$("#delete_input").live("click", function(){
$(this).parent().remove();
});

First, count the number of inputs you've added and store it in a variable.
Then, when you add the element, make a unique identifier based on that number.
$("#invoice_items").append('<input type="text" name="name[]" value="name" id="item'+count'" class="item_name" /><img src="images/delete.png" />');
I would avoid using the specific item name as the id in this case, use something generic like item0, item1 etc.
Then, to remove
$("#item" + desiredNumber).remove();
$(this).remove();

all links need to have unique id. Allowing to append element with specified id twice is an error. What you could do is to add an artificial number at the end of id to make them unique. I would wrap both input and link into a div, i would assign an unique id to it, assign a class to delete link instead of id and remove div like ($this).parent().remove()
If you are using jQuery 1.7+: Also note that .live() is deprecated and you should use .on() instead (note that syntax is however a little bit different).

I made 2 examples for you and adding a dummy variable so you can see whats happend:
1 If you know how to DOM will look like and the relationship between the delete link and the input you can simply traversing to the previous item.
$("#delete_input").live("click", function(){
$(this).prev().remove();
$(this).remove();
});​
http://jsfiddle.net/JgKRw/ Example nr 1 in action
2 You give each item a unique number when you add them to the DOM.
var dummyId = 0;
$("#addNewItem").click(function(){
dummyId++;
$("#invoice_items").append('<input type="text" name="name[]" value="name ' + dummyId + '" id="item_name" class="item_name" data-id="' + dummyId + '" /><a data-id="' + dummyId + '" href="#" id="delete_input">' + dummyId + '<img src="images/delete.png" /></a>');
});
$("#delete_input").live("click", function(){
var deletedId = $(this).data("id"); // Get the ID of the clicked link
$("input[data-id='" + deletedId + "']").remove(); // Seach for an input which has the ID
$(this).remove();
});​
http://jsfiddle.net/JgKRw/1/ Example nr 2 in Action
I would implemented number 2, couse else you have to take care of the script if you want to change the UI.
Btw you should only have one element assigned to an ID, so change your ID and use classes insteed.
http://api.jquery.com/class-selector/

Given the markup you appending it should be simply $(this).prev().remove(); and ignore the IDs.

Here's my fiddle:
http://jsfiddle.net/JfUAa/
(function () {
var count = 0,
items = document.getElementById("input_items"),
$items = $(items),
tpl = '<div><input type="text" id="{{id}}" />delete</div>';
function addItem(){
$items.append(tpl.replace("{{id}}", count++));
}
function remove(){
items.removeChild(this.parentNode);
}
$("#addNewItem").click(addItem);
$items.on("click", "a", remove);
}());

Select hidden input from within next td [jQuery]

I have a table layed out like this:
<td>
somename
</td>
<td class="hoverable value" >
somevalue
</td>
<td class="changed">
</td>
<td class="original value">
<input type="hidden" value="somevalue" />
</td>
And what I'm trying to do is, I hover over the hoverable td which turns it into a textbox. Once I hover out I want to check the hidden field for it's original value and put an image in changed if the 2 are different from each other. I already have this:
$(document).ready( function() {
var newHTML = '';
$('table td.hoverable').hover(
function () {
var oldHTML = $(this).html().trim();
$(this).html('<input type=\'text\' value=\'' + oldHTML + '\' size=\'' + ((oldHTML).length + 2) +'\' />');
},
function() {
newHTML = $('input', this).val();
var oldHTML = $(this).next('td.original').children('hidden').val();
if(newHTML != oldHTML) {
$(this).next('td.changed').html('Changed');
}
$(this).html(newHTML);
})
});
but it doesn't work. What fails apparently is grabbing the value of the hidden field, and I've tried selecting it in several different ways but just can't get to it.
Any ideas or tips are gratefully appreciated ;)

You need to use .nextAll()
var oldHTML = $(this).nextAll('td.original').find('input:hidden').val();
Why? Because .next() is taking the next element and seeing if it matches the selector. If you use .nextAll() you get the next element that matches the selector.

Try
$(this).next('td.original').find('input:hidden').val();

var oldHTML = $(this).next('td.original').children(':hidden').val();

Replace
var oldHTML = $(this).next('td.original').children('hidden').val();
With
var oldHTML = $(this).next('td.original').find('input:hidden').val();