We Keep Coding

how to clone div with event?

when I clone a div, I'd like the event "delete_row_sticker" to be cloned too but this isn't the case, I don't understand why.
html:
<div id="row_sticker_0" class="row mt-10 justify-content-around">
<div class="col-3">
<input type="text" id="width_sticker_0" name="width_sticker_0" class="form-control">
</div>
<div class="col-3">
<input value="foo" type="text" id="length_sticker_0 name="length_sticker_<?= $var?>" class="form-control">
</div>
<div class="col-3">
<input value="foo" type="text" id="quantity_stickers_0" name="quantity_stickers_0" class="form-control">
</div>
<div class="col-3">
<div id="delete_0" value="0" name="delete_0" class="hide delete_row_sticker">RAZ</div>
</div>
</div>
<div id="add_row_sticker" class="col-12">
<div><i class="fa-solid fa-plus"></i></div>
</div>
jquery to clone the div "row_sticker_0":
$(document).ready(function(){
var i = 1;
$("#add_row_sticker").click(function(){
var row_sticker_id = 'row_sticker_' + i;
$("#row_sticker_0").clone().appendTo("#sticker_added").prop('id', row_sticker_id);
$('#'+row_sticker_id +' input').each(function(value) {
value.value = "";
value.id += '_'+ i;
value.name += '_'+ i;
});
$('#'+row_sticker_id +' #delete_0').each(function(value) {
value.id = $('#'+row_sticker_id +' #delete_0').attr('id').slice(0,6);
value.id += '_'+ i;
});
i++;
});
});
jquery to delete a row:
$(document).ready(function(){
$(".delete_row_sticker").on('click', function() {
var index = $(this).attr('id');
index = index.slice(7, 8);
$('#row_sticker_' + index).remove();
});
});

JQuery - Select options are not appended on change event

I'm having trouble adding select options to a select element. I have two select elements and I want to generate the second elements options based on the first's value.
First I add elements to the first box upon loading every element
The user chooses an option in the first box and based on that the second select box gets select options to choose from
The below code is not working for me, because after selecting an option in the first select box, no options are added to the 2nd.
I'm using Bootstrap-Select jQuery plugin
Does anyone have any suggestions? :/
Thank you.
JQuery:
$(window).bind("load", function () {
var connection = {wifi: 'Wifi', ethernet: 'Ethernet'};
for (var c in connection) {
$("#connection").append('<option value="' + connection[c] + '">' + connection[c] + '</option>');
}
});
$("#connection").on('change', function () {
var wifi_devices = {smartphone: 'Smartphone', tablet: 'Tablet', notebook: 'Notebook', desktop: 'Desktop'};
var ethernet_devices = {notebook: 'Notebook', desktop: 'Desktop'};
conn_type = $('#connection').find(":selected").text();
if (conn_type == 'Ethernet') {
for (var e in ethernet_devices) {
$('#device').append('<option value="' + ethernet_devices[e] + '">' + ethernet_devices[e] + '</option>')
}
} else {
for (var w in wifi_devices) {
$('#device').append('<option value="' + wifi_devices[w] + '">' + wifi_devices[w] + '</option>')
}
}
});
HTML:
<div class="jumbotron margin-top-25 fade in" id="testinput">
<div class="row">
<!--connection type input-->
<div class="col-lg-3">
<div class="input-group">
<select class="form-control selectpicker" id="connection" data-size="5" data-live-search="true" title="Connection"></select>
</div>
</div>
<!--device type input-->
<div class="col-lg-3">
<div class="input-group">
<select class="form-control selectpicker" id="device" data-size="5" data-live-search="true" title="Device"></select>
</div>
</div>
</div>
</div>

If you don't want to have the second select options available on load, add the click event handler so if you choose your selected option from first select, second select options get added. Also remove previous options on second select on every event.
$(window).bind("load", function () {
var connection = {wifi: 'Wifi', ethernet: 'Ethernet'};
for (var c in connection) {
$("#connection").append('<option value="' + connection[c] + '">' + connection[c] + '</option>');
}
});
$("#connection").on('change click', function () {
var wifi_devices = {smartphone: 'Smartphone', tablet: 'Tablet', notebook: 'Notebook', desktop: 'Desktop'};
var ethernet_devices = {notebook: 'Notebook', desktop: 'Desktop'};
conn_type = $('#connection').find(":selected").text();
// Removing previous options
$('#device').find('option').remove();
if (conn_type == 'Ethernet') {
for (var e in ethernet_devices) {
$('#device').append('<option value="' + ethernet_devices[e] + '">' + ethernet_devices[e] + '</option>')
}
} else {
for (var w in wifi_devices) {
$('#device').append('<option value="' + wifi_devices[w] + '">' + wifi_devices[w] + '</option>')
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron margin-top-25 fade in" id="testinput">
<div class="row">
<!--connection type input-->
<div class="col-lg-3">
<div class="input-group">
<select class="form-control selectpicker" id="connection" data-size="5" data-live-search="true" title="Connection"></select>
</div>
</div>
<!--device type input-->
<div class="col-lg-3">
<div class="input-group">
<select class="form-control selectpicker" id="device" data-size="5" data-live-search="true" title="Device"></select>
</div>
</div>
</div>
</div>

On particular javascript function call HTML control's value changes to its default value

I have a form where I need such facility where user input some data in textfield and hits enter that time using jquery it should create new controls like new textfield, dropdown menu, textfield. and it works also, but it has a bug like when user input another data and hits enter that time value of previous controls, dropdown and textfield changes to its default.
Here is my code:
<script type="text/javascript">
function addMbo(value){
var div = document.getElementById('mboTable');
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
event.preventDefault();
var divName = document.getElementById('mboName');
var divState = document.getElementById('mboState');
var divProgress = document.getElementById('mboProgress');
divName.innerHTML = divName.innerHTML + "<input class=form-control type=text name=mboName value='" + value + "' id=mboNamw/>"
divState.innerHTML = divState.innerHTML + "<select class=form-control > <option value=1>In Progress </option><option <value=2>Completed</option><option value=3>Cancled</option></select>"
divProgress.innerHTML = divProgress.innerHTML + "<input class=form-control type=text name=progress id=progress />"
document.getElementById('mboNameInput').value = null;
}
}
</script>
HTML code:
<div class="col-sm-4">
<div class="row">
<div class="col-sm-5">
<b>Objectives</b>
</div>
<div class="col-sm-4">
<b>Status</b>
</div>
<div class="col-sm-3">
<b>Compl. %</b>
</div>
</div>
<div class="row">
<div id="mboTable">
<div id="mboName" class="col-sm-5"></div>
<div id="mboState" class="col-sm-4"></div>
<div id="mboProgress" class="col-sm-3"></div>
</div>
</div>
<div class="row" >
<div class="col-sm-5">
<input type="text" id="mboNameInput" class="form-control " onkeydown="addMbo(this.value)" placeholder="Your MBO...">
</div>
</div>
</div>
here is jsfiddle

When you do innerHTML on any element, it will completely destroy what ever content already there inside the elment.
Rather you should appndChild as shown below,
var divName = document.getElementById('mboName');
var mboName = document.createElement("INPUT");
mboName.setAttribute("type", "text");
mboName.setAttribute("class", "form-control");
divName.appendChild(mboName );
you can do the related changes to above code and make your things work.
See below code to add select dropdown.
var divState = document.getElementById('mboState');
var selectData = [{name:"In Progress",value:"1"},{name:"Completed",value:"2"},{name:"Cancelled",value:"3"}];
var selectList = document.createElement("select");
selectList.class = "form-control";
divState.appendChild(selectList);
for (var i = 0; i < selectData.length; i++) {
var option = document.createElement("option");
option.value = selectData[i].value;
option.text = selectData[i].name;
selectList.appendChild(option);
}

Change value of dropdown with javascript

I'm using codeigniter framework and I have some fields that I want to fill when I check a checkbox (it takes data from other fields).
The thing is I want to fill the dropdown list with the value of an other dropdown list.
Here's the javascript code that I use to fill the fields :
function FillinEmail(info) {
if (info.checked)
{
document.getElementById('adresse_fact').value = document.getElementById('adresse').value;
document.getElementById('npa_fact').value = document.getElementById('npa').value;
document.getElementById('nomprenom_fact').value = document.getElementById('nom').value + ' ' + document.getElementById('prenom').value;
}
else
{
document.getElementById('adresse_fact').value = '';
document.getElementById('npa_fact').value = '';
document.getElementById('nomprenom_fact').value = '';
}
}
And here is how I do my dropdown list with codeigniter :
<div class="form-group">
<label class="col-md-2 control-label" for="id_npa_localite">Localité</label>
<div class="col-md-4">
<?php echo form_dropdown('id_npa_localite', $id_localite, null,'class="form-control"')?>
</div>
</div>
The null value is where I can put a default value, and that's what I would change in the javascript method, but I don't know how to do that in that case, since the other elements are html elements, it was easy to do.

I would give that select an ID, and use innerHTML in your JS. Do it in this manner:
<select id="the_other">
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>
<input type="checkbox" onchange="FillinEmail(this)">
<div class="form-group">
<label class="col-md-2 control-label" for="id_npa_localite">Localité</label>
<div class="col-md-4">
<?php echo form_dropdown('id_npa_localite', $id_localite, null, 'id="ci_form" class="form-control"') ?>
</div>
</div>
<script>
function FillinEmail(info) {
document.getElementById('ci_form').innerHTML = document.getElementById('the_other').innerHTML;
/*
if (info.checked) {
document.getElementById('adresse_fact').value = document.getElementById('adresse').value;
document.getElementById('npa_fact').value = document.getElementById('npa').value;
document.getElementById('nomprenom_fact').value = document.getElementById('nom').value + ' ' + document.getElementById('prenom').value;
}
else {
document.getElementById('adresse_fact').value = '';
document.getElementById('npa_fact').value = '';
document.getElementById('nomprenom_fact').value = '';
}
*/
}
</script>

Jquery add and remove DIV tag row based on select value

I found this great stackoverflow post that does what I need: add and remove rows based on a select value, but the only difference is that in my case, I don't have a table but blocks of divs. In the table example it works fine, but with divs it fails.
I've been using the console to try to fix it to no avail. It seems there are problems with the index value and the increment, but I don't undertand why with a table row works but with divs it doesnot. Could anyone take a look?
Here's a jsfiddle that shows the issue: http://jsfiddle.net/njes3w1a/1/
This is my script:
if ($('#returnRequest').length) {
var row_i = 0;
function emptyRow() {
row_i++;
this.obj = $('<div class="return-row control-group row"></div>');
this.obj.append('<div class="col-md-6"><label class="control-label">Serial number</label><input type="text" class="form-control" value=""/></div><div class="col-md-4"><label class="control-label">Item is</label><select class="form-control"><option value="">Select</option><option value="1">New and unopened</option><option value="2">Defective</option></select></div>');
}
function refresh(new_count) {
//how many applications we have drawed now ?
console.log("New count= " + new_count);
if (new_count > 0) {
$("#noa_header").show();
} else {
$("#noa_header").hide();
}
var old_count = parseInt($('#productRowWrapper').children().length);
console.log("Old count= " + old_count);
//the difference, we need to add or remove ?
var rows_difference = parseInt(new_count) - old_count;
console.log("Rows diff= " + rows_difference);
//if we have rows to add
if (rows_difference > 0) {
console.log('enetered a');
for (var i = 0; i < rows_difference; i++)
$('#productRowWrapper').append((new emptyRow()).obj);
} else if (rows_difference < 0) //we need to remove rows ..
{
console.log('enetered b');
var index_start = old_count + rows_difference + 1;
console.log("Index start= " + index_start);
$('.return-row:gt(' + index_start + ')').remove();
console.log(row_i);
console.log(rows_difference);
row_i += rows_difference;
console.log(row_i);
}
}
$('#quantityReturn').change(function () {
refresh($(this).val());
});
}

I would use this code:
if ($('#returnRequest').length) {
function emptyRow() {
this.obj = $('<div class="return-row control-group row"></div>');
this.obj.append(
'<input type="text" class="form-control" value=""/>' +
'<select class="form-control">' +
'<option value="">Select</option>' +
'<option value="1">New and unopened</option>' +
'<option value="2">Defective</option>' +
'</select>');
}
function refresh(count) {
if (count > 0) {
$("#noa_header").show();
} else {
$("#noa_header").hide();
}
var wrapper = $('#productRowWrapper');
while (wrapper.children().length > count)
wrapper.children().last().remove();
while (wrapper.children().length < count)
wrapper.append((new emptyRow()).obj);
}
$('#quantityReturn').change(function () {
refresh(parseInt($(this).val()));
});
}
It does not introduce unnecessary variables and it a bit shorter. Updated fiddle at http://jsfiddle.net/njes3w1a/6/.

you were calculating your strt index wrong add this
var index_start =old_count- Math.abs(rows_difference)-1 ;
Code
if ($('#returnRequest').length) {
var row_i = 0;
function emptyRow() {
row_i++;
this.obj = $('<div class="return-row control-group row"></div>');
this.obj.append('<input type="text" class="form-control" value=""/><select class="form-control"><option value="">Select</option><option value="1">New and unopened</option><option value="2">Defective</option></select>');
}
function refresh(new_count) {
//how many applications we have drawed now ?
console.log("New count= " + new_count);
if (new_count > 0) {
$("#noa_header").show();
} else {
$("#noa_header").hide();
}
var old_count = parseInt($('#productRowWrapper').children().length);
console.log("Old count= " + old_count);
//the difference, we need to add or remove ?
var rows_difference = parseInt(new_count) - old_count;
console.log("Rows diff= " + rows_difference);
//if we have rows to add
if (rows_difference > 0) {
console.log('enetered a');
for (var i = 0; i < rows_difference; i++)
$('#productRowWrapper').append((new emptyRow()).obj);
} else if (rows_difference < 0) //we need to remove rows ..
{
console.log('enetered b');
var index_start =old_count- Math.abs(rows_difference)-1 ;
console.log("Index start= " + index_start);
console.log('.return-row:gt(' + index_start + ')');
$('.return-row:gt(' + index_start + ')').remove();
console.log(row_i);
console.log(rows_difference);
row_i += rows_difference;
console.log(row_i);
}
}
$('#quantityReturn').change(function () {
refresh($(this).val());
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="" id="returnRequest">
<div class="form-group row">
<p class="col-sm-3 control-label">* Quantity to return</p>
<div class="col-sm-9">
<div class="row control-group">
<div class="col-sm-6 control-item" id="signupForename">
<select class="form-control" id="quantityReturn">
<option value="0">Please select</option>
<option value="1">1 item</option>
<option value="2">2 items</option>
<option value="3">3 items</option>
<option value="4">4 items</option>
</select>
</div>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="pane-body">
<div class="form-group row">
<div class="col-sm-9">
<div id="noa_header" style="display: none;">Header</div>
<div id="productRowWrapper"></div>
</div>
</div>
</div>
</div>
</div>