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();
Related
Is there any way to find the text content of a td and then make that text the first line or option in a select drop down?
<table class="options">
<tbody>
<tr>
<td><b>Colour:</b></td>
<td>
<select>
<option selected="" value="">Select:</option>
<option value="1">Black</option>
<option value="2">White</option>
</select>
</td>
</tr>
</tbody>
</table>
The first td content (Colour:) needs to go in place of the first option (Select:), basically. I don't have full control over the select list myself so I'm having to try doing this dynamically. Trying to save on space. Ideally I'd like to remove the td as well after moving the content.
Just get the caption from the previous cell and put it to the first option. Check it out here: https://jsfiddle.net/w07vg0ef/
Try this:
// do for all selects on the page
$('select').each(function (index, element) {
// store the select
var select = $(element)
// get the caption from the previous cell
var caption = select.parent().prev('td').text()
// put the caption to the first option
select.find('option').first().html(caption)
})
$('select').prepend('<option selected=selected>'+$('select').closest('tr').find('td:nth-child(1)').text()+'</option>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="options">
<tbody>
<tr>
<td><b>Colour:</b>
</td>
<td>
<select>
<option selected="" value="">Select:</option>
<option value="1">Black</option>
<option value="2">White</option>
</select>
</td>
</tr>
</tbody>
</table>
try this
If you're looking to do it only by JavaScript then take a look at this:
Add option as the first value but as a new value:
var getColor = document.getElementsByTagName("td")[0];
var selectedColor = getColor.getElementsByTagName("b")[0].innerHTML;
var select = document.getElementsByTagName("select")[0];
var option = document.createElement("option");
option.text = selectedColor;
select.add(option, select[0]);
<table class="options">
<tbody>
<tr>
<td><b>Color:</b></td>
<td>
<select>
<option selected="" value="">Select:</option>
<option value="1">Black</option>
<option value="2">White</option>
</select>
</td>
</tr>
</tbody>
</table>
Add option as a replace value of the current first value:
var getColor = document.getElementsByTagName("td")[0];
var selectedColor = getColor.getElementsByTagName("b")[0].innerHTML;
var select = document.getElementsByTagName("select")[0];
var option = select.options[0];
option.innerHTML = selectedColor;
<table class="options">
<tbody>
<tr>
<td><b>Color:</b></td>
<td>
<select>
<option selected="" value="">Select:</option>
<option value="1">Black</option>
<option value="2">White</option>
</select>
</td>
</tr>
</tbody>
</table>
Here's a quick pure javascript solution. If possible, I would add a class to the TD so you could target it better or something like that.
var firstTD = document.getElementsByClassName('options')[0].getElementsByTagName('td')[0];
var text = firstTD.innerHTML;
var selectBox = document.getElementsByTagName('select')[0];
var option = document.createElement('option');
option.setAttribute('value', '');
option.innerHTML = text;
selectBoxFirstChild = document.getElementsByTagName('select')[0].children[0];
selectBox.insertBefore(option, selectBoxFirstChild);
I have a sequence of checkboxes and associated select lists. If the checkbox is checked I need to take the value of the corresponding select option and then change the total, but I can't seem to reference this value. Here is a simplified version of the HTML code:
<table>
<tr>
<td>
<input type="checkbox" name="checkboxCK[]" id="checkboxAR1" class="check" />
</td>
<td>
<select name="addonR[]" class="select-colour">
<option value="50">1 ($50)</option>
<option value="100">2 ($100)</option>
<option value="150">3 ($150)</option>
<option value="200">4 ($200)</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkboxCK[]" id="checkboxAR2" class="check" />
</td>
<td>
<select name="addonR[]" class="select-colour">
<option value="50">1 ($50)</option>
<option value="100">2 ($100)</option>
<option value="150">3 ($150)</option>
<option value="200">4 ($200)</option>
</select>
</td>
</tr> <tr>
<td>
<input type="checkbox" name="checkboxCK[]" id="checkboxAR3" class="check" />
</td>
<td>
<select name="addonR[]" class="select-colour">
<option value="50">1 ($50)</option>
<option value="100">2 ($100)</option>
<option value="150">3 ($150)</option>
<option value="200">4 ($200)</option>
</select>
</td>
</tr>
<table>
$<span id="theTotalAmount">150</span>
And the javascript code:
$("input.check:checkbox").click(function(){
//run through allcheckboxes that are checked and pull corresponding select option value
for (var i = 0; i < document.getElementsByName('checkboxCK[]').length; i++)
{
//get the value of the selected option
var s = document.getElementsByName('addonR['+i+']');
var theAmount = s.options[s.selectedIndex].value;
console.log(theAmount);
//check the checkbox is checked and if so add the corresponding select value
if(document.getElementsByName('checkboxCK['+i+']').checked)
{
totalCost = totalCost+document.getElementsByName('addonR['+i+']').value;
}
}
//rewrite the html for total amount
document.getElementById("theTotalAmount").innerHTML = totalCost;
});
I am struggling to reference the s variable.. It keeps being undefined. Can anyone see why?
Or is there a better way to achieve what I am trying to do?
The names of the checkboxes don't have a number between the square brackets in the HTML. You shouldn't put one there with your JavaScript.
document.getElementsByName('addonR[]') will give you an (array-like) HTML Collection of all the elements with that name.
Write
var s = document.getElementsByName('addonR[]')[i];
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>
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.
I have a form in a table with the option to duplicate a certain row (thus allowing users to add more fields as needed). The cloning works fine and the events data and handlers work fine. However when the form is submitted, the cloned form field data does not post. Below is my code for cloning the fields which works fine and solves any issue of duplicate IDs. Any suggestions/help as to why the cloned field do not submit would be absolutely appreciated.
$('#btnAddNewField').click(function() {
var currLength = $('.cloneInput').length;
var newID = new Number(currLength + 1);
var clonedField = $('#field_id' + currLength).clone(true);
clonedField[0].setAttribute('id', 'field_id' + newID);
clonedField.find(':text').each(function() {
this.setAttribute('id', this.getAttribute('id') + newID);
this.setAttribute('name', this.getAttribute('name') + newID);
});
$('#field_id' + currLength).after(clonedField);
HTML:
<tr id="field_id_1">
<td>
<table>
<tr>
<td>Pick option</td>
<td>
<select name="choice_1" id="choice_1" parent="true">
<option value="null" selected="selected">Select</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
</td>
</tr>
<tr>
<td>Pick next option</td>
<td>
<select name="next_choice_1" id="next_choice_1">
<option value="null" selected="selected">Select next</option>
</select>
</td>
</tr>
<tr>
<td>Image:</td>
<td><input type="file" name="image_1" id="image_1"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="Add New" id="btnAddNewField" />
<input type="button" value="Remove" id="btnDelField" />
</td>
</tr>
I don't see anywhere where you are changing the name property of the cloned form fields. You will need to change this in order to not have the posted data just overwritten by the additional fields.
I think you are mistaken by how post works. You should actualy create a new name for the cloned field, as that is what is used for posting the variables. Creating a new id is only nessecary to produce valid html, but has nothing to do with the actual posting.