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>
Related
cannot incorporate my cloning code with select2 jquery. upon submission of form the data from dropdown select is being passed to database. but when i added the select2 jquery in my dropdown select it does not pass the data into my database anymore.
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.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" class="select2">
<option value="cow">cow</option>
<option value="horse">horse</option>
<option value="dog">dog</option>
<option value="cat">cat</option>
</select>
<select name="vehicle" class="select2">
<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>
<script>
$(document).ready(function() {
$('.select2').select2();
});
</script>
<script>
$(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>
What i wanted to happen is upon submission of form all data will be submitted.
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 have a button that i wish to clone in jquery so that i can have two of them, using both buttons to do the same task however when i run this code only one of the buttons actually works and the other does not.
I have looked it up trying to use true as a parameter and it still doesnt work
any help would be much appreciated
jQuery(function($) {
var $button = $('#addEvent'),
$row = $('.newEvent').clone();
$button.click(function() {
$row.clone().insertBefore($button);
});
});
jQuery(function($) {
var $button = $('#newPupil'),
$row = $('.newParticipant').clone();
$button.click(function() {
$row.clone().insertBefore($button);
});
});
<form>
<div class="newEvent">
<fieldset id="ResultSheet">
<legend>Add Event</legend>
Event: <br>
<select name="Events" id="Events">
<option disabled selected value> --SELECT AN OPTION BELOW-- </option>
<option value="100 Metres">100 Metres</option>
<option value="200 Metres">200 Metres</option>
<option value="300 Metres">300 Metres</option>
<option value="400 Metres">400 Metres</option>
<option value="800 Metres">800 Metres</option>
<option value="1500 Metres">1500 Metres</option>
<option value="400 Metres">400 Metres</option>
<option value="Hurdels">Hurdels</option>
<option value="Shot Put">Shot Put</option>
<option value="Discus">Discus</option>
<option value="Javelin">Javelin</option>
<option value="Long Jump">Long Jump</option>
<option value="High Jump">High Jump</option>
<option value="Triple Jump">Triple Jump</option>
<option value="4x100 Metres Relay">4x100 Metres relay</option>
</select>
<div class="newParticipant">
<br> First name: <input type="text" name="fisrtName"> Last Name: <input type="text" name="lastName">
</div>
<input type="button" id="newPupil" name="newPupil" value="New participant">
</fieldset>
</div>
</form>
<input type="button" id="addEvent" name="addEvent" value="Add Event" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Attribute id must be unique in a document, use class instead. To attach dynamically created element use on().
Try the following way:
jQuery(function($){
var $button1 = $('#addEvent'),
$row1 = $('.newEvent').clone();
$button1.click(function(){
$row1.clone().insertBefore($button1);
});
var $row2 = $('.newParticipant').clone();
$('body').on('click', '.newPupil', function(){
$row2.clone().insertBefore(this);
});
});
<div class="newEvent">
<fieldset id="ResultSheet">
<legend>Add Event</legend>
Event: <br>
<select name="Events" id="Events">
<option disabled selected value> --SELECT AN OPTION BELOW-- </option>
<option value="100 Metres">100 Metres</option>
<option value="200 Metres">200 Metres</option>
<option value="300 Metres">300 Metres</option>
<option value="400 Metres">400 Metres</option>
<option value="800 Metres">800 Metres</option>
<option value="1500 Metres">1500 Metres</option>
<option value="400 Metres">400 Metres</option>
<option value="Hurdels">Hurdels</option>
<option value="Shot Put">Shot Put</option>
<option value="Discus">Discus</option>
<option value="Javelin">Javelin</option>
<option value="Long Jump">Long Jump</option>
<option value="High Jump">High Jump</option>
<option value="Triple Jump">Triple Jump</option>
<option value="4x100 Metres Relay">4x100 Metres relay</option>
</select>
<div class="newParticipant">
<br>
First name: <input type="text" name="fisrtName">
Last Name: <input type="text" name="lastName">
</div>
<input type="button" class="newPupil" name="newPupil" value="New participant">
</fieldset>
</div>
<input type="button" id="addEvent" name="addEvent" value="Add Event" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<button value="Refresh Page" onClick="refreshPage()">REFRESH</button>
<script src="newButtons.js"></script>
So I'm trying to build a quickbuy of products with different variants in my list of products. The product has a set of avaialble options, that are collected from the select option with jQuery, passed to a input field and then submitted to the cart. The products are listed out by a loop. When I'm at the single product page it works fine, since all the option values are required.
But once in the list of products, it gets the options from all the products and passes them to all the submit fields. How can I scope a jquery function to work on only one product at a time
In the example below, I want the field to have only the values from the select options relevant to the product. Not th evalues from both product options.
$(document).ready(function() {
$(".variant-selected")
.change(function() {
var str = "";
$("select option:selected").each(function() {
str += $(this).val() + ".";
});
$("input[name='variant']").val(str.slice(0, -1));
})
.trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prod1">
<h2>
Shirt
</h2>
<select class="variant-selected" name="select1">
<option value="1" selected>Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<select class="variant-selected" name="select2">
<option value="A" selected>Large</option>
<option value="B">Medium</option>
<option value="C">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
<div id="prod2">
<h2>Jeans
</h2>
<select class="variant-selected" name="select1">
<option value="4" selected>Orange</option>
<option value="5">Teal</option>
<option value="6">Forest</option>
</select>
<select class="variant-selected" name="select2">
<option value="D" selected>Large</option>
<option value="E">Medium</option>
<option value="F">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
here you have
$(document).ready(function() {
$(".variant-selected")
.change(function() {
var str = "";
$(this).parent().find("select option:selected").each(function() {
str += $(this).val() + ".";
});
$(this).parent().find("input[name='variant']").val(str.slice(0, -1));
})
.trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prod1">
<h2>
Shirt
</h2>
<select class="variant-selected" name="select1">
<option value="1" selected>Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<select class="variant-selected" name="select2">
<option value="A" selected>Large</option>
<option value="B">Medium</option>
<option value="C">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
<div id="prod2">
<h2>Jeans
</h2>
<select class="variant-selected" name="select1">
<option value="4" selected>Orange</option>
<option value="5">Teal</option>
<option value="6">Forest</option>
</select>
<select class="variant-selected" name="select2">
<option value="D" selected>Large</option>
<option value="E">Medium</option>
<option value="F">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
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