I have a simple HTML page where I will be having few rows, each row specifies a record in database, I have some input fields on each to collect and a link at the end, when I click that I need to collect the input field values on the same row.
The HTML goes like this:
<tr>
<td>Name</td>
<td><input name="mode_sort"/></td>
<td><input name="mode_selected" type="checkbox"/></td>
<td>Add</td>
</tr>
So I will be writing my code to collect input fields on the row when I click the "Add" link, I'm not sure how to pass the current clicked selector and get the field values with that in add_this_mode() function.
Within the function you can use jQuery traverse methods to isolate the parent row and then to find elements within that row
function add_this_mode( elem){
/* get parent row */
var $row = $(elem).closest('tr');
/* use find() to get other elements in row */
alert( $row.find('[name=mode_sort]').val() );
}
Related
I have a table where I am showing some data in first three columns but in last column user enters his feedback/comments. On submit, data is posted and sent via email.
Problem is values in textarea are not posted upon submit. I have 6 rows in my table.
Sample TR
<tr>
<td>1</td>
<td>TEST 123</td>
<td>TEST</td>
<td><input type="text" value="" id="prbt-rev" ></td>
</tr>
AJAX CALL
$(document).on('click','#email',function(e){
e.preventDefault();
var reportData = $("#report-data").html();
var request = $.ajax({
url : '<?=base_url();?>healthcheck/sendEmail',
type : 'POST',
data : {report:reportData}
});
request.done(function(response){
$('#result').html(response);
}); });
Your selector #report-data doesn't match any element in the HTML you've shared. Either some HTML is missing or you are using the wrong selector.
The jQuery html() method gets the child nodes of the selected element. A text input doesn't have any child nodes. A textarea's child nodes describe its default value, not its current value.
Use val() to read the current value of a form control.
Your HTML code has missing the fields that you getting in the jquery!.
Its more helpful and easy to give tips if you put here your full code here that you are using.
In my Java program I have a List<DemoTable>.
List<DemoTable> demotable = new ArrayList<DemoTable>();
DemoTable is a class with id,name,and details variables.
I display these details using Jquery..
<table>
<c:forEach items="${modalAttribute.demotable}" var="demo">
<tr class="M_row_bg M_read">
<td><input type="checkbox" id="isDelete"/></td>
<td><label for="name">${demo.name}</label></td>
<td><label for="totalExperience">${demo.details}</label></td>
</tr>
<c:forEach>
</table>
Data will be displayed correctly ... but when check box is clicked I want to get Table row id:
$("#isDelete").click(function(){
if (this.checked){
alert('checked');
alert(demo.id);
} else {
alert('unchecked');
}
} );
I expect this alert to give the DemoTable id, but this alert does not show. Also, this click only works for the first row of the table.
How can I get the DemoTable id when I click the check box?
What does my code need to work with each row of table click event, not just the first row?
you're using #isDelete multiple times in the table. This is illegal, and the reason your code only works on the first row. Use a class instead.
your table rows don't even have an ID. They do however have an implicit index.
you should give your table an ID
you can use "event delegation" and just register a single click handler on a common parent element (i.e. the table) which then uses event bubbling to figure out which actual element was clicked. This can be more efficient than registering the exact same event handler explicitly on every matching element.
Try this instead:
$('#myTable').on('click', '.isDelete', function(){
if (this.checked) {
var rowId = $(this).closest('tr').index(); // row within table (0 based)
}
});
I have a html table displayed in a showmodal dialog window, the html-body has several divs, each div having several tables, tr and td within them.
The user will update entries within the input tag so i need to capture the change.
One such div looks like below. How to I retrieve all these values on a button click. I have heard of serialize() method. Will it work for all tag types, "insert","select", "option" etc etc.
<div>
<table>
<tr><td></td><td></td><td></td>
</tr>
</table>
<table>
<tr><td></td><td></td>
</tr>
<tr><td></td><td></td><td></td><td></td>
</tr>
</table>
<table>
<tr><td></td>
</tr>
</table>
</div>
Apologies, writing my solution in a pseudocode fashion:
//I created a div container and then loop through all the divs
//then retrieve values using one of the below
$("classname > div[id]").each(function(){
var a= document.getElementsByName("name of the tag"); //by name
var b= document.getElementById("id of the tag"); //by id
var c= $("input[class='"+trd_id+"']:checked").val(); // for radio button
});
// loop by div counts and alert the values. Solved my problems
I've asked a lot of jQuery questions recently as I'm trying to use it rather good old Javascript, as I mentioned in previous questions, "I'm currently having to extend an very old ASP.NET site which has a database generated front end and is a behemoth of an application, it needs completely rewriting - however I've been told to add to it than redevelop it "
Now what I'm doing is once the backend is rendering a table to the interface I wish to loop through the tr elements of the table, within one of the td elements of the tr there are two radio buttons. I need to determine the name of the radio button group as I don't define them, the systems does using a GUID or something?
This is the table for example...
<table id="tableID">
<tr>
<td class="qCol">
<!-- Label here -->
</td>
<td class="qCo2">
<!-- img here -->
<!-- and a text box -->
</td>
<td class="qCo3">
<!-- select menu here -->
</td>
<td class="qCo4">
<!-- radio buttons here -->
</td>
<td class="qCo5">
<!-- select menu here -->
</td>
<td class="qCo6">
<!-- hidden validation image here -->
</td>
<tr>
</table>
Okay, I'm looping through the table and at the same time switching the innerHTML of one cell to another and hiding some of the rows, I'll be adding functionality to show these later, here's the jQuery:
$('#tableID tr').each(function (i) {
/*switch select and validation and clear */
$(this).children('td.qCol').html($(this).children('td.aCol5').html());
$(this).children('td.aCol5').html($(this).children('td.vCol'.html(""));
/* hide all but the first row*/
if (i >= 1) {
$(this).hide();
}
now I'm trying to determine the name attribute of the radio buttons that will be in the cell with class .qCo4, however I'm having no luck as the following returns an error and is "undefined"...
/* get the radio button name and check if either are selected*/
// check something exists...
if ($('input:radio', this).attr('name')) {
var thisRadioName = $(this).closest("input:radio").attr('name').val();
alert(thisRadioName);
}
$this is the tr element, so should I be using child rather than closest? If this makes no sense I can expand and explain better.
you should use find() or children(). closest() goes up the tree, while find looks for elements down the tree
var thisRadioName = $(this).find("input:radio").attr('name');
you can use also ':checked' to check if any radio is checked
var checkedRadio = $(this).find("input:radio:checked")
You should use children if you are absolutely sure that the elements you are looking for are direct child of the element, otherwise use find(). (using finds protect you from refactoring code if you modify the html, like adding a wrapping div for other reasons like styiling)
look at this fiddle: http://jsfiddle.net/nicolapeluchetti/Evq6y/
var thisRadioName = $(this).find("input:radio").attr('name');
should do what you want
This problem is related to my previous question in this link. Now, what I'm trying to do is do the opposite thing. I have here a dynamic table (where you can add and delete rows) and whatever is the data that the user input in the latest use of table (trigger by a button) should be retrieve and be posted in the same table (if the same button is clicked).
Here's the code that I used to get the data from my dynamic table:
$('#tableSearchMainAccount1 tr').each(function(){
var td = '';
if ($(this).find("td:first").length > 0) { // used to skip table header (if there is)
$(this).find('option:selected').each(function(){
td = td + $(this).text()+ ',';
});
td = td + $(this).find('input').val();
filt[ctr]=td;
ctr += 1;
}
});
alert (filt); //alert output like name,equals,ann,age,equals,11
Now, what I want to do is that when I click the button again, this previous input data will be posted again in my dynamic table.
My table is something that looks like this:
<table> <tr><th>field</th><th>comparison</th><th>value</th></tr>
<tr>
<td>
<select style="width:5em;" class="field">
<option>name</option>
<option>age</option>
<option>sex</option>
</select>
</td>
<td>
<select style="width:5em;" class = "comp">
<option>equals</option>
<option>starts with</option>
<option>not equal to</option>
</select>
</td>
<td><input type="text" class = 'value'></td>
<td><img class="add" src="css/images/add.png" /></td> // this is used to add new row
</tr>
</table>
The last data that a user input in the table should be displays in the table when table shows again. How do I add the data to my dynamic table?
EDIT:
When the button is clicked, a dialog opens which contains my dynamic table and every time a user close the dialog, all the row from that table will be gone same as the data the user entered. I already create a variable that holds the latest inputted data in the table. So when the button click again, I want the table to generate or displays the last input data by the user. The output should be the same as the latest input data.
Assuming you had a button id add and you wanted to add a table row onto the end:
$('#add').on('click', function() {
var $lastTr = $('table tr:last');
$lastTr.clone().insertAfter($lastTr);
$('#add', $lastTr).remove();
});
Using .clone to help us clone the last row, and appending it at the end.
Fiddle: http://jsfiddle.net/garreh/w9fXJ/
And just to pre-empt you're next question, here's the addition of removing a row ;-)
$('.remove_row').on('click', function() {
$(this).closest('tr').remove();
});
Fiddle: http://jsfiddle.net/garreh/w9fXJ/1/
JQuery.prepend and JQuery.append will help you