How to get the nested repeater textbox control in client side event of parent Repeater control.
I have a checkbox in each repeater item of the parent repeater control and textbox in each repeater item of the child Repeater. On the checkbox change event I need to find if there is any value in the child repeater textbox of that item in the client side.
I gave a class to the textbox, but the below code loops through all the textboxes inside the parent repeater.
$('.RepeaterTextBox').each(function () {
var txtvalue= $(this).val();
Rendered HTML for a single parent looks like this
<table>
<tr>
<td>
<input id="chkActive_0" name="chkActive" />
</td>
</tr>
<tr>
<td>
<div id="divText" style="padding-left: 15px; display: none;">
<table style="width: 100%">
<tr>
<td>
<div id="Category_0">
<textarea name="txtCategoryText" rows="2" cols="20" id="CategoryText_0" class="RepeaterTextbox"></textarea>
</div>
</td>
<td>
<div id="Category_1">
<textarea name="txtCategoryText" rows="2" cols="20" id="CategoryText_1" class="RepeaterTextbox"></textarea>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Try this, it seems there are multiple textarea you have in nested repeater so the second line in the event handler will loop through each textarea and print value in console.
$("[type=checkbox]").on("change", function () {
var oTexts = $(this).parents("tr").next().find("textarea");
$(oTexts).each(function (ind, val) { console.log($(val).val()); });
});
You can use the checklist parent() property
Assuming your rendered html look like this
<div id="repeater_435734957439857435">
<input type="text" class="RepeaterTextbox">Test</input>
<input type="checkbox">
</div>
Your checkbox select event can be something like
$(this).parent().find(".RepeaterTextbox")[0].text();
This should work with your markup:
$(document).ready(function () {
$(document).on("click", "input:checkbox[name='chkActive']:checked", function () {
var nexttr = $(this).closest('tr').next('tr');
$(nexttr).find('textarea').each(function () {
alert($(this).val());//Or whatever you want
})
});
});
Related
Basically, I would like whatever I am typing be printed out in another area of my website. I am assuming I would need an eventListener but not sure how to do the display text as I type part.
<tr id="row">
<td>
<input class="item-container" type="text" id="item-input5" maxlength="128">
</td>
</tr>
Here is the input I want the eventListener to call: input class="item-container".
You can listen to the input event and read the value property of the input element. You can then use this value as textContent in another element or use the value in any other way you'd like.
document.querySelector('#item-input5').addEventListener('input', (event) => {
document.querySelector('#result_text').textContent = event.currentTarget.value
});
<tr id="row">
<td>
<input class="item-container" type="text" id="item-input5" maxlength="128">
</td>
<div id="result_text"></div>
</tr>
I want to get the value of 4th div's child input element.
Basically im getting checked chekbox value and would like to add the associated input box value using "this"keyword
Here is my html code
<div class="container">
<div class="cell-checkbox" style="float:left;margin-right:5%;">
<input type="checkbox" name="select" value="7" class="big">
</div>
<div class="cell-desc" style="float:left;margin-right:5%;width:30%;">
<!-- Content -->
</div>
<div class="cell-cart"> //input box is inside this div
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td align="right">
<table align="center" class="cellBuy">
<tbody>
<tr align="right">
<td width="1%">
<input type="hidden" name="buyid" id="buyid" value="7">
<input type="hidden" name="category" value="464">
<input type="hidden" name="itemid" value="">
<input name="qty" id="qty" size="6" maxlength="6" value="1" class="input"> /*want to get this input text value
</td>
<td height="20">
<div align="left">
<input type="button" class="btn-BuyOff" value="Buy" id="addtocart" name="addtocart">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I have tried the below mentioned code but its not working
var result = [];
$(':checkbox:checked').each(function (i) {
result.push($(this).val() + "," + $(this).parent().next().find('#qty').val());// this is for finding quantity field value
});
var strreuslt = result.join(';');
alert(strreuslt);
Try using closest to get the closest parent that contains both inputs and than trigger the find
$(':checkbox:checked').each(function (i) {
result.push($(this).val() + "," + $(this).closest('.container').find('input[name="qty"]').val());
});
or:
$(':checkbox:checked').each(function (i) {
result.push($(this).val() + "," + $(this).parent().siblings('.cell-cart').find('input[name="qty"]').val());
});
Note: if you have multiple groups of inputs you will need to wrap each group in a dom element preferably ul li
$(':checkbox').eq(3)
This gives you 4th element in jquery. Indexing starts from zero, so .eq(3) will give 4th child.
Use name instead, and never use same id for multiple elements:
$(this).parent().siblings('.cell-cart').find('[name=qty]').val();
Or use this if container contain multiple <div class="cell-cart">:
$(this).parent().next().next().find('[name=qty]').val();
You have issue with dom traversing. $(this).parent() do not return div having input checkbox element in it. You should rather traverse to closest div with class container and then find input checkbox in it. Like this:
var result = [];
$(':checkbox:checked').each(function (i) {
result.push($(this).val() + "," + $(this).closest('.container').find('[name="qty"]').val());// this is for finding quantity field value
});
var strreuslt = result.join(';');
alert(strreuslt);
So I have a table like this:
<table id="TblProduits" class="TblProduitsLayout">
<thead>
<tbody>
<tr class="placeholderRow">
<td>
<input class="PrixUnitr" type="number" />
</td>
<tr class="placeholderRow">
<tr class="placeholderRow SousTotal">
<td>
<input class="MontnHT" type="text" disabled="disabled" min="0"/>
</td>
<tr class="placeholderRow">
<tr class="placeholderRow SousTotal">
<td>
<input class="MontnHT" type="text" disabled="disabled" min="0">
</td>
</tbody>
</table>
I want to change the value of the fisrt occurence of the input with classname MontnHT contained inside a tr with classname SousTotal when the value of the input with classname PrixUnitr is changed, so I created an event like this:
$('body').on('change', '.PrixUnitr', function() {
$(this).closest('tr').nextAll("tr.SousTotal").find("input.MontnHT").val("foo");
});
My problem is that is also changes the other inputs contained inside a TR with the same classname SousTotal , as I want to change just the first occurence , what am I doing wrong? and how can it be fixed?
use .first() or .eq(0) to get the first occurrence of the element
$(this).closest('tr').nextAll("tr.SousTotal").first().find("input.MontnHT:first").val("foo");
or
$(this).closest('tr').nextAll("tr.SousTotal:eq(0)").find("input.MontnHT:eq(0)").val("foo");
I have this table:
<tbody class="schoolsRows">
<tr>
<td width="50%">
<input type="text" class="classA schoolNameClass valid" id="1">
</td>
<td width="25%">
<input type="text" class="classA postCodeClass valid" id="2">
</td>
<td width="25%">
<input type="text" class="classA urnClass valid" id="3">
</td>
<td>
<input type="button" value="Clear Content" onclick="clearRowContent(this)">
</td>
</tr>
</tbody>
On button click, I am trying to reach to each of the textboxes and clear it.
Here is my javascript code:
function clearRowContent(e) {
var row = e.closest('tr');
var textBoxToClear = row.find('.schoolNameClass');
}
I can get to the row, but the problem is when I try to get to the textboxes by using find or siblings I get this error
Uncaught TypeError: row.find is not a function
I wonder why is this happening.
bind e java script to jquery object , like $(e)
var row = $(e).closest('tr');
e is javascript object not jQuery. So , you cannot call jQuery methods on it.
Use jQuery to handle events:
$('.schoolsRows').on('click', 'button', function() {
$(this).closest('tr').find('.schoolNameClass').val(''); // Clear value of textbox
});
You are passing DOM object to clearRowContent using this and trying to use it as jQuery object. You need to convert DOM object to jQuery object to call closest
function clearRowContent(e)
{
var row = $(e).closest('tr');
var textBoxToClear = row.find('.schoolNameClass');
}
var $contact_title = $('#contact_title').val();
var $contact_summary = $('#bbcode').val();
I retreive a text area and text field then I do this:
$contact_title.val('');
$contact_summary.val('');
Nnone of them get emptied
HTML:
<form action="" method="get">
<table border="0">
<tr>
<td valign="top">Title:</td>
<td>
<input name="title" type="text" style="width:710px" id="contact_title" />
</td>
</tr>
<tr>
<td valign="top">Message:</td>
<td>
<textarea name="request" cols="30" rows="20" id="bbcode"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="right" >
<input name="send" type="button" onClick="clicked()" value="Send" />
</td>
</tr>
</table>
</form>
You should store the element in your variable and not the value.
So, your code should be:
var $contact_summary = $('#bbcode');
$contact_summary.val('');
Btw, it's a good practice to use unobtrusive javascript and bind your click event outside of your html markup:
$('button').click(function() { //clear inputs });
Your problem is because you are setting your variables to be the string values of the elements, rather than the jQuery objects containing the elements.
Try this:
var $contact_title = $('#contact_title');
var $contact_summary = $('#bbcode');
$contact_title.val('');
$contact_summary.val('');
Or alternatively;
$('#contact_title').val('');
$('#bbcode').val('');
Your variable ($contact_title) contains the text, not the actual DOM-element, from what I can tell. If you change it to
$('#contact_title').val('');
You'll be fine.
you have to use the same syntax that you used while getting the values from those filed.
try:
$('#contact_title').val('');
$('#bbcode').val('');
In js fiddle easier to write/read javascript code. Here is an answer.
http://jsfiddle.net/7RFYx/
jQuery(document).ready(function () {
var $contact_title = $('#contact_title');
var $contact_summary = $('#bbcode');
var $contact_summary_val = $contact_summary.val();
var $contact_title_val = $contact_title.val();
$contact_title.val('');
$contact_summary.val('');
});