Develop Reference

jQuery Clone table row with selected drop down value

i want clone previous row's selected option value to the new raw while cloning new row.
$("#btnAdd").on("click", function() {
var $tableBody = $('#tbl').find("tbody"),
$trLast = $tableBody.find("tr:last"),
$trNew = $trLast.clone();
$trLast.after($trNew);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
<tbody>
<tr>
<td>
<p>Cell3</p>
</td>
<td>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
</td>
</tr>
</tbody>
</table>
<input type="button" id="btnAdd" value="Add New Row"></button>
I'm unable to copy the last row selected drop down list value, any solution or cloning is not the way to do it?

You need to set the select elements value as .clone() intentionally doesn't copy dynamic state of textarea and select
Note: For performance reasons, the dynamic state of certain form elements (e.g., user data typed into textarea and user selections made to a select) is not copied to the cloned elements. When cloning input elements, the dynamic state of the element (e.g., user data typed into text inputs and user selections made to a checkbox) is retained in the cloned elements.
Use
$trNew.find('select').val($trLast.find('select').val());
$("#btnAdd").on("click", function() {
var $tableBody = $('#tbl').find("tbody"),
$trLast = $tableBody.find("tr:last"),
$trNew = $trLast.clone();
//Set updated value
$trNew.find('select').val($trLast.find('select').val())
$trLast.after($trNew);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
<tbody>
<tr>
<td>
<p>Cell3</p>
</td>
<td>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
</td>
</tr>
</tbody>
</table>
<input type="button" id="btnAdd" value="Add New Row"></button>
If case tr has multiple select, Value's can be fetched based on index of the element.
$trNew.find('select').val(function(index, value) {
return $trLast.find('select').eq(index).val();
});
$("#btnAdd").on("click", function() {
var $tableBody = $('#tbl').find("tbody"),
$trLast = $tableBody.find("tr:last"),
$trNew = $trLast.clone();
$trNew.find('select').val(function(index, value) {
return $trLast.find('select').eq(index).val();
});
$trLast.after($trNew);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
<tbody>
<tr>
<td>
<p>Cell3</p>
</td>
<td>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
</td>
<td>
<select>
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
</td>
</tr>
</tbody>
</table>
<input type="button" id="btnAdd" value="Add New Row"></button>

You can modify $trNew elements before appending it.
In your case:
$('select', $trNew).val($('select', $trLast).val());

My solution was
$trNew.find('.bootstrap-select').next().remove();

How to select the td where my active element is in

I have got a table with a select option in it. After the select changes, the td's innerHTML should change to the selected value so the select disappears.
<table>
<tr>
<td>
<select onchange="update(param1, param2)">
<option value="Value 1">Value 1</option>
<option value="Value 1">Value 2</option>
</select>
</td>
</tr>
</table>
So, when I select Value 2, the table should look like this:
<table>
<tr>
<td>
Value 2
</td>
</tr>
</table>
How do I do this. I've tried things like parentNode, parent()..
It has to be javascript or jQuery.
function update(id, row) {
var val = document.activeElement.value;
var id = id;
var row = row;
if (val != '') {
$.post('../inc/helikopter_beheer.php', {val: val, id: id, row: row}, function(data) {});
$.post('../inc/gereedstelling_get_info.php', {id: id, rij: row}, function(data) {
var result = data.split(",");
// this.parents('id').innerHTML = result;
$(this).closest("td").html(result[0]);
alert(result[0]);
});
};
}
This is what I got. It's getting some data out of my database, turns it into result and i have to get result in my td instead of the select.

JQuery function that accomplishes it (once you've given your select element an id of mySelect):
$('#mySelect').on('change', function () {
var val = $(this).val();
$(this).parent().html(val);
});
JS Fiddle Demo

<table>
<tr>
<td>
<select id="wdm_select">
<option value="Value 1">Value 1</option>
<option value="Value 2">Value 2</option>
<option value="Value 3">Value 3</option>
</select>
</td>
</tr>
</table>
<script>
$(document).ready(function() {
$("#wdm_select").on("change",function() {
var selected_val = $(this).val();
$(this).parent().html( selected_val );
})
})
</script>
here is demo

$(document).on('change','#foo',function(){
$(this).parent('td').html($(this).val());
$(this).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<select id="foo">
<option value="">--Select--</option>
<option value="Value 1">Value 1</option>
<option value="Value 2">Value 2</option>
</select>
</td>
</tr>
</table>

show no of fields depending on number selected in dropdown

I am looking at this post: Using jQuery to dynamically add form fields (or fieldsets) based on a dropdown box value
is there not an easier way?
my code:
<tr>
<td valign="top">
<label for="children">No. of Minor Children*</label>
</td>
<td>
<select id="nochildren" name="nochildren" onchange="displayfields(this.value)">
<option value="1">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
<br />
<option value="<?php echo $row_list['nochildren']; ?>">
<?php if($row_list['nochildren']==$select){ echo $row_list['nochildren']; } ?>
</option>
<script language="JavaScript">
$(document).ready(function(){
$('#nochildren').change(function(){
$("#child").show();
displayfields($(this).val());
});
});
function displayfields(val)
{
for (var i=1 ; i<val; val++)
{
alert(i);
$("#child"+i).show();
}
}
</script>
</tr>
<div id="child">
<tr>
<td valign="top">
<label for="names">Child Full names*</label>
</td>
<td valign="top">
<input type="text" name="childname" maxlength="50" size="30"></input>
</td>
</tr>
</div>
if no children don't show the div if 4 children show 4 div tags

Try this:
<script type="text/javascript">
$(document).ready(function(){
$('#nochildren').change(function(){
//-------
// Here add your code to hide all div's
//-------
displayfields($(this).val());
});
});
function displayfields(val)
{
for (var i=1 ; i<val; val++)
{
alert(i);
$("#child"+i).show();
}
}
</script>

See this Fiddle. I have not included the styles for it and it is just a core implementation.
Below is the jQuery which I am using
$(function(){
var inputString="<input type='text'>";
$('#selectBox').on('change',function(){
$('#result').html('');
for(var i = 0;i<$('#selectBox :selected').val();i++)
{
$('#result').append(inputString);
}
});
});

jQuery to iterate through table and select dropdown lists

I have what I thought would be a simple task.
A table of drop down lists, and a text box at the end of each line.
All I want to do is loop through each row of the table, get the "hours dropdown value" and multiply by the "rate dropdown value" - and place the result in the text box.
I just keep getting undefined when trying to get the dropdownlist values.
My HTML is:
<table class="hours-table">
<tr>
<th>Hours</th>
<th>Hourly Rate</th>
<th>Date Total</th>
</tr>
<tr>
<td>
<select id="HoursSelected1" name="HoursSelected" class="hours">
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
<td>
<select id="RateSelected1" name="RateSelected" class="rate">
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
<td class="date-total">
<input type="text" class="date-total" name="date-total-01" value="" />
</td>
</tr>
<tr>
<td>
<select id="HoursSelected2" name="HoursSelected" class="hours">
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
<td>
<select id="RateSelected2" name="RateSelected" class="rate">
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
<td class="date-total">
<input type="text" class="date-total" name="date-total-01" value="" />
</td>
</tr>
<tr>
<td>
<select id="HoursSelected3" name="HoursSelected" class="hours">
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
<td>
<select id="RateSelected3" name="RateSelected" class="rate">
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
<td class="date-total">
<input type="text" class="date-total" name="date-total-01" value="" />
</td>
</tr>
</table>
<p><a class="calculate" href="#" title="calculate row">Calculate</a>
</p>
My jQuery is:
$(document).ready(function () {
$('.calculate').on('click', function () {
$('.hours-table tr').each(function () {
var hours = $(this).find('select.hours').val();
var rate = $(this).find('select.rate').val();
var dateTotal = (hours * rate);
$(this).find('input.date-total').val(dateTotal);
});
return false;
});
});
Can anyone see where I've gone wrong please? There is a fiddle here: http://jsfiddle.net/Lr5pq/26/
Thank you, Mark

You have 2 problem in your code, first is neglecting the first row (the header row in the table) in your calculation, second using return false; which is deprecated and we use e.preventDefault();, instead, you can fix them like:
$('.hours-table tr').each(function () {
var hours = $(this).find('select.hours').val();
var rate = $(this).find('select.rate').val();
if (hours !== undefined && rate !== undefined) {
var dateTotal = (hours * rate);
$(this).find('input.date-total').val(dateTotal);
}
});
e.preventDefault();
BTW, if I were I would changed it like:
$(document).ready(function () {
$('.calculate').on('click', function (e) {
$('.hours-table tr').each(function () {
var hours = $(this).find('select.hours>option:checked').val();
var rate = $(this).find('select.rate>option:checked').val();
//this is for your header row
if (hours !== undefined && rate !== undefined) {
var dateTotal = (hours * rate);
$(this).find('input.date-total').val(dateTotal);
}
});
e.preventDefault();
});
});
as you see, we can use :checked instead of :selected, to select the selected option in a select node.
and it is your working jsfiddle

Try this:
$(document).ready(function () {
$('.calculate').on('click', function () {
$('.hours-table tr').each(function () {
var hours = $(this).find('select.hours > option:selected').val();
var rate = $(this).find('select.rate > option:selected').val();
var dateTotal = (hours * rate);
$(this).find('input.date-total').val(dateTotal);
});
return false;
});
});

Button no longer fires function after being used once

I have a table / tbody / row that, when a user clicks on "Add Product", I want that row to be cloned and pasted underneath the previous row. In other words, the user is adding journal entry items.
What I want, is that when they first click on the "Add Product" button, I want the row to be cloned and inserted underneath. I then want that first "Add Product" button to be disabled, however, the next button has to be enabled in order to allow yet another entry to be inserted, so on and so forth.
So far, I can get the button to clone and insert the row below, and disable the first button. However, the second button, although not disabled, no longer fires the function. It is just an "empty" button.
<table id="sales-journal">
<tbody>
<tr class="sales-journal-row">
<td class="grid-40">
<select id="sales-product-id" name="sales-product-id" required="required">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</td>
<td class="grid-20">
<input type="number" step="1" id="sales-sold-qty" name="sales-sold-qty" />
</td>
<td class="grid-20">
<input type="number" step="1" id="sales-spill-qty" name="sales-spill-qty" />
</td>
<td class="grid-20">
<button class="sales-journal-add" id="sales-journal-add" />Add Product</button>
</td>
</tr>
</tbody>
</table>
And the jquery
$('.sales-journal-add').click(function() {
var clone = $('#sales-journal > tbody:last').clone()
clone.insertAfter('#sales-journal > tbody:last');
$(this).removeAttr('id').attr('disabled', 'disabled').addClass('disabled');
});

You would need to use event delegation for the new buttons. The click events are bound initially only to the buttons that existed in DOM, but not for the ones that were cloned. SO bind the event to the container for delegation to the buttons so that it gets applied for the buttons that are created in the future when you clone your new tbody.
$('#sales-journal').on('click', '.sales-journal-add' , function() {
var clone = $('#sales-journal > tbody:last').clone()
clone.insertAfter('#sales-journal > tbody:last');
$(this).removeAttr('id').prop('disabled', true).addClass('disabled');
});
You can use .on() for jquery >=1.7 or live for older versions (deprecated).
Also as my suggestion try using prop instead of attr to set the disabled property.
Fiddle

Here, try this:
<table id="sales-journal">
<tbody>
<tr class="sales-journal-row">
<td class="grid-40">
<select id="sales-product-id" name="sales-product-id" required="required">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</td>
<td class="grid-20">
<input type="number" step="1" id="sales-sold-qty" name="sales-sold-qty" />
</td>
<td class="grid-20">
<input type="number" step="1" id="sales-spill-qty" name="sales-spill-qty" />
</td>
<td class="grid-20">
<button class="sales-journal-add" id="1" />Add Product</button>
</td>
</tr>
</tbody>
</table>
JS:
var cur_id = $(".sales-journal-add").attr('id');
var next_id = parseInt(cur_id) + 1;
$('#sales-journal').on('click',"#" +cur_id,function() {
var clone = $('#sales-journal > tbody:last').clone();
clone.insertAfter('#sales-journal > tbody:last');
$(this).attr('disabled', 'disabled').addClass('disabled');
clone.find('.sales-journal-add:last').attr('id', next_id);
cur_id = next_id;
});
$('#sales-journal').on('click',"#" +next_id,function() {
var clone = $('#sales-journal > tbody:last').clone();
clone.insertAfter('#sales-journal > tbody:last');
$(this).attr('disabled', 'disabled').addClass('disabled');
clone.find('.sales-journal-add:last').attr('id', next_id);
});
Fiddle.