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 clone name attribute increase

I'm looking to clone addDriverContent (working fine) and increment the numbers for the name attribute on name="description" to name="description2", name="description3" on the clones
Also if anyone know how to also clone the add button so it works as it should on the clones would be extra points :) Some fiddles would be awesome :)
<div id="addDriverContent" style="display:none;">
<div class="content">
<div class="row">
<div class="col-md-12">
<label for="description" class="form-label font-weight-bold">Item Description:</label>
<input type="text" class="form-control" id="description" name="description" placeholder="Enter the items description"/>
</div>
</div>
</div>
</div>
<button type="button" class="add_field_button" id="clone_button">Add another item</button>
<div id="clone_wrapper"></div>
<script type="text/javascript">
$(function($) {
var max_fields = 4;
// origin selector would select all the first div ancestors.
var $content = $("#addDriverContent > .content");
var $clone_wrapper = $("#clone_wrapper") ;
var $add_button = $(".add_field_button"); //Add button ID
$add_button.click(function(e) {
e.preventDefault();
var counter = 0;
// jquery object is array liked object. Length mean how many elements is selected.
if ( $clone_wrapper.children(".content").length < max_fields )
$content.clone().appendTo($clone_wrapper);
});
$clone_wrapper.on("click",".remove_field", function(e){
e.preventDefault();
// this would be more specific.
$(this).parent(".content").remove();
})
});
</script>

As I have no idea what you intend to do with it, I will provide you with my dirty solution for it:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="addDriverContent" style="display:none;">
<div class="content">
<div class="row">
<div class="col-md-12">
<label for="description" class="form-label font-weight-bold">Item Description:</label>
<input type="text" class="description form-control" id="description" name="description" placeholder="Enter the items description"/>
<input type="text" class="fname form-control" id="fname" name="fname"/>
Remove<button type="button" class="add_field_button" id="clone_button">Add another item</button>
</div>
</div>
</div>
</div>
<button type="button" class="add_field_button" id="clone_button">Add another item</button>
<div id="clone_wrapper"></div>
<script type="text/javascript">
$(function($) {
var max_fields = 4;
// origin selector would select all the first div ancestors.
var $content = $("#addDriverContent > .content");
var $clone_wrapper = $("#clone_wrapper") ;
var $add_button = $(".add_field_button"); //Add button ID
$(".add_field_button").click(function() {
//e.preventDefault();
//var counter = 0;
// jquery object is array liked object. Length mean how many elements is selected.
if ( $clone_wrapper.children(".content").length < max_fields ) {
$content.clone().appendTo($clone_wrapper);
//$add_button.clone().appendTo($clone_wrapper);// mine
$(".description").each(function(index) {
$( this ).attr('name', 'description'+index)
});
$(".fname").each(function(index) {
$( this ).attr('name', 'fname'+index)
});
}
});
$(document).on('click', "#clone_wrapper .add_field_button", function () {
$('#addDriverContent + .add_field_button').trigger('click');
})
$(document).on('click', ".remove_field", function () {
//e.preventDefault();
// this would be more specific.
$(this).closest(".content").remove();
});
});
</script>

JavaScript - Dynamic field with color adding too much fields

I created dynamic adding fields to form but I have problem with color input:
Standard inputs are added normally but input with color on first click is not adding and on next click 'Add field' is adding next fields with color to all inputs/.
Here is my code:
HTML:
<div class="form-group" id="propositionsFields">
<label class="col-md-4 control-label">Options</label>
<div class="row">
<div class="col-8">
<input class="form-control propositionField" name="proposition[]" type="text" />
</div>
<div class="col-2">
<input type="text" class="form-control jscolor {onFineChange:'updateColor(this)'}" />
<input type="hidden" class="color-picker" value="" />
</div>
<div class="col-2">
<button class="add-proposition-field propositionManage">Add field</button>
</div>
</div>
</div>
JS:
$(document).ready(function() {
var addField = $(".add-proposition-field");
var removeField = $('.remove-proposition-field');
addField.click(function(e) {
var rodzic = $('.colorInput');
e.preventDefault();
var i = $('.propositionField').size();
var color = 'FF0000';
var input = document.createElement("input");
input.className = "form-control";
input.setAttribute("value", color);
input.setAttribute("type", 'text');
var picker = new jscolor(input);
var newField = '<div class="row"><div class="col-8"><input autocomplete="off" class="form-control" name="proposition[]" type="text" placeholder="Field No."/></div><div class="col-2 colorInput"></div><div class="col-2"><button class="remove-proposition-field propositionManage">Usuń pole</button></div></div>';
i++;
rodzic.append(input);
$(" #propositionsFields ").append(newField);
});
$('body').on('click', '.remove-proposition-field', function() {
$(this).parent('div').parent('div').remove();
});
});
Demo: https://jsfiddle.net/k95detc8/

The issue if because you add the element before is exist. And the colorInput content is added to all colorInput class. I have remove your first element and add last parameter for add only in the last element
$(document).ready(function() {
var addField = $(".add-proposition-field");
var removeField = $('.remove-proposition-field');
addField.click(function(e) {
e.preventDefault();
var i = $('.propositionField').size();
var color = getRandomColor();
var input = document.createElement("input");
input.className = "form-control";
input.setAttribute("value", color);
input.setAttribute("type", 'text');
var picker = new jscolor(input);
var newField = '<div class="row"><div class="col-8"><input autocomplete="off" class="form-control" name="proposition[]" type="text" placeholder="Field No."/></div><div class="col-2 colorInput"></div><div class="col-2"><button class="remove-proposition-field propositionManage">Usuń pole</button></div></div>';
i++;
$(" #propositionsFields ").append(newField);
$('.colorInput:last').append(input);
});
$('body').on('click', '.remove-proposition-field', function() {
$(this).parent('div').parent('div').remove();
});
});
function updateColor(jscolor) {
$('.color-picker').val(jscolor);
$(this).val(jscolor);
}
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
div{
width:100% !important
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="http://beta.leonardo.pl/afrisoexpert/public/css/fluidable.css" rel="stylesheet"/>
<div class="form-group" id="propositionsFields" >
<label class="col-md-4 control-label">Options</label>
<div class="row">
<div class="col-8">
<input class="form-control propositionField" name="proposition[]" type="text" />
</div>
<div class="col-2">
<input type="text" class="form-control jscolor {onFineChange:'updateColor(this)'}" />
<input type="hidden" class="color-picker" value="" />
</div>
<!-- /.col-2 -->
<div class="col-2">
<button class="add-proposition-field propositionManage">Add field</button>
</div>
<!-- /.col-2 -->
</div>
<!-- /.row -->
</div>
<!-- /.form-group -->

create textboxes and Insert data at page loading

I would like to know how can I create textboxes and insert data at page load.
What I'm trying to do is open an array string from a database, create the textboxes and populate the textboxes at page load.
I have an array string from an ms sql database that looks something like this
test,test;bla;bla2;test44;test55;test66
I separated each individual array with ; and I would like to create textboxes and insert the values into a textbox, one-by-one, so the end result would look like this:
I don't know how to do it using the code below.
Whatever I try I mess up the add/remove functions or I end up cloning all textboxes when the plus button is clicked.
THANKS
SEE CODE BELOW OR GO TO https://jsfiddle.net/kj3cwww0
<script type='text/javascript'>//<![CDATA[
$(function() {
var clone = function(tmpl) {
return $((tmpl.clone()).html())
},
$template = $('#template_add_form'),
formArray = [ clone($template) ], // init array with first row
$formEntries = $('#entries');
$(document).on('click', '.btn-add', function() {
formArray.push(clone($template));
updateForm();
// set focus to adding row = last element in array
$(formArray).last()[0]
.find('input')
.first()
.focus();
});
// remove not working yet
$(document).on('click', '.btn-remove', function(evt) {
var id;
// iterate over formArray to find the currently clicked row
$.each(formArray, function(index, row) {
if ( row.has(evt.currentTarget).length == 1 ) {
id = index; // click target in current row
return false; // exit each loop
}
});
formArray.splice(id, 1);
updateForm();
});
var updateForm = function() {
// redraw form --> problem values are cleared!!
var lastIndex = formArray.length - 1,
name; // stores current name of input
$formEntries.empty(); // clear entries from DOM becaue we re-create them
$.each(formArray, function(index, $input) {
// update names of inputs and add index
$.each($input.find('input'), function(inputIndex, input) {
name = $(input).attr('name').replace(/\d+/g, ''); // remove ids
$(input).attr('name', name);
});
if (index < lastIndex) {
// not last element --> change button to minus
$input.find('.btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}
$formEntries.append($input);
});
};
updateForm(); // first init. of form
});
//]]>
</script>
<script id="template_add_form" type="text/template">
<div class = "entry input-group col-xs-9">
<div class = "col-xs-3">
<input class = "form-control" name="balance" type = "text"
placeholder = "Loan Balance" required = "required"/>
</div>
<div class="col-xs-3">
<input class="form-control" name="rate" type="text" placeholder="Interest Rate" required="required" />
</div>
<div class="col-xs-3">
<input class="form-control" name="payment" type="text" placeholder="Minimum Payment" required="required"/>
</div>
<span class="input-group-btn col-xs-1">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span >
</button>
</span>
</div>
</script>
<div class="container">
<div class="row">
<div class="control-group" id="fields">
<label class="control-label" for="field1">
<h3>Enter your loans below</h3>
</label>
<div class="controls">
<div class="entry input-group col-xs-3">How much extra money can you pay per month?
<input class="form-control" name="extra" type="text" placeholder="Extra/month">
</div>
<br>
<div id="entries"></div>
</div>
<div class="input-group-btn">
<div class="col-xs-5">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
<br> <small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another loan</small>
</div>
</div>
</div>
FORM SUBMIT CODE:
<body>
<form id="loanform" name="loanform" action="test5.asp" role="form" autocomplete="off" method="post">
<INPUT type="hidden" name="action" value="submit">
<div class="container">
......the rest of the existing code goes here...
</div>
</form>
</body>
CALLING IT VIA CLASSIC ASP:
if strComp(Request.Form("action"), "submit")= 0 then
Response.write("IT WORKS")
end if

Here is a solution that works :
$(function() {
var clone = function(tmpl) {
return $((tmpl.clone()).html())
},
$template = $('<div>').addClass("entry input-group col-xs-9").append(clone($('#template_add_form'))),
formArray = [ ], // init array enpty
$formEntries = $('#entries');
$(document).on('click', '.btn-add', function() {
formArray.push(clone($template));
updateForm();
// set focus to adding row = last element in array
$(formArray).last()[0]
.find('input')
.first()
.focus();
});
// remove not working yet
$(document).on('click', '.btn-remove', function(evt) {
var id;
// iterate over formArray to find the currently clicked row
$.each(formArray, function(index, row) {
if ( row.has(evt.currentTarget).length == 1 ) {
id = index; // click target in current row
return false; // exit each loop
}
});
formArray.splice(id, 1);
updateForm();
});
var addToForm = function (stringValue) {
values = stringValue.split(";");
for (var i = 0; i < values.length; i+=3) {
var newLine = clone($template);
var fields = newLine.find('.form-control');
var toAdd = Math.min(values.length-i, 3);
for (var j = 0; j < toAdd; j++) {
fields[j].value = values[i+j];
}
formArray.push(newLine);
}
}
var updateForm = function() {
// redraw form --> problem values are cleared!!
var lastIndex = formArray.length - 1,
name; // stores current name of input
$formEntries.empty(); // clear entries from DOM becaue we re-create them
$.each(formArray, function(index, $input) {
// update names of inputs and add index
$.each($input.find('input'), function(inputIndex, input) {
name = $(input).attr('name').replace(/\d+/g, ''); // remove ids
$(input).attr('name', name);
});
if (index < lastIndex) {
// not last element --> change button to minus
$input.find('.btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}
$formEntries.append($input);
});
};
addToForm("2;3;4;5;6;7");
formArray.push(clone($template));
updateForm();
$('#template_add_form').remove();
});
.entry:not(:first-of-type)
{
margin-top: 10px;
}
.glyphicon
{
font-size: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<form id="loanform" name="loanform" action="test5.asp" role="form" autocomplete="off" method="post">
<INPUT type="hidden" name="action" value="submit">
<div class="container">
<div class="row">
<div class="control-group" id="fields">
<label class="control-label" for="field1">
<h3>Enter your loans below</h3>
</label>
<div class="controls">
<div class="entry input-group col-xs-3">How much extra money can you pay per month?
<input class="form-control" name="extra" type="text" placeholder="Extra/month">
</div>
<br>
<div id="entries"></div>
</div>
<div class="input-group-btn">
<div class="col-xs-5">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
<br> <small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another loan</small>
</div>
</div>
</div>
<div id="template_add_form" type="text/template" style="display: none;">
<div class = "entry input-group col-xs-9">
<div class = "col-xs-3">
<input class = "form-control" name="balance" type = "text"
placeholder = "Loan Balance" required = "required"/>
</div>
<div class="col-xs-3">
<input class="form-control" name="rate" type="text" placeholder="Interest Rate" required="required" />
</div>
<div class="col-xs-3">
<input class="form-control" name="payment" type="text" placeholder="Minimum Payment" required="required"/>
</div>
<span class="input-group-btn col-xs-1">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span >
</button>
</span>
</div>
</div>
</form>
</body>
Here's what I changed to your code :
Changed the template which was a <script> to a <div>, and hid it by default using style="display: none;" :
<div id="template_add_form" type="text/template" style="display: none;">
Initialized array empty, so that we can put our own first line : formArray = [ ],
Created a function to add a string in the form :
var addToForm = function (stringValue) {
values = stringValue.split(";");
for (var i = 0; i < values.length; i+=3) {
var newLine = clone($template);
var fields = newLine.find('.form-control');
var toAdd = Math.min(values.length-i, 3);
for (var j = 0; j < toAdd; j++) {
fields[j].value = values[i+j];
}
formArray.push(newLine);
}
}
At the end, I added some example data, then pushed an empty line and updated the form :
addToForm("2;3;4;5;6;7");
formArray.push(clone($template));
updateForm();
EDIT : I also deleted the template div at the end so that it isn't taken into the form when you submit :
$('#template_add_form').remove();
To be able to do that, I cloned it entirely at start :
$template = $('<div>').addClass("entry input-group col-xs-9").append(clone($('#template_add_form'))),

Change href to tel: + number (user defined)

I'm trying to write a script where users can type a phone number and store it in the input (which works in this demo: http://bootsnipp.com/snippets/featured/iphone-number-pad) and then update href="" = "tel:" + that-same-value. So for example the if the user types 600 999 999 the href is updated to href="tel:600 999 999" and the user can then click the the button and make a call.
I've been beating myself up trying to figure this out. It seemed really simple because I'm not even trying to use restrict the phone number to 6-7 characters long.
Any help would be greatly appreciated.
$(document).ready(function() {
// Get number
$('.num').click(function() {
var num = $(this);
var text = $.trim(num.find('.txt').clone().children().remove().end().text());
var telNumber = $('#telNumber');
$(telNumber).val(telNumber.val() + text);
$('#call-this').href = "tel:" + $(telNumber).val(telNumber.val() + text)
console.log(text);
console.log(telNumber);
});
// add number to href
var call = $(#call - this).attr('target')
// Other stuff I've tired
// $('#call-this').click(
// $('#call-this').href="tel:" + $(telNumber).val(telNumber.val() + text)
// var call = $('#call-this');
// $('#call-this').href= "tel:" + telNumber;
// console.log(call);
// });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="tel" name="name" id="telNumber" class="form-control tel" value="" />
<div class="num">
<div class="txt">0</div>
</div>
<div class="num">
<div class="txt">1</div>
</div>
<div class="num">
<div class="txt">2</div>
</div>
<div class="num">
<div class="txt">3</div>
</div>
<div class="num">
<div class="txt">4</div>
</div>
<div class="num">
<div class="txt">5</div>
</div>
<div class="num">
<div class="txt">6</div>
</div>
<div class="num">
<div class="txt">7</div>
</div>
<div class="num">
<div class="txt">8</div>
</div>
<div class="num">
<div class="txt">9</div>
</div>
<button class="expand">
Call
</button>

Your function can actually be simplified into this — the reason is that you don't need to actually transverse all the way to the .txt element if it is the one and only child of .num and that it only contains the number of interest.
$(document).ready(function () {
$('.num').click(function () {
// Append trimmed number to current value
$(telNumber).val($(telNumber).val() + $(this).text().trim());
// Update href attribute on #call-this
$('#call-this').attr('href', 'tel:'+$(telNumber).val());
});
});
See fiddle here: http://jsfiddle.net/teddyrised/jwqL4o8w/3
In fact, a better choice would be to store the number in the HTML5 data- attribute, so you can freely change the innerHTML of the .txt element without having to worry about issues:
<div class="num" data-num="0">
<div class="txt">0</div>
</div>
Then for your JS, just use:
$(document).ready(function () {
$('.num').click(function () {
// Append trimmed number to current value
$(telNumber).val($(telNumber).val() + $(this).data('num'));
// Update href attribute on #call-this
$('#call-this').attr('href', 'tel:'+$(telNumber).val());
});
});

I think where you have
$('#call-this').href="tel:" + $(telNumber).val(telNumber.val() + text)
It should be
$('#call-this').attr("href", "tel:" + telNumber.val());
edit I just caught the double val()

I think you need this, i have simplified the solution.
$("#telNumber").on("blur", function() {
$("#call-this").prop("href", "tel:" + $(this).val());
alert($("#call-this").prop("href"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="tel" name="name" id="telNumber" class="form-control tel" value="" />
<button class="expand">
Call
</button>

If you want to link a button your HTML code should look like this:
<input type="tel" name="name" id="telNumber" class="form-control tel" value="" />
<div class="num">
<div class="txt">0</div>
</div>
<div class="num">
<div class="txt">1</div>
</div>
<div class="num">
<div class="txt">2</div>
</div>
<div class="num">
<div class="txt">3</div>
</div>
<div class="num">
<div class="txt">4</div>
</div>
<div class="num">
<div class="txt">5</div>
</div>
<div class="num">
<div class="txt">6</div>
</div>
<div class="num">
<div class="txt">7</div>
</div>
<div class="num">
<div class="txt">8</div>
</div>
<div class="num">
<div class="txt">9</div>
</div>
<form action="#">
<input type="submit" value="Call" />
</form>
and script will be:
$(document).ready(function () {
$('.txt').on('click', function () {
$("#telNumber").val($("#telNumber").val() + $(this).text());
$("form").attr('action', "tel:" + $("#telNumber").val());
});
});
JSFiddle