how to create a search feature without clicking the search button? so when entering a value then enter can immediately bring up the search results.
index.blade.php
<div class="input-group col-10">
<input type="text" class="form-control search-bar" id="search-bar" placeholder="Type to search course">
<div class="input-group-append">
<button class="btn btn-primary form-control btn-search">Search</button>
</div>
</div>
index_script.blade.php
$(".btn-search").click(function() {
$(".see-more").click();
$(".see-more").remove();
var value = $(".search-bar").val().toLowerCase();
$(".course-item").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
$(".owl-item").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
$.each($("#ajar-catalog-container .owl-stage"), function() {
var count = 0;
$.each($(this).children('.owl-item'), function() {
display = $(this).children().css('display');
if (display == 'block') {
count++;
}
});
if(count == 0) {
$(this).closest('.card').css('display', 'none');
}
else {
$(this).closest('.card').css('display', 'block');
}
});
});
please help, thank you
just manually trigger the click event of the button element.
$("#search-bar").keydown(function(e){
if (e.keyCode == 13) {
$(".btn-search").click();
}
});
Method #1
You can use the oninput event in JavaScript to get the results when entering a value to the input field.
var searchInput = document.getElementById("search-bar")
searchInput.oninput = function(){
// put your logic for search filter here
}
<div class="input-group col-10">
<input type="text" class="form-control search-bar" id="search-bar" placeholder="Type to search course">
<div class="input-group-append">
<button class="btn btn-primary form-control btn-search">Search</button>
</div>
</div>
Method #2 -
You can use jQuery's keydown() event
$("#search-bar").keydown(function(){
// your logic here
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group col-10">
<input type="text" class="form-control search-bar" id="search-bar" placeholder="Type to search course">
<div class="input-group-append">
<button class="btn btn-primary form-control btn-search">Search</button>
</div>
</div>
Related
my disable submit button if input is empty is not working. When i put an input, the submit button still not able to click, it is still disabled.
what is wrong here? btw, Im still learning..
<div class="input-group mb-2 mx-sm-2 my-sm-4">
<div class="form-outline">
<input type="search" id="" placeholder="North Borneo.." name="valueToSearch" class="form-control" />
</div>
<button type="submit" class="btn btn-primary" name="caribtn" disabled="disabled">
<i class="mdi mdi-magnify"></i>
</button>
</div>
$(function () {
$('.button[type="submit"]').keyup(function () {
var empty = false;
$('.input[type="search"]').each(function () {
if ($(this).val().length == 0) {
empty = true;
}
});
if (empty) {
$('.button[type="submit"]').attr("disabled", "disabled");
} else {
$('.input[type="search"]').removeAttr("disabled");
}
});
});
Try it.
$(function() {
var btnSubmit = $('button[type="submit"]');
btnSubmit.attr('disabled', 'disabled');
$('input[name="valueToSearch"]').on('keyup', function() {
if ($(this).val() !== '') {
btnSubmit.removeAttr('disabled');
} else {
btnSubmit.attr('disabled', 'disabled');
}
})
});
.button or .input class doesn't exist in your context.
Attach a handler to all your search inputs; and inside check if any of them are empty.
$(function() {
$('input[type="search"]').keyup(function() {
var empty = false;
$('input[type="search"]').each(function() {
if($(this).val().length === 0) {
empty = true;
}
});
if (empty) {
$('button[type="submit"]').attr('disabled', 'disabled');
} else {
$('button[type="submit"]').removeAttr('disabled');
}
});
});
.mdi-magnify::before {content: "magnify-icon";display:inline-block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group mb-2 mx-sm-2 my-sm-4">
<div class="form-outline">
<input type="search" id="" placeholder="North Borneo.." name="valueToSearch" class="form-control" />
</div>
<button type="submit" class="btn btn-primary" name="caribtn" disabled="disabled">
<i class="mdi mdi-magnify"></i>
</button>
</div>
I've managed to disable the submit button but it is not re-enabling after there is text in the input field. How can I fix this?
<form>
<div class="col-lg-10 mb-3">
<div class="input-group mycustom">
<input type="text" class="form-control rounded-0" id="validationDefaultUsername" placeholder="Enter Your Name" aria-describedby="inputGroupPrepend2" required>
<div class="input-group-prepend">
<input type="submit" id="register" value="Submit" disabled="disabled" class="btn btn-secondary btn-sm rounded-0" id="inputGroupPrepend2" />
</div>
</div>
</div>
</form>
High Scores
Jquery:
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
You have multiple id's attributes in your submit button hence why you are having trouble with your code. One id is inputGroupPrepend2 and other is register - you can not have both in input
To disable the button use .prop() method and set to true if you want to disable and false when you want to enable it.
$('#register').prop('disabled', true); //disable
I have simplified your code and is working as expected.
$(function() {
$('input[type=text]').each(function(index, element) {
$(element).keyup(function() {
if ($(this).val() == '') {
$('#register').prop('disabled', true); //disable
} else {
$('#register').prop('disabled', false); //enable
}
});
})
});
Live Working Demo:
$(function() {
$('input[type=text]').each(function(index, element) {
$(element).keyup(function() {
if ($(this).val() == '') {
$('#register').prop('disabled', true); //disable
} else {
$('#register').prop('disabled', false); //enable
}
});
})
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<form>
<div class="col-lg-10 mb-3">
<div class="input-group mycustom">
<input type="text" class="form-control rounded-0" id="validationDefaultUsername" placeholder="Enter Your Name" aria-describedby="register" required>
<div class="input-group-prepend">
<input type="submit" value="Submit" disabled="disabled" class="btn btn-secondary btn-smrounded-0" id="register" />
</div>
</div>
</div>
</form>
High Scores
The > combinator selects nodes that are direct children of the first element.
Child combinator
Your keyup wasn't firing at all as well as $('form > input').each(function() { as that did not select input at al...
(function() {
$('form * input').keyup(function() {
console.log(true);
var empty = false;
$('form * input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="col-lg-10 mb-3">
<div class="input-group mycustom">
<input type="text" class="form-control rounded-0" id="validationDefaultUsername" placeholder="Enter Your Name" aria-describedby="inputGroupPrepend2" required>
<div class="input-group-prepend">
<input type="submit" id="register" value="Submit" disabled="disabled" class="btn btn-secondary btn-sm rounded-0" id="inputGroupPrepend2" />
</div>
</div>
</div>
</form>
High Scores
(function() {
$(document).on('keyup', 'input[type=text]', function(){
var empty = false;
$('input[type=text]').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
})
})()
You could update the bottom bit of code to this.
if (empty) {
if ($('#register').is(':disabled')) {
$('#register').removeAttr('disabled');
}
else {
$('#register').attr('disabled', 'disabled');
}
};
I have already gone through questions available on this topic and have tried everything, but still my keyup function is not working.
$(document).ready(function() {
$(document).on('keyup', '.pollOption', function() {
var empty = false;
$(".pollOption").each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$("#cpsubmit").attr('disabled', 'disabled');
$("#moreop").attr('disabled', 'disabled');
} else {
$("#cpsubmit").removeAttr('disabled');
$("#moreop").removeAttr('disabled');
}
});
//Keep Track of no. of options on the page
var noOfOptions = 2;
// Function to add input fields (since I may have to delete them I've use bootstrap's input-groups, I guess this is causing issue)
$("#moreop").on('click', function() {
noOfOptions++;
$("#options").append("<div class='input-group pollOption'><input class='form-control' type='text' placeholder='New Option' name='op" + noOfOptions + "'/><span class='input-group-addon'><a href='#' id='removeOption' class='text-danger'>Remove</a></span></div>");
});
// To delete any option (only the dynamically created options can be deleted)
$("#cpform").on('click', '#removeOption', function() {
$(this).parents('.input-group').remove();
noOfOptions--;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="cpform" method="POST" action="/polls/add">
<div class="form-group">
<label>Title</label>
<input id="title" type="text" placeholder="Ask your question here..." name="title" class="form-control" />
</div>
<div id="options" class="form-group">
<label>Options</label>
<input type="text" placeholder="Option 1" name="op1" class="form-control pollOption" />
<input type="text" placeholder="Option 2" name="op2" class="form-control pollOption" />
</div>
<button id="moreop" type="button" disabled="disabled" class="btn btn-outline-info btn-primary">More Options</button><br/><br/>
<button id="cpsubmit" type="submit" disabled="disabled" class="btn btn-info btn-primary">Submit</button>
</form>
This code works perfectly for the two inputs already in the HTML part.
When I click on the "More Option" button the new field gets added but the "keyup" does not work on it. In fact, when I enter something on the new added inputs then my "More Option" & "Submit" button gets disabled (really do't know why this is happening).
You've to add the class pollOption to the input and not the div in your append :
$("#options").append("<div class='input-group'><input class='pollOption form-control' ...
_____________________________________________________________^^^^^^^^^^
Instead of :
$("#options").append("<div class='input-group pollOption'><input class='form-control' ...
______________________________________________^^^^^^^^^^
Demo:
$(document).ready(function() {
$(document).on('keyup', '.pollOption', function() {
var empty = false;
$(".pollOption").each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$("#cpsubmit").attr('disabled', 'disabled');
$("#moreop").attr('disabled', 'disabled');
} else {
$("#cpsubmit").removeAttr('disabled');
$("#moreop").removeAttr('disabled');
}
});
//Keep Track of no. of options on the page
var noOfOptions = 2;
// Function to add input fields (since I may have to delete them I've use bootstrap's input-groups, I guess this is causing issue)
$("#moreop").on('click', function() {
noOfOptions++;
$("#options").append("<div class='input-group'><input class='pollOption form-control' type='text' placeholder='New Option' name='op" + noOfOptions + "'/><span class='input-group-addon'><a href='#' id='removeOption' class='text-danger'>Remove</a></span></div>");
$(this).attr('disabled','disaled');
});
// To delete any option (only the dynamically created options can be deleted)
$("#cpform").on('click', '#removeOption', function() {
$(this).parents('.input-group').remove();
noOfOptions--;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="cpform" method="POST" action="/polls/add">
<div class="form-group">
<label>Title</label>
<input id="title" type="text" placeholder="Ask your question here..." name="title" class="form-control" />
</div>
<div id="options" class="form-group">
<label>Options</label>
<input type="text" placeholder="Option 1" name="op1" class="form-control pollOption" />
<input type="text" placeholder="Option 2" name="op2" class="form-control pollOption" />
</div>
<button id="moreop" type="button" disabled="disabled" class="btn btn-outline-info btn-primary">More Options</button><br/><br/>
<button id="cpsubmit" type="submit" disabled="disabled" class="btn btn-info btn-primary">Submit</button>
</form>
I make custom Wizard with validate but when I click Next button to First step check validation and when click next step click on next button it's not check validate and skip the step.
HTML is as given below:
<form>
<div class="form-main">
<div class="form-input">
<input type="text" id="fname" placeholder="First Name">
<p id="error"></p>
</div>
<div class="form-input">
<input type="text" id="lname" placeholder="Last Name">
<p id="error"></p>
</div>
<div class="form-input">
<input type="email" id="email" placeholder="Email">
<p id="error"></p>
</div>
<div class="form-input">
<input type="password" id="password" placeholder="Password">
<p id="error"></p>
</div>
<div class="form-btn">
<button type="button" id="prev" onClick="prevBtn(this);">prev</button>
<button type="button" id="next" onClick="nextBtn(this);">next</button>
<button type="submit" id="submit">submit</button>
</div>
</div>
</form>
Script Below:
separated function used update status means find index and update ,validation,next button and previous button.
$(window).on('load',function(){
$('.form-main > .form-input:nth-child(1)').addClass('open');
$('.form-main > .form-input:not(".open")').addClass('close').hide();
});
var $div = $('.form-input');
var submits = $('#submit').css('display','none');
index = 0;
function updateStatus(a){
$div.eq(index).removeClass('current').addClass('close').hide();
index += a;
$div.eq(index).addClass('current').removeClass('close').show();
$('#next').toggle((index !==$div.length-1));
$('#prev').toggle(index !== 0);
if(index == ($div.length - 1)){
submits.toggle(index !== 0);
}else{
submits.hide();
}
}
var input = document.getElementsByTagName('input');
var error = document.getElementById('error');
function validation(){
var inputValue = $(input).val();
var inputType = $(input).attr('type');
if(inputValue !== ''){
updateStatus(+1);
}else{
error.innerHTML = "please enter the value";
}
}
function nextBtn(){
validation();
}
function prevBtn(){
updateStatus(-1);
}
So I have made few changes and got it to work.
Changed
var inputValue = $(input).val();
to below, as you need to check for current visible element
var inputValue = $('input:visible').val();
Secondly, you cannot have error as same ID for multiple elements, so I have removed that. IDs are unique.
$(window).on('load', function() {
$('.form-main > .form-input:nth-child(1)').addClass('open');
$('.form-main > .form-input:not(".open")').addClass('close').hide();
});
var $div = $('.form-input');
var submits = $('#submit').css('display', 'none');
index = 0;
function updateStatus(a) {
$div.eq(index).removeClass('current').addClass('close').hide();
index += a;
$div.eq(index).addClass('current').removeClass('close').show();
$('#next').toggle((index !== $div.length - 1));
$('#prev').toggle(index !== 0);
if (index == ($div.length - 1)) {
submits.toggle(index !== 0);
} else {
submits.hide();
}
}
var input = document.getElementsByTagName('input');
function validation() {
var inputValue = $('input:visible').val();
var inputType = $(input).attr('type');
if (inputValue !== '') {
updateStatus(+1);
} else {
$('input:visible').next().html("please enter the value");
}
}
function nextBtn() {
validation();
}
function prevBtn() {
updateStatus(-1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="form-main">
<div class="form-input">
<input type="text" id="fname" placeholder="First Name">
<p></p>
</div>
<div class="form-input">
<input type="text" id="lname" placeholder="Last Name">
<p></p>
</div>
<div class="form-input">
<input type="email" id="email" placeholder="Email">
<p></p>
</div>
<div class="form-input">
<input type="password" id="password" placeholder="Password">
<p></p>
</div>
<div class="form-btn">
<button type="button" id="prev" onClick="prevBtn(this);">prev</button>
<button type="button" id="next" onClick="nextBtn(this);">next</button>
<button type="submit" id="submit">submit</button>
</div>
</div>
</form>
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'))),