I have a problem with removing cloned div. I*m unable to remove the cloned div which div clicked on to be remove. My code is like below:
<div id="item_details">
<table>
<tr>
<td>
<p class="label_text">Name:</p>
</td>
<td>
<input name="item_name[]" type="text" value="" id="item_name" class="input_text" style="width: 126px;" />
</td>
<td>
<p class="label_text">Brand:</p>
</td>
<td>
<input name="item_brand[]" type="text" value="" id="item_brand" class="input_text" style="width: 126px;" />
</td>
<td>
<p class="label_text">Model No:</p>
</td>
<td>
<input name="model_number[]" type="text" value="" id="model_number" class="input_text" style="width: 126px;" />
</td>
</tr>
</table>
<p style="margin:-16px 0px 0px 600px;">
Remove Item
</p>
</div>
<div id="new_item_details" class="new_item_details"></div>
<p style="margin:0px 0px 0px 0px;">
Add New Item Here
</p>
And my jquery code like this:
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
jQuery(document).ready(function(){
var id=0;
var max=10;
jQuery('#add_item').click(function(){
var button = $('#item_details').clone();
id++;
button.find('input').val('');
button.removeAttr('id');
button.insertBefore('.new_item_details');
button.attr('id','new_'+id);
});
jQuery('.remove').click(function(e){
jQuery("#new_1").last().remove();
//jQuery('#removeitem').toggle( !$("#new_item_details").is(":empty") );
e.preventDefault();
});
});
</script>
I tried like this. For every cloned div I appended new div id with increment number. But I'm unable to remove the particular cloned div. First div dont be removed. please help me how to solve this. Thanks.
The problem is that you subscribe to .remove elements click event at page load. The .remove elements inside your cloned divs will not be part of this subscribe. You have to use event delegation to subscribe to new elements created after page load as well:
replace:
jQuery('.remove').click(function(e){
by
jQuery(document).on('click', '.remove', function(e){
Also, a simpler solution will be to just remove the parent div of your clicked .removeelement:
jQuery(document).on('click', '.remove', function(e){
var parentDiv = jQuery(this).parent().parent();
// if not original div (id == item_details)
if(parentDiv.attr('id') !== 'item_details') {
parentDiv.remove();
}
e.preventDefault();
});
Whilst the first answer was there before me and pointed out the problem with the click, I'll still post this as I may as well, it's a different approach to solving the removal.
I've added data attributes to each of the clones, and a corresponding data-id to the button too, so on click it check it's id and removes the form with that id.
So if it helps :) http://jsfiddle.net/sfmwbgfa/
jQuery(document).ready(function(){
var id=0;
var max=10;
jQuery('#add_item').click(function(){
var button = $('#item_details').clone();
id++;
button.find('input').val('');
button.removeAttr('id');
button.insertBefore('.new_item_details');
button.attr('id','new_'+id).attr('data-id', id);
button.find('.remove').attr('data-id',id);
});
jQuery(document).on('click', '.remove', function(e){
var thisId = jQuery(this).data('id');
jQuery('div[data-id="'+thisId+'"]').remove();
//jQuery('#removeitem').toggle( !$("#new_item_details").is(":empty") );
e.preventDefault();
});
});
try
use event delegation like which is used by manji
jQuery(document).on("click",".remove",function (e) {
OR use clone(true) : it will copy event handler (deep copy)
var button = $('#item_details').clone(true);
NOTE: id should be unique
var id = 0;
jQuery(document).ready(function () {
var max = 10;
jQuery('#add_item').click(function () {
var button = $('#item_details').clone(true);
id++;
button.find('input').val('');
button.removeAttr('id');
button.insertBefore('.new_item_details');
button.attr('id', 'new_' + id);
});
jQuery('.remove').click(function (e) {
jQuery("#new_"+id).remove();
//jQuery('#removeitem').toggle( !$("#new_item_details").is(":empty") );
id--;
e.preventDefault();
});
});
**
DEMO
**
Related
<td id="RB_0_val_1">
<label for="RB_0_value_field_1" style="display:none;">Field Value</label>
<input type="text" id="RB_0_value_field_1"></td>
<td id="RB_0_extra_1"><input type="button" value="Select.." id="File"></td>
Now i need to find the id of textbox on th click of button.So i am using
var textboxid=$('input[id="File"]').closest('input[type="text"]').attr("id");
but value returned is undefined.
The id of the textbox is auto generated so i need to find the id on the click of the button.
How to do this?
Please replace your code with my code where just add prev() function.
var textboxid=$('input[id="File"]').prev().closest('input[type="text"]').attr("id");
Try utilizing .parentsUntil , :has()
$("#File").click(function() {
var textboxid = $(this).parentsUntil("td:has(:text)").find(":text").attr("id")
console.log(textboxid)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td id="RB_0_val_1">
<label for="RB_0_value_field_1" style="display:none;">Field Value</label>
<input type="text" id="RB_0_value_field_1">
</td>
<td id="RB_0_extra_1">
<input type="button" value="Select.." id="File">
</td>
</tr>
</tbody>
</table>
You can use jquery .prev() api, for doing that. Try the FIDDLE
Javascript code
$(document).ready(function(){
$('#File').click(function(e){
console.log($(this).prev('input[type=text]').prop('id'));
alert($(this).prev('input[type=text]').prop('id'));
e.preventDefault();
});
});
EDIT : For Updated markup provided in FIDDLE, I have used .closest() .prev() and .find() jquery api
$(document).ready(function () {
$('#File').click(function (e) {
var id = $(this).closest('td').prev('td').find('input[type=text]').prop('id');
alert(id);
e.preventDefault();
});
});
Hope this helps .....
I assume that the tds are inside a tr.
You can make this selector
var textboxid=$('input#File').parents('tr').find('label + input').attr("id");
Try this maybe (haven't tried it) :
var textboxid = $('#File').parent().find('input[type=text]').first().attr("id");
Should it be triggered by a click or something ?
Problem is the text box is in different td, try this:
$(function() {
$('#File').on('click', function() {
alert($(this).parent().prev('td').children('input[type=text]').prop('id'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<td id="RB_0_val_1">
<label for="RB_0_value_field_1" style="display:none;">Field Value</label>
<input type="text" id="RB_0_value_field_1">
</td>
<td id="RB_0_extra_1">
<input type="button" value="Select.." id="File">
</td>
</tr>
</table>
FIDDLE
$$(document).on('click', '#File', function() {
var qwe = $(this).parent().parent().find('input[type="text"]');
alert(qwe.attr('id'));
});
Inspired by the Chrome Postman extension, I want to implement a multi-field form section by automatically adding a new input field when a certain field is navigated to, and give focus to the new field. The below screenshot shows how this works in Postman; the down-most row contains a couple of inputs that, when navigated to, results in a new row being added above it, which can be typed into.
How can I achieve this behaviour in JavaScript/jQuery? To simplify matters, I need only one input field per row. I've created a fiddle that should serve as a starting point for a solution.
Example HTML:
<div id="last-row">
<input name="multifield" placeholder="Value"></input>
</div>
See how I'd do it: http://jsfiddle.net/jCMc8/8/
html:
<section>
<div id="initRow">
<input name="multifield" placeholder="Value">
</div>
</section>
javascript:
function addRow(section, initRow) {
var newRow = initRow.clone().removeAttr('id').addClass('new').insertBefore(initRow),
deleteRow = $('<a class="rowDelete"><img src="http://i.imgur.com/ZSoHl.png"></a>');
newRow
.append(deleteRow)
.on('click', 'a.rowDelete', function() {
removeRow(newRow);
})
.slideDown(300, function() {
$(this)
.find('input').focus();
})
}
function removeRow(newRow) {
newRow
.slideUp(200, function() {
$(this)
.next('div:not(#initRow)')
.find('input').focus()
.end()
.end()
.remove();
});
}
$(function () {
var initRow = $('#initRow'),
section = initRow.parent('section');
initRow.on('focus', 'input', function() {
addRow(section, initRow);
});
});
This is how I would do it.
HTML:
<table>
<tbody>
<tr class="item">
<td><input name="multifield" placeholder="Value" /></td>
<td><i class="icon delete"></i></td>
</tr>
<tr class="item inactive">
<td><input name="multifield" placeholder="Value" /></td>
<td><i class="icon delete"></i></td>
</tr>
</tbody>
</table>
JavaScript:
$("table")
.on("click focus", ".item.inactive", function(e) {
var curRow = $(this);
curRow.clone().appendTo("table tbody");
curRow.removeClass("inactive").find("input:first").focus();
})
.on("click", ".icon.delete", function(e) {
$(this).closest("tr").remove();
});
See test case on jsFiddle.
I have come up with a solution that seems to work so far, but I'm interested in hearing from others as to whether it is a good one. What I do is catch the focus event for the last input field, add a new row and give focus to the input field within that row. See this fiddle for working code.
HTML:
<div id="last-row">
<input name="multifield" placeholder="Value">
</div>
JavaScript:
var lastRow = $('#last-row');
var lastInput = lastRow.find('input');
function addRow() {
var newRow = $('<div><input name="multifield" placeholder="Value"><a class="row-delete"><img src="http://i.imgur.com/ZSoHl.png" /></a></div>');
var newInput = newRow.find('input');
lastRow.before(newRow);
newInput.focus();
var newDelete = newRow.find('a');
newDelete.click(function() {
newRow.remove();
});
}
lastInput.focus(function() {
addRow();
});
Im currently trying to get all input elements from a DIV.
$("[required]").each(function() {
});
I have this code which returns every element with a required attribute.
I know within the function of that each() I can use each item like:
$(this)
So I get the div ID's shown below, and try to get all the inputs from it via:
var id = $(this).attr('id');
console.log("### " + id);
console.log($("#" + id + " > :input").length);
Which returns 0 when I have 4 in put elements within that DIV (also theres a table in the div).
What I would ideally like to do is for each input element within my div, print its ID.
UPDATED
<div id="contactAddress" required="true">
<td>Addres line 1:</td>
<td colspan="2">
<input type="text"/>
</td>
<td>Addres line 2:</td>
<td colspan="2">
<input type="text" />
</td>
</tr>
</div>
console.log($(this).html());
Shows nothign but if i add anythign outsire the or like below...
<div id="contactAddress" required="true">
<input type="text" />
And run console.log($(this).html()); It shows it put not the table?
Any ideas im using Jquery Mobile
This below will find all inputs inside the div element. It will then leave a log of the id of this element.
$("div > input").each(function() {
console.log( $(this).attr("id") );
});
if you need the div id containing the inputs you could use .parent()
$("input").each(function() {
console.log( $(this).parent().attr("id") );
});
I have a table with a hidden field in each row. I need to Alert the value of hidden field when a button in that row is clicked. I have the following jQuery code. But it does not work. How do we make it work?
CODE: http://jsfiddle.net/Lijo/xWanB/
<script>
$(document).ready(function () {
//"Show ID" for Associate Button Click
$('.resultGridTable tr > td > .actionButtonNational').click(function () {
//"this" means show ID button
//Traversing to get the parent row and then the required columns in the row
var associateID = $(this).parents('tr:first > .wrapperDivHidden input[type=hidden]').val();
alert(associateID);
return false;
});
});
</script>
HTML
<td>
XXXXX
<input type="submit" name="ctl00$detailContentPlaceholder$grdSubscribedAssociates$ctl04$btnNational"
value="Show ID" id="detailContentPlaceholder_grdSubscribedAssociates_btnNational_2"
class="actionButtonNational" style="color: White; background-color: #A7A7A6;
font-weight: bold; width: 60px" />
<div id="wrapperDivHidden" class="wrapperDivHidden">
<input type="hidden" name="ctl00$detailContentPlaceholder$grdSubscribedAssociates$ctl04$hdnAssociateID"
id="detailContentPlaceholder_grdSubscribedAssociates_hdnAssociateID_2"value="789345680" />
</div>
</td>
your selector starts with tr:first > .wrapperDivHidden ... but .wrapperDivHidden is not an immediate child of tr so change your selector like so:
$(this).parents('tr').find('.wrapperDivHidden input[type="hidden"]').val();
Fiddle: http://jsfiddle.net/xWanB/3/
Try this:
<script type="text/javascript">
$(document).ready(function () {
//"Show ID" for Associate Button Click
$('.actionButtonNational').click(function () {
var associateID = $('input[type=hidden]', $(this).closest("td")).val();
alert(associateID);
return false;
});
});
</script>
Here is an over simplified example of what you are trying to do:
http://jsfiddle.net/6S5rD/
if the first column of your row is hidden then use this
var x = $('input[type=hidden]', $(this).find("td:first")).val();
Hello guys i have the below html for a number of products on my website,
it displays a line with product title, price, qty wanted and a checkbox called buy.
qty input is disabled at the moment.
So what i want to do is,
if the checkbox is clicked i want the input qty to set to 1 and i want it to become enabled.
I seem to be having some trouble doing this. Could any one help
Now i can have multiple product i.e there will be multiple table-products divs within my html page.
i have tried using jQuery to change the details but i dont seem to be able to get access to certain elements.
so basically for each table-product i would like to put a click listener on the check box that will set the value of the input-text i.e qty text field.
so of the below there could be 20 on a page.
<div class="table-products">
<div class="table-top-title">
My Spelling Workbook F
</div>
<div class="table-top-price">
<div class="price-box">
<span class="regular-price" id="product-price-1"><span class="price">€6.95</span></span>
</div>
</div>
<div class="table-top-qty">
<fieldset class="add-to-cart-box">
<input type="hidden" name="products[]" value="1"> <legend>Add Items to Cart</legend> <span class="qty-box"><label for="qty1">Qty:</label> <input name="qty1" disabled="disabled" value="0" type="text" class="input-text qty" id="qty1" maxlength="12"></span>
</fieldset>
</div>
<div class="table-top-details">
<input type="checkbox" name="buyMe" value="buy" class="add-checkbox">
</div>
<div style="clear:both;"></div>
</div>
here is the javascript i have tried
jQuery(document).ready(function() {
console.log('hello');
var thischeck;
jQuery(".table-products").ready(function(e) {
//var catTable = jQuery(this);
var qtyInput = jQuery(this).children('.input-text');
jQuery('.add-checkbox').click(function() {
console.log(jQuery(this).html());
thischeck = jQuery(this);
if (thischeck.is(':checked'))
{
jQuery(qtyInput).first().val('1');
jQuery(qtyInput).first().prop('disabled', false);
} else {
}
});
});
// Handler for .ready() called.
});
Not the most direct method, but this should work.
jQuery(document).ready(function() {
jQuery('.add-checkbox').on('click', function() {
jQuery(this)
.parents('.table-products')
.find('input.input-text')
.val('1')
.removeAttr('disabled');
});
});
use
jQuery('.add-checkbox').change(function() {
the problem is one the one hand that you observe click and not change, so use change rather as it really triggers after the state change
var qtyInput = jQuery(this).children('.input-text');
another thing is that the input is no direct child of .table-products
see this fiddle
jQuery('input:checkbox.add-checkbox').on('change', function() {
jQuery(this)
.parent()
.prev('div.table-top-qty')
.find('fieldset input:disabled.qty')
.val(this.checked | 0)
.attr('disabled', !this.checked);
});
This should get you started in the right direction. Based on jQuery 1.7.2 (I saw your prop call and am guessing that's what you're using).
$(document).ready(function() {
var thischeck;
$('.table-products').on('click', '.add-checkbox', function() {
var qtyInput = $(this).parents('.table-products').find('.input-text');
thischeck = $(this);
if (thischeck.prop('checked')) {
$(qtyInput).val('1').prop('disabled', false);
} else {
$(qtyInput).val('0').prop('disabled', true);
}
});
});
Removing the property for some reason tends to prevent it from being re-added. This works with multiple tables. For your conflict, just replace the $'s with jQuery.
Here's the fiddle: http://jsfiddle.net/KqtS7/5/