Here's my HTML:
<table>
<tr>
<th>Names</th>
<th>Product Names</th>
</tr>
<tr class="data-wrapper">
<td>
<select class="form-control required chosen-select-width name" name="source_language[][0]" aria-required="true">
<option value="name1">Name 1</option>
<option value="name2">Name 2</option>
<option value="name3">Name 3</option>
<option value="name4">Name 4</option>
<option value="name5">Name 5</option>
</select>
</td>
<td><input type="text" name="product-names"></td>
</tr>
</table>
<button type="button" class="btn add-new-data"> Add </button>
Here I have used the jQuery chosen plugin for the drop down. I am cloning the row. However, after cloning the chosen select is not working. Here is my code on jsFiddle.
How can I make chosen work for the cloned elements?
You should clone first and apply chosen later so the cloned element is "chosen free".
jQuery(function($){
var clone = $("table tr.data-wrapper:first").clone(true);
$('select.name').chosen({width: "100%"});
$('body').on('click', '.add-new-data', function() {
var ParentRow = $("table tr.data-wrapper").last();
clone.clone(true).insertAfter(ParentRow);
$('tr.data-wrapper:last select').chosen();
});
});
DEMO
Related
Cloning code works it's just that the dropdown select is not being part of the cloning process.
$("input.tr_clone_add").live('click', function() {
var $tr = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find('.form-control js-example-basic-single').val('');
$tr.after($clone);
});
<table>
<tr class="tr_clone">
<td>
<input type="button" name="add" value="clone row" class="tr_clone_add" /><br><br>
<select name="animal" id="number">
<option value="cow">cow</option>
<option value="horse">horse</option>
<option value="dog">dog</option>
<option value="cat">cat</option>
</select>
<select name="vehicle" id="letter">
<option value="car">car</option>
<option value="ship">ship</option>
<option value="plane">plane</option>
</select>
<input name="remarks" type="text">
<br>
<hr>
</td>
</tr>
</table>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
What I am trying to do is, also pass the value of dropdown select of row to be cloned upon the process of cloning the row.
live is deprecated so update your jQuery library.
For your question:
First of all find and get selected option and add attribute selected to selected option.
To get events of dynamic created elements , use event delegation.
Example:
$(document).on("change", "select", function() {
var val = $(this).val();
$("option", this).removeAttr("selected").filter(function() {
return $(this).attr("value") == val;
}).first().attr("selected", "selected");
});
$('body').on('click', 'input.tr_clone_add', function() {
var $tr = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find('.form-control js-example-basic-single').val('');
$tr.after($clone);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="tr_clone">
<td>
<input type="button" name="add" value="clone row" class="tr_clone_add" /><br><br>
<select name="animal" id="number">
<option value="cow">cow</option>
<option value="horse">horse</option>
<option value="dog">dog</option>
<option value="cat">cat</option>
</select>
<select name="vehicle" id="letter">
<option value="car">car</option>
<option value="ship">ship</option>
<option value="plane">plane</option>
</select>
<input name="remarks" type="text">
<br>
<hr>
</td>
</tr>
</table>
</body>
I have a drop-down menu in the jquery append() function which adds contents to the row of a table whenever I click a button I call "AddItem".
$('#tbody').append(`<tr id="R${++rowIdx}">
<td class="row-index text-center">
<select style="resize:none" id="item-deducted">
<option id="window" value="Window">Window</option>
<option id="door" value="Door">Door</option>
</select>
</td>
<td>
<select style="resize:none; display:none;" id="shapeDeducted" selected="none" >
<option id="none" value="" selected></option>
<option id="Normal" value="Normal (LxH)">Normal (LxH)</option>
<option id="Triangular" value="Triangular">Triangular</option>
</select>
</td>
</tr>`);
I want to display option "Triangle" in the second select option whenever a user clicks or selects the option "Window" in the first select drop-down.
Use on change: $('#item-deducted').on('change').
$('#tbody').append(`<tr id="R$">
<td class="row-index text-center">
<select style="resize:none" id="item-deducted">
<option id="window" value="Window">Window</option>
<option id="door" value="Door">Door</option>
</select>
</td>
<td>
<select style="resize:none; display:none;" id="shapeDeducted" selected="none" >
<option id="none" value="" selected></option>
<option id="Normal" value="Normal (LxH)">Normal (LxH)</option>
<option id="Triangular" value="Triangular">Triangular</option>
</select>
</td>
</tr>`);
$('#item-deducted').on('change', function() {
if($(this).val() === 'Window'){
$('#shapeDeducted').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tbody"></div>
I got html as follows:
<tr>
<td><input type="text" ......></input></td>
<td><select>
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
</select>
</td>
<td><input type="text" disabled="disabled" ......></input></td>
<td><select disabled="disabled">
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
</select>
</td>
</tr>
I would like to find all td's that has textboxes and dropdowns which are not disabled. I'm tryin to do this:
var res = $.extend({}, $("#myTable").find("td> input:not(:disabled)"), $("#myTable").find("td>
select:not(:disabled)"));
Is there a better way to do this?
jQuery has a :input pseudo-selector, which encompasses all the different types of user input elements. You can use that instead of having to write separate selectors for input and select.
And you can use :enabled instead of :not(:disabled).
var res = $("mytable td > :input:enabled");
In the header of my web-page I have a drop list. The user can set a value here and then click "Set All".
<th>
<span ="MASTERAVAIL" >
<select id="CATAVAIL" class="myselect form-control" name="CATAVAIL" >
<option selected value="">Select a value</option>
<option value="Standard">Standard</option>
<option value="MTO">MTO</option>
<option value="Express">Express</option>
</select>
</span>
<a class="SetAvail" href="javascript:void(0);">Set All</a>
</th>
After clicking "Set All" all instances of the below should be set to match the above choice.
<td class="one td_left" nowrap="nowrap">
<span ="CATAVAIL" >
<select id="CATAVAIL" class="myselect form-control" name="CATAVAIL" >
<option selected value="">Select a value</option>
<option value="Standard">Standard</option>
<option value="MTO">MTO</option>
<option value="Express">Express</option>
</select>
</span>
</td>
How can I achieve this? I have a bit of code that works when I use input boxes... but not drop lists... here is that bit of code. It relates to other input boxes but it works on them. I just can't adapt it for drop lists.
<script type="text/javascript">
var $=jQuery;
$(document).ready(function() {
var myInput = $('#MASTERDATE4');
$('.SetDate4').click(function() {
$('input.CATDISCSTART').val(myInput.val());
});
});
</script>
You are using many class names wrong, interchanging them with id. What is this <span ="CATAVAIL" >? and multiple elements were also having same id which you should not do and set the value of the input on change of select not on document.ready().
$(document).ready(function() {
var myInput;
$('#CATAVAIL').change(function() {
myInput = $(this).val();
});
$('.SetAvail').click(function() {
console.log(myInput)
$('#CATAVAIL2').val(myInput);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<th>
<span>
<select id="CATAVAIL" class="myselect form-control" name="CATAVAIL" >
<option selected value="">Select a value</option>
<option value="Standard">Standard</option>
<option value="MTO">MTO</option>
<option value="Express">Express</option>
</select>
</span>
<a class="SetAvail" href="javascript:void(0);">Set All</a>
</th>
<td class="one td_left" nowrap="nowrap">
<span>
<select id="CATAVAIL2" class="myselect form-control" name="CATAVAIL" >
<option selected value="">Select a value</option>
<option value="Standard">Standard</option>
<option value="MTO">MTO</option>
<option value="Express">Express</option>
</select>
</span>
</td>
I have the following table:
<table id="tableID">
<tr id="rowID">
<td class="qCol">
<select name="select1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td class="qCo2">
<!-- img here -->
<input type="text" name="text1" id="text1" />
</td>
<td class="qCo3">
<select name="select2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td class="qCo4">
<!-- radio buttons here -->
<input type='radio' name='name' value='1'>
<input type='radio' name='name' value='2'>
<input type='radio' name='name' value='3'>
</td>
<td class="qCo5">
<select name="select3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td class="qCo6">
<!-- hidden validation image here -->
</td>
<tr>
</table>
and I have the following jQuery
$("#rowID input[type=text]").blur(function () {
if ($(this).children("input:radio").is(':checked')) {
alert("yes");
} else {
alert("no");
}
});
however regardless of whether one of the radio buttons is selected I'm still getting the alert "no". Now I know I can see the name of the radio button group but in certain situations I won't be able to due to GUIDs - what's the best method or way to work through the dom starting at the onblur event of the textbox on the same row to determin if one of the radio buttons is checked.
Your problem is because $(this) is referring to the textbox and not the rowID.
To fix do this:
$("#rowID input[type=text]").blur(function () {
var checkedRadios = $('#rowID').find('input:radio:checked');
if (checkedRadios.length > 0) {
alert("yes");
} else {
alert("no");
}
});
You're using a text box selector and binding to their blur events, and within that event handler, $(this) refers to the text box itself. Since you don't have any children of the text box, it never finds any radio buttons.
$("#rowID input[type=text]").blur(function () { //ect...
$(this) insude the function will refere to your text inputs.
you need to select type=radio.