Sorry for the basic question. I just started learning Javascript about 5 days ago. I have an HTML form/table like this:
<body>
<form onsubmit="playland()">
<table id="dynamictable"> <!-- Added an id to the table element to easily select it and keep track of the rows -->
<tr>
<td>Name</td>
<td>Location</td>
<td>From</td>
<td>To</td>
</tr>
<tr class="tr_clone">
<td>
<input type="text" autofocus placeholder="who" name="add" class="tr_clone_add" >
</td>
<td>
<input type="text" autofocus placeholder="location" name="location" >
</td>
<td>
<input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker">
</td>
<td>
<input type="text" placeholder="End Date" name="datepicker_end" class="datepicker">
</td>
</tr>
</table>
<button action="submit">Click me</button>
</form>
</body>
There is a function that updates the rows once input is entered into the last row. This is that function:
$(document).on('input', 'input.tr_clone_add', function() {
if(document.getElementById("dynamictable").tBodies[0].rows.length ==
(this.parentNode.parentNode.rowIndex + 1)) {
var $tr = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find(':text').val('');
$tr.after($clone);
}
});
Then here is the function I am trying to make. I wan't to get the last table input value and store it in a variable. It just returns a bunch of jibberish at the moment though and I can't figure out why for the life of me.
function playland(){
alert($("#dynamictable tr:last").prev().find("td").html());
}
You were already very close. Working JSFiddle.
Assuming the nested $(document).on('input', ... handlers is just a typo, here's how you'd get the value of the last input in the second-to-last last table row (as the last row is now the new empty clone):
alert($("#dynamictable tr:last").prev().find("input:last").val());
Using td as your selector, you are choosing table cells, but it is really the input you're after. And using .html() will give you the actual literal HTML contents of the table cell(s), where you really want the input value - which you get with .val().
Your code mixes jQuery with vanilla Javascript. Technically there's nothing wrong with that, but it is harder to read and work with. If you have jQuery available, you may as well use it.
This plain JS:
document.getElementById("dynamictable").rows.length
can be written in jQuery as:
$('#dynamictable tr').length
The jQuery selector matches all rows, and .length will tell us how many matches we got.
This plain JS:
this.parentNode.parentNode.rowIndex
is a bit tricker, but this jQuery works:
$(this).closest('tr').index()
$(this) in this context refers to the input element that received input. closest('tr') finds the closest parent row, which will be the row the input is in. And index(), in this format, will tell us the (zero-based) position of that element amongst its siblings.
Just for fun, you could also write that whole test as:
if ($(this).closest('tr').is($("#dynamictable tr:last"))) {
That simply checks if the row with the input is actually equal to the last row in the table. This is maybe a bit more readable and understandable than the other version.
Next, It is considered bad practice to include Javascript inline with your HTML, like the onClick() handler. A better approach is to keep them separated, and add the event handler in your JS, eg something like:
$('form').on('submit', playland);
Also note that as you are handling the form submission with JS, you (probably?) don't want the standard HTML form submission to happen. To stop that, you need to use the event parameter that is automatically passed to any event handler, and stop it - you do that with:
function playland(event){
event.preventDefault();
// ... rest of your code
Here's an updated JSFiddle with all those changes incorporated.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments