In a form I have 2 inputs. In the 1st input I use a datalist which I load it through JSON and the 2nd input is autocomplete it when the 1st input is changed.
Till here all works!
Then I added an add button where I add the same lines. The problem is that because I use id to select the input, when I add the new line I have the same id.. So the autocomplete doesn't work..
How can I solve this? Here the jssFiddle.
counter = 0;
var dataList = document.getElementById('products');
var jsonOptions = [{
"product": "11111",
"description": "description 1"
}, {
"product": "22222",
"description": "description 2"
}, {
"product": "33333",
"description": "description 3"
}];
jsonOptions.forEach(function(item) {
var option = document.createElement('option');
option.value = item.product;
option.text = item.description;
dataList.appendChild(option);
$(function() {
$('#product').on('change keyup', function() {
var i = this.value;
var description = "";
var productsInBox = 0;
jsonOptions.forEach(function(a) {
if (a.product == i) {
description = a.description;
productsInBox = a.productsInBox;
}
});
$('#description').val(description);
});
});
});
$('#form1')
// Add button click handler
.on('click', '.addButtonDED', function() {
counter++;
var $template = $('#addLineInDed'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-index', counter)
.insertBefore($template);
// Update the name attributes
$clone
.find('[name="product"]').attr('name', 'product-' + counter).end()
.find('[name="description"]').attr('name', 'description-' + counter).end()
})
// Remove button click handler
.on('click', '.removeButtonDED', function() {
var $row = $(this).parents('.form-group'),
index = $row.attr('data-index');
counter--;
// Remove element containing the fields
$row.remove();
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<div class="col-xs-2">
<input type="text" id="product" list="products" class="form-control" name="product-0" />
<datalist id="products"></datalist>
</div>
<div class="col-xs-4">
<input id="description" type="text" class="form-control" name="description-0" />
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default addButtonDED"><i class="fa fa-plus"></i></button>
</div>
</div>
<div id="addLineInDed" class="form-group hide">
<div class="form-group">
<div class="col-xs-2">
<input type="text" id="product" list="products" class="form-control" name="product-0" />
<datalist id="products"></datalist>
</div>
<div class="col-xs-4">
<input id="description" type="text" class="form-control" name="description-0" />
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default removeButtonDED"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
<div class="col-md-10 ">
<button type="submit" name="formAction" value="next" class="btn btn-primary">Submit</button>
</div>
</fieldset>
</form>
Use classes, rename your selecs to array values:
counter = 0;
var dataList = $('.products');
var jsonOptions = [{
"product": "11111",
"description": "description 1"
}, {
"product": "22222",
"description": "description 2"
}, {
"product": "33333",
"description": "description 3"
}];
jsonOptions.forEach(function(item) {
var option = '<option value="' + item.product + '">' + item.description + '</option>';
dataList.append(option);
});
$(function() {
$('body').on('input', '.product,.products', function() {
var i = this.value;
var description = "";
var productsInBox = 0;
jsonOptions.forEach(function(a) {
if (a.product == i) {
description = a.description;
productsInBox = a.productsInBox;
}
});
$(this).closest('.form-group').find('.description').val(description);
});
});
$('#form1').on('click', '.addButtonDED', function() {
var $template = $('.form-group:last').clone(true, true).find('input').val('').end()
.find('.addButtonDED').removeClass('addButtonDED').addClass('removeButtonDED').end()
.find('i').removeClass('fa-plus').addClass('fa-minus').end();
$template.insertAfter('.form-group:last');
})
// Remove button click handler
.on('click', '.removeButtonDED', function() {
var $row = $(this).closest('.form-group');
$row.remove();
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<div class="col-md-2">
<input type="text" list="products" class="form-control product" name="product[]" />
<datalist id="products" class="products"></datalist>
</div>
<div class="col-md-4">
<input id="" type="text" class="form-control description" name=" description[]" />
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default addButtonDED"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="col-md-10 ">
<button type="submit" name="formAction" value="next" class="btn btn-primary">sUBMIT</button>
</div>
</fieldset>
</form>
</fieldset>
</form>
to read the values do a loop:
foreach($_POST['product'] as $product) {
//do stuf
}
Seeing as you said you've tried to use classes,
How about encapsulating your code so that you'll have a function like so:
function FilldatalistOptions(element,options)
You can then have the 2 datalists with different id's (products1 and products2 perhaps).
And just call the function like so:
var dataList1 = document.getElementById('products1');
var dataList2 = document.getElementById('products2');
FilldatalistOptions(datalist1, jsonOptions);
FilldatalistOptions(datalist2, jsonOptions);
Related
I am trying to make HTML form with javascript but I could not make one part.
If a visitor selects from the dropdown menu "Service 1", the price will be multiplied with 1,5. If he selects "Service 2", the price multiplied with 2 and then with "adet" input value. I want to make multiplier values in script part like this;
var service_prices = new Array();
service_prices["service1"]=1.5;
service_prices["service2"]=2;
I need this calculation Paket(Dropdown)*Adet(Input) Could you help me?
These are my HTML codes;
<script>
$(function(){
//Adet
var val = $('#adet').val();
output = $('#output');
output.html(val);
$('#adet').on('change', function () {
output.html(this.value);
});
$('#Paket').change(function () {
if (this.value == "80") {
$('#adet').prop({
'min': 20,
});
}
if (this.value == "81") {
$('#adet').prop({
'min': 100,
});
}
$('#adet').val();
output.html('');
});
});
</script>
<form method="post" action="process.php"></br>
<label class="control-label col-sm-3" for="inputSuccess3">Paket</label>
<div class="col-sm-9">
<select class="form-control" id="Paket" name="paket">
<option value="80">Service 1 x1.5</option>
<option value="81">Service 2 x2</option>
</select>
</div>
<br>
<label class="control-label col-sm-3" for="inputSuccess3">Adet</label>
<div class="col-sm-9">
<input class="form-control" type="number" id="adet" name="adet" min="20" max="250" value="10" required>
</div>
<label class="control-label col-sm-3" for="inputSuccess3">Link</label>
<div class="col-sm-9">
<input class="form-control" type="text" name="link" required>
</div>
<div class="col-sm-offset-4 col-sm-8">
Fee: <span id="output"></span> Credi
</div>
<div class="col-sm-offset-4 col-sm-8">
<button type="submit" class="btn btn-primary">Order</button>
</div>
</form>
You can store the values in an array like this:
var service_prices = [{
"name": "Service 1",
"value": 80,
"multiplier": 1.5
}, {
"name": "Service 2",
"value": 81,
"multiplier": 2
}
];
You can store the multiplier value in a data-attribute in every option of the Paket dropdown.
See this example:
(function() {
var service_prices = [{
"name": "Service 1",
"value": 80,
"multiplier": 1.5
}, {
"name": "Service 2",
"value": 81,
"multiplier": 2
}];
var Paket = document.getElementById("Paket");
var adet = document.getElementById("adet");
var output = document.getElementById("output");
adet.onchange = function() {
output.innerHTML = adet.value;
if (Paket.value.length > 0) {
var multiplier = Paket.options[Paket.selectedIndex].getAttribute("data-multiplier") * 1;
output.innerHTML = adet.value * (Paket.value * 1) * multiplier;
} else {
output.innerHTML = "";
}
};
Paket.onchange = function() {
if (this.value.length > 0) {
var multiplier = this.options[this.selectedIndex].getAttribute("data-multiplier") * 1;
if (this.value === "80") {
adet.setAttribute("min", "20");
}
if (this.value === "81") {
adet.setAttribute("min", "100");
}
adet.value = 10;
output.innerHTML = adet.value * (this.value * 1) * multiplier;
} else {
output.innerHTML = "";
}
};
function fillServices(data) {
var html = "", i, len = data.length, obj;
html += "<option value=\"\">[SELECT]</option>";
for (i = 0; i < len; i++) {
obj = data[i];
html += "<option data-multiplier=\"";
html += obj.multiplier;
html += "\" value=\"";
html += obj.value;
html += "\">";
html += obj.name;
html += "</option>";
}
return html;
}
Paket.innerHTML = fillServices(service_prices);
})();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<form method="post" action="process.php">
<label class="control-label col-sm-3" for="inputSuccess3">Paket</label>
<div class="col-sm-9">
<select class="form-control" id="Paket" name="paket">
</select>
</div>
<br>
<label class="control-label col-sm-3" for="inputSuccess3">Adet</label>
<div class="col-sm-9">
<input class="form-control" type="number" id="adet" name="adet" min="20" max="250" value="10" required>
</div>
<label class="control-label col-sm-3" for="inputSuccess3">Link</label>
<div class="col-sm-9">
<input class="form-control" type="text" name="link" required>
</div>
<div class="col-sm-offset-4 col-sm-8">
Fee: <span id="output"></span> Credi
</div>
<div class="col-sm-offset-4 col-sm-8">
<button type="submit" class="btn btn-primary">Order</button>
</div>
</form>
In a form there is an add button which adds form inputs. At the new form inputs I tried to increment the attribute name e.g name="description-1", name="description-2" etc. However, all the new inputs have the same name="description-1". What I miss?
var dataList = $('.products');
var jsonOptions = [{
"product": "11111",
"description": "description 1"
}, {
"product": "22222",
"description": "description 2"
}, {
"product": "33333",
"description": "description 3"
}];
jsonOptions.forEach(function(item) {
var option = '<option value="' + item.product + '">' + item.description + '</option>';
dataList.append(option);
});
$(function() {
$('body').on('input', '.product,.products', function() {
var i = this.value;
var description = "";
var productsInBox = 0;
jsonOptions.forEach(function(a) {
if (a.product == i) {
description = a.description;
}
});
$(this).closest('.form-group').find('.description').val(description);
});
});
counter = 0;
$('#form1').on('click', '.addButtonDED', function() {
counter++;
var $template = $('.form-group:last').clone(true, true).find('input').val('').end()
.find('.addButtonDED').removeClass('addButtonDED').addClass('removeButtonDED').end()
.find('[name="description-0"]').attr('name', 'description-' + counter).end()
.find('i').removeClass('fa-plus').addClass('fa-minus').end();
$template.insertAfter('.form-group:last');
})
// Remove button click handler
.on('click', '.removeButtonDED', function() {
counter--;
var $row = $(this).closest('.form-group');
$row.remove();
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<div class="col-xs-2">
<input type="text" list="products" class="form-control product" name="product" />
<datalist id="products" class="products"></datalist>
</div>
<div class="col-xs-4">
<input id="" type="text" class="form-control description" name="description-0" />
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default addButtonDED"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="col-xs-10 ">
<button type="submit" name="formAction" value="next" class="btn btn-primary">sUBMIT</button>
</div>
</fieldset>
</form>
You are accesing always to '[name="description-0"]' so when you change their name to description-1, that selector won't select them anymore.
You should select them with this selector '[name^="description-"]'.
The ^= operator means to select every element that starts with the stated value, so it will select all your description-0, description-1 and description-whatever.
You can read more here: https://www.w3schools.com/jquery/sel_attribute_beginning_value.asp
You can fix it by simple change [name="description-0"] to [name="description-'+ (counter-1) +'"]
The problem is that you close the previous object, and then the decription-0 will not be 0 anymore after the first object.
var dataList = $('.products');
var jsonOptions = [{
"product": "11111",
"description": "description 1"
}, {
"product": "22222",
"description": "description 2"
}, {
"product": "33333",
"description": "description 3"
}];
jsonOptions.forEach(function(item) {
var option = '<option value="' + item.product + '">' + item.description + '</option>';
dataList.append(option);
});
$(function() {
$('body').on('input', '.product,.products', function() {
var i = this.value;
var description = "";
var productsInBox = 0;
jsonOptions.forEach(function(a) {
if (a.product == i) {
description = a.description;
}
});
$(this).closest('.form-group').find('.description').val(description);
});
});
counter = 0;
$('#form1').on('click', '.addButtonDED', function() {
counter++;
var $template = $('.form-group:last').clone(true, true).find('input').val('').end()
.find('.addButtonDED').removeClass('addButtonDED').addClass('removeButtonDED').end()
.find('[name="description-'+ (counter-1) +'"]').attr('name', 'description-' + counter).end()
.find('i').removeClass('fa-plus').addClass('fa-minus').end();
$template.insertAfter('.form-group:last');
})
// Remove button click handler
.on('click', '.removeButtonDED', function() {
counter--;
var $row = $(this).closest('.form-group');
$row.remove();
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<div class="col-xs-2">
<input type="text" list="products" class="form-control product" name="product" />
<datalist id="products" class="products"></datalist>
</div>
<div class="col-xs-4">
<input id="" type="text" class="form-control description" name="description-0" />
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default addButtonDED"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="col-xs-10 ">
<button type="submit" name="formAction" value="next" class="btn btn-primary">sUBMIT</button>
</div>
</fieldset>
</form>
Your actual issue is var $template = $('.form-group:last').clone(true, true) , specifically the :last bit which means that its going to grab the one on the bottom of the group therefore .find('[name="description-0"]') only matches the first time. After that, the element would have name="description-1" and that call wont find it.
Instead, always grab the first element:
var $template = $('.form-group').eq(0).clone(true, true)
Working jsFiddle
However,
Why are you incrementing your name attributes at all?
Are you sending this data to some server side processing like php? if so, why not use the array syntax like:
<input id="" type="text" class="form-control description" name="description[]" />
See HTML Element Array, name="something[]" or name="something"?
You can use .find('.description').attr('name', 'description-' + counter).end()
Fiddle link
$('#form1').on('click', '.addButtonDED', function() {
counter++;
var $template = $('.form-group:last').clone(true, true).find('input').val('').end()
.find('.addButtonDED').removeClass('addButtonDED').addClass('removeButtonDED').end()
.find('.description').attr('name', 'description-' + counter).end()
.find('i').removeClass('fa-plus').addClass('fa-minus').end();
$template.insertAfter('.form-group:last');
alert(counter)
})
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 -->
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'))),
I coded this, but the remove button doesn't work. And I don't have any error in console..
var counter = 0;
var dataList = document.getElementById('materials');
var jsonOptions = [{
"product": "11111",
"description": "description 1"
}, {
"product": "22222",
"description": "description 2"
}, {
"product": "33333",
"description": "description 3"
}, {
"product": "44444",
"description": "description 4"
}, {
"product": "55555",
"description": "description 5"
}];
jsonOptions.forEach(function(item) {
var option = document.createElement('option');
option.value = item.description;
option.text = item.description;
option.setAttribute('data-product', item.product);
dataList.appendChild(option);
});
$('#bookForm')
// Add button click handler
.on('change', 'input[id^="ajax"]', function() {
var description = $(this).val();
var product = $('#dataList > option[value="' + description + '"]').data('product');
$('input[name=product-'+ $(this).attr("name").replace("description-", "") + ']').val(product);
});
$('#bookForm')
// Add button click handler
.on('click', '.addButton', function() {
counter++;
var $template = $('#bookTemplate'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-book-index', counter)
.insertBefore($template);
// Update the name attributes
$clone
.find('[name="description"]').attr('name', 'description-' + counter).end()
.find('[name="product"]').attr('name', 'product-' + counter).end();
})
// Remove button click handler
.on('click', '.removeButton', function() {
var $row = $(this).parents('.form-group'),
index = $row.attr('data-book-index');
// Remove element containing the fields
$row.remove();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div id="bookForm" class="form-group">
<label for="inputName" class="col-md-2 col-sm-2 control-label">Υλικό / Ποσότητα</label>
<div class="col-md-3 col-sm-3">
<input type="text" id="ajax2" list="materials" class="form-control" placeholder="Υλικό" name="description-0">
<datalist id="materials"></datalist>
</div>
<div class="col-md-3 col-sm-3">
<input type="number" class="form-control" name="product-0" placeholder="Ποσότητα" required="">
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
</div>
</div>
<div id="bookTemplate" class="form-group hide">
<div class="col-md-3 col-sm-3 col-md-offset-2 col-sm-offset-2">
<input type="text" id="ajax2" list="materials" class="form-control" placeholder="Υλικό" name="description">
<datalist id="materials"></datalist>
</div>
<div class="col-md-3 col-sm-3">
<input type="number" class="form-control" name="product" placeholder="Ποσότητα" required="">
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
the probelm is that you what to select .removeButton class inside #bookForm, but in reality the .removeButton is out side of #bookForm
jsFiddle
$('#bookForm')
// Add button click handler
.on('click', '.addButton', function() {
counter++;
var $template = $('#bookTemplate'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-book-index', counter)
.insertBefore($template);
// Update the name attributes
$clone
.find('[name="description"]').attr('name', 'description-' + counter).end()
.find('[name="product"]').attr('name', 'product-' + counter).end();
});
// Remove button click handler
$("#bookForm").parent().on('click', '.removeButton', function() {
var $row = $(this).parents('.form-group'),
index = $row.attr('data-book-index');
// Remove element containing the fields
$row.remove();
});
You need to define a listener for all removeButton;
function removeButtonListener(){
$('.removeButton').on('click', function() {
var $row = $(this).parents('.form-group'),
index = $row.attr('data-book-index');
// Remove element containing the fields
$row.remove();
});
}
And you need to call it when you add new row;
$('#bookForm').on('click', '.addButton', function() {
counter++;
var $template = $('#bookTemplate'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-book-index', counter)
.insertBefore($template);
// Update the name attributes
$clone
.find('[name="description"]').attr('name', 'description-' + counter).end()
.find('[name="product"]').attr('name', 'product-' + counter).end();
removeButtonListener(); //call remove listener
});
var counter = 0;
var dataList = document.getElementById('materials');
var jsonOptions = [{
"product": "11111",
"description": "description 1"
}, {
"product": "22222",
"description": "description 2"
}, {
"product": "33333",
"description": "description 3"
}, {
"product": "44444",
"description": "description 4"
}, {
"product": "55555",
"description": "description 5"
}];
jsonOptions.forEach(function(item) {
var option = document.createElement('option');
option.value = item.description;
option.text = item.description;
option.setAttribute('data-product', item.product);
dataList.appendChild(option);
});
$('#bookForm')
// Add button click handler
.on('change', 'input[id^="ajax"]', function() {
var description = $(this).val();
var product = $('#dataList > option[value="' + description + '"]').data('product');
$('input[name=product-'+ $(this).attr("name").replace("description-", "") + ']').val(product);
});
$('#bookForm')
// Add button click handler
.on('click', '.addButton', function() {
counter++;
var $template = $('#bookTemplate'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-book-index', counter)
.insertBefore($template);
// Update the name attributes
$clone
.find('[name="description"]').attr('name', 'description-' + counter).end()
.find('[name="product"]').attr('name', 'product-' + counter).end();
});
$(document).on('click', '.removeButton', function() {
var $row = $(this).parents('.form-group'),
index = $row.attr('data-book-index');
// Remove element containing the fields
$row.remove();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div id="bookForm" class="form-group">
<label for="inputName" class="col-md-2 col-sm-2 control-label">Υλικό / Ποσότητα</label>
<div class="col-md-3 col-sm-3">
<input type="text" id="ajax2" list="materials" class="form-control" placeholder="Υλικό" name="description-0">
<datalist id="materials"></datalist>
</div>
<div class="col-md-3 col-sm-3">
<input type="number" class="form-control" name="product-0" placeholder="Ποσότητα" required="">
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
</div>
</div>
<div id="bookTemplate" class="form-group hide">
<div class="col-md-3 col-sm-3 col-md-offset-2 col-sm-offset-2">
<input type="text" id="ajax2" list="materials" class="form-control" placeholder="Υλικό" name="description">
<datalist id="materials"></datalist>
</div>
<div class="col-md-3 col-sm-3">
<input type="number" class="form-control" name="product" placeholder="Ποσότητα" required="">
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>