I have a markup like this
<table id="data">
<tr>
<td>Name</td>
<td>Test</td>
</tr>
<tr>
<td>
<input type="hidden" id="file-name" value="file.doc">
</td>
<td><input type="text" value="Test 1"></td>
</tr>
<tr>
<td>
<input type="hidden" id="file-name" value="file1.docx">
</td>
<td><input type="text" value="Test 2"></td>
</tr>
<tr>
<td>
<input type="hidden" id="file-name" value="file.pdf">
</td>
<td><input type="text" value="Test 3"></td>
</tr>
</table>
Remove File
In that markup you can see I have file name as hidden fields and under the table I have a remove file tag. So the thing is like this when I will click on the remove file then it will remove that entire row(tr tag) inside where the filename
file.doc is present. So for that I have made my js like this
<script type="text/javascript">
$(document).ready(function() {
$('#remove').click(function(e) {
var FileName = 'file.doc';
var GetRowVal = $('table#data td #file-name').val();
if(GetRowVal == FileName ) {
var Parent = $(GetRowVal).parent().remove();
}
else {
console.log(' error');
}
});
});
</script>
But it is not removing the row. So can someone kindly tell me whats the issue here? Any help and suggestions will be really apprecaible. Thanks
There are duplicate id's in your Html,just correct that issue and try below answer :
<script type="text/javascript">
$(document).ready(function() {
$('#remove').click(function(e) {
e.preventDefault();
var FileName = 'file.doc';
$('input[type="hidden"]').each(function(){
if( $(this).val() == FileName )
{
$(this).closest('tr').remove();
}
});
});
});
</script>
Following code return Array of Jquery Object.
Then function .val() cannot have meaning.
$('table#data td #file-name');
You have two probles in this code:
first : Ids are not unique.
second:
var GetRowVal = $('table#data td #file-name').val();
will hold only value eg. file.doc
so you can't later
remove the object in this line:
var Parent = $(GetRowVal).parent().remove();
so to repair it first change id to class like here:
<input type="hidden" class="file-name" value="file.doc">
and later You can modify your code:
$(document).ready(function() {
$('#remove').click(function(e) {
var GetRowVal = $(".file-name[value='file.doc']");
$(GetRowVal).parent().parent().remove();
});
});
Here jsfiddle
Related
I have a HTML table which has the following structure:
<table id="myTable">
<tr>
<td><input type="text" name="FullName" value="Tom" /></td>
<td><input type="checkbox" name="isActive" /></td>
<td>Edit
</tr>
</table>
When the user clicks the 'edit' link, a Javascript function is called (see below). In this function I need to get the data from the table, i.e., FullName and whether or not isActive has been checked.
$("#namedTutors").on('click', '.editTutor', function () {
var tr = $(this).closest("tr");
var fullName = tr.find("input[name=FullName]").val();
});
I can get the FullName easy enough, but I'm having difficulties retrieving the data to see if isActive has been checked/ticked or not.
Could someone please help.
Thanks.
You could select the ckeckbox input by name [name=isActive] then use the .is(':checked') to check whether the ckeckbox is checked or not, like:
$("#namedTutors").on('click', '.editTutor', function() {
var tr = $(this).closest("tr");
var fullName = tr.find("input[name=FullName]").val();
var isActive = tr.find("input[name=isActive]").is(':checked');
console.log( isActive );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="namedTutors">
<tr>
<td><input type="text" name="FullName" value="Tom" /></td>
<td><input type="checkbox" name="isActive" /></td>
<td>Edit
</tr>
</table>
if(tr.find('input[name="isActive"]:checked').length) {
console.log('it is checked');
}
I am making a page that contains a table with a button to add a row. It is a table for users to input data, and will eventually be submitted to a database.
Currently, I have a price and a quantity field in each row. When either of them change, I want to calculate the total and write it to another cell.
This is my event handler (wrapped in $(document).ready()):
$(".quantity_input, .price_input").change(function () {
console.log(this.value);
cal_total();
});
This is my current code:
function cal_total() {
if (isNaN(parseFloat(this.value))) {
alert("You must enter a numeric value.");
this.value = "";
return;
}
var cell = this.parentNode;
var row = cell.parentNode;
var total = parseFloat($("#items_table tr").eq(row.index).find("td").eq(3).find("input").first().val()) * parseFloat($("#items_table tr").eq(row.index).find("td").eq(4).find("input").first().val());
if (!isNaN(total)) {
$("#items_table tr").eq(row.index).find("td").eq(5).html(total.toFixed(2));
}
}
And this is what the inputs look like:
<input type='text' class='fancy_form quantity_input' name='quantities[]' size='4' style='text-align:center;border-bottom:none;'>
In addition to my original question, the event is never fired. Can anyone see why?
But more importantly, is this the best way to retrieve the values? I really don't think so but I cant come up with anything more clever.
Thank you!
you have to pass paremeter to calc_total to define input or tr
try this code
$(".quantity_input, .price_input").change(function () {
$(".quantity_input, .price_input").change(function () {
cal_total(this);
});
});
function cal_total(elem){
var row=$(elem).closest("tr")
var quantity=row.find(".quantity_input").val()-0
var price=row.find(".price_input").val()-0
var total=quantity * price
row.find(".totl_input").val(total)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input class="quantity_input" />
</td>
<td>
<input class="price_input" />
</td>
<td>
<input class="totl_input" />
</td>
</tr>
<tr>
<td>
<input class="quantity_input" />
</td>
<td>
<input class="price_input" />
</td>
<td>
<input class="totl_input" />
</td>
</tr>
<tr>
<td>
<input class="quantity_input" />
</td>
<td>
<input class="price_input" />
</td>
<td>
<input class="totl_input" />
</td>
</tr>
</table>
I am loading a HTML template using the $.get function and I would like to parse this HTML and inject my own values into it. So far I have tried the below snippet, but it doesn't seem to be working.
$.get('/js/dynamic/locations', function(newRow) {
var existing_elem = $('.edit-table tr:last');
existing_elem.after(newRow);
var appendedRow = existing_elem;
appendedRow.find('td[data-th="Name"] > span').text(v.location_name);
appendedRow.find('input').val(v.location_name);
appendedRow.effect("highlight", {color: '#CCB4A5'}, 1000);
});
The value of newRow when loaded is:
<tr>
<td data-th="Name"><span class="edit-input-text"></span>
<input class="inp input-edit" type="text" name="location_name" value=""></td>
</tr>
First of all you have to append the loaded content into the DOM. Then, select and edit any element you want:
EDIT (#2)
HTML (Assumung this is the html loaded: 2 columns)
<tr>
<td data-th="Name"><span class="edit-input-text"></span>
<input class="inp input-edit" type="text" name="location_name" value=""> </td>
<td data-th="LastName"><span class="edit-input-text"></span>
<input class="inp input-edit" type="text" name="location_name" value=""> </td>
</tr>
jQuery
$.get('/js/dynamic/locations', function(newRow) {
var existing_elem = $('#existing_elem');
//Append the html
existing_elem.append(newRow);
//Select the appended html
var appendedRow = existing_elem.children('tr');
//Select eny elem inside the appended html
appendedRow.addClass('appended');
appendedRow.find('td[data-th="Name"] > span').text('your_text');
appendedRow.find('input').val('new_value');
//Second column
appendedRow.find('td').eq(1).find('input').val('another_value');
});
I think your selector has issue. Try this -
$.get('/js/dynamic/locations', function(newRow) {
$(newRow).filter('tr td[data-th="Name"] span').text(v.location_name);
});
where the selector 'tr td[data-th="Name"] span' should be noticed
OR
$.get('/js/dynamic/locations', function(newRow) {
$('[data-th="Name"]', newRow).find('span').text(v.location_name);
});
Did you try:
$(newRow).find('.edit-input-text').text(v.location_name);
Working demo
//Create a jQuery object from your ajax response
var newRow = $('<tr><td data-th="Name"><span class="edit-input-text"></span><input class="inp input-edit" type="text" name="location_name" value=""></td></tr>');
//Manipulate
newRow.find('.edit-input-text').text("I am new here")
//Do whatever
$('#demo').append(newRow);
I have some code which I got from jquery which i modified a bit to that all checked box values
will populate a text input element.
this works perfectly on jsfiddle.. see link to demo
http://jsfiddle.net/aAqt2/
but when I try it on my out site, it does not work.. any Idea why? see my code below
<html><head>
<script src="/js/jquery.min.js"></script>
<script type="text/javascript">
$('input').on('change', function() {
var values = $('input:checked').map(function() {
return this.value;
}).get();
$('#output').val(values.toString());
});
</script>
</head>
<body>
<from name="test">
<table>
<tr>
<td><input type=checkbox value="1"></td>
</tr>
<tr>
<td><input type=checkbox value="2"></td>
</tr>
<tr>
<td><input type=checkbox value="3"></td>
</tr>
<tr>
<td><input type=checkbox value="4"></td>
</tr>
<tr>
<td><input type=checkbox value="5"></td>
</tr>
<tr>
<td><input type="text" id="output"></td>
</tr>
</table>
</form>
</body>
</html>
You need to wrap your code in a document ready call or place it at the end of the page before the closing body tag. JSfiddle is doing that for you automatically.
Ex:
$(document).ready(function () {
$('input').on('change', function () {
var values = $('input:checked').map(function () {
return this.value;
}).get();
$('#output').val(values.toString());
});
});
Wrap your code in a DOM ready function:
$(document).ready(function() {
//code here
});
You need to put your code inside a ready function.
$(document).ready(function () {
$('input').on('change', function() {
var values = $('input:checked').map(function() {
return this.value;
}).get();
$('#output').val(values.toString());
});
});
I dynamically created a table with three columns.
<tr>
<td>1</td>
<td>SegName</td>
<td><input type='text' /></td>
</tr>
I'm trying to write a function that goes through each row and grabs the value in that will be in the textbox.
Javascript:
$("#codeSegmentBody").children().eq(x).children().eq(2).val();
The code brings brings up undefined when I do val(), but if I do html it'll grab the html of the textbox.
How can I get this to bring me the value?
<table id="test">
<tr>
<td>
<input type="text" value="123">
</td>
</tr>
<tr>
<td>
<input type="text" value="abc">
</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function(){
$("#test").find(":input[type=text]").each(function(){
alert( $(this).val() );
});
});
</script>
Here is a fiddle that will get you there:
http://jsfiddle.net/uS8AK/
Assuming #codeSegmentBody is the name of your table, try this:
$("#codeSegmentBody td input").each(function() {
var inputValue = $(this).val();
alert(inputValue);
});
Example fiddle
$("#codeSegmentBody tr input[type='text']").each(function(){
alert($(this).val());
})
Try this
$("#codeSegmentBody tr").each(function() {
alert($(this).find("input").val());
});
You are referencing the containing <td> not the input. Try:
$("#codeSegmentBody").children().eq(x).find(":text").val();
var str = "";
$("#codeSegmentBody .third-column input").each(function()
{
str += this.value;
});
alert(str);
Not easier
$("table tr td input").val();
?
BTW. You don't have any value in this input anyway.