Append jquery textarea ckeditor not workingg - javascript

This is my code. In this ckeditor function not applied to append data. I am using cdn link for ckeditor in header.php file. So how can I apply.
<script>
$(document).ready(function(){
var i = 1;
$('#add').click(function()
{
$.getScript("ckeditor.js");
i++;
$('#dynamic_fields').append('<tr id="row'+i+'"><td><label class="col-md-3 control-label">Title</label><input type="text" name="title[]" id="title" placeholder="Enter Name" class="form-control name_list"><label class="col-md-3 control-label">Description</label><textarea class="ckeditor form-control" name="desc[]" id="desc" rows="6" style="width:50%;" value=""></textarea><input type="hidden" name="imageid" value=""> <label class="col-md-3 control-label">Product Image</label><div class="form-group"><input type="file" class="form-control" name="userfile[]" multiple="multiple"></div></td><td><button name="remove" id="'+i+'" class="btn btn-danger btn-remove" >X</button></td></tr>');
});
$(document).on('click', '.btn-remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
});
</script>

It seems to be working. I have changed the place of your i++ to after the append and used the CDN for that js code and appended a counter to you ID because you can only have. I have tried this on my local machine and works without any errors. I am guessing this is what you wanted to do.
var i = 1;
$('#add').click(function() {
$('#dynamic_fields').append('<tr id="row' + i + '"><td><label class="col-md-3 control-label">Title</label><input type="text" name="title[]" id="title" placeholder="Enter Name" class="form-control name_list"><label class="col-md-3 control-label">Description</label><textarea class="ckeditor form-control" name="desc'+i+'" id="desc'+i+'" rows="6" style="width:50%;" value=""></textarea><input type="hidden" name="imageid" value=""> <label class="col-md-3 control-label">Product Image</label><div class="form-group"><input type="file" class="form-control" name="userfile[]" multiple="multiple"></div></td><td><button name="remove" id="' + i + '" class="btn btn-danger btn-remove" >X</button></td></tr>');
CKEDITOR.replace('desc'+i);
i++;
});
$(document).on('click', '.btn-remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/4.7.2/basic/ckeditor.js"></script>
<button id="add">ADD</button>
<div id="dynamic_fields"></div>

Related

proplem in jquery when creating inputs cannot create a limit for the created elements

I am trying to create inputs with jquery when user click on specific button as i create the inputs i want them to stop creating if the number of inputs exceeds 10
and here is the code
<script>
$(document).ready(function(){
var inputs = $('.product-options').length;
var max_inputs = 15;
var i=inputs;
var number = inputs;
if(inputs < 2){
$('.add_field_button').click(function(e){
e.preventDefault();
number++
i++;
$('.form-product').append('<span id="row'+i+'" class="myinput" style="transition:1s ease;"><div class="form-group"> <div class="col-sm-7"> <input type="text" class="form-control product-options" name="childen'+number+'"'+'value="" placeholder="the option"></div><div class="col-sm-3"> <input type="text" class="form-control product-options" name="childprice'+number+'"'+ 'value="" placeholder="option price"></div> </div> <div class="form-group"> <div class="col-sm-7"> <input type="text" class="form-control product-options" name="childsrb'+number+'"'+'value="" placeholder="the option in serbian"></div><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove"><i class="fas fa-times"></i></button></div></span>');
});
}
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
number--
i--;
});
});
</script>
html code
<div class="form-group product-option">
<label class="col-sm-2 control-label"></label>
<div class="col-sm-10 product-option">
<button type="button" class="add_field_button on-hover" style="background: none; border:none;">
<i class="fas fa-plus on-hover" style="cursor: pointer"></i></button>
<label for="option">Product options</label><br>
<div class="form-group product-option form-product">
</div>
</div>
</div>
You can use an if statement to check whether i is smaller than 11:
$(document).ready(function() {
var inputs = $('.product-options').length;
var max_inputs = 15;
var i = inputs;
var number = inputs;
if (inputs < 2) {
$('.add_field_button').click(function(e) {
e.preventDefault();
number++
i++;
if (i < 11) {
$('.form-product').append('<span id="row' + i + '" class="myinput" style="transition:1s ease;"><div class="form-group"> <div class="col-sm-7"> <input type="text" class="form-control product-options" name="childen' + number + '"' + 'value="" placeholder="the option"></div><div class="col-sm-3"> <input type="text" class="form-control product-options" name="childprice' + number + '"' + 'value="" placeholder="option price"></div> </div> <div class="form-group"> <div class="col-sm-7"> <input type="text" class="form-control product-options" name="childsrb' + number + '"' + 'value="" placeholder="the option in serbian"></div><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove"><i class="fas fa-times"></i></button></div></span>');
}
});
}
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
number--
i--;
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group product-option">
<label class="col-sm-2 control-label"></label>
<div class="col-sm-10 product-option">
<button type="button" class="add_field_button on-hover" style="background: none; border:none;">
<i class="fas fa-plus on-hover" style="cursor: pointer"></i></button>
<label for="option">Product options</label><br>
<div class="form-group product-option form-product">
</div>
</div>
</div>

Add elements on click on dynamically generated <a> tag with dynamic id

I have a form with a textarea & a text box in 3 cols in a row, I can add more textbox on click, add this row dynamically on click event.
I've done create this row dynamically on click event, but I can't add textbox on click in the dynamically created row.
Can anyone help me with this?
Also if anything is missing in my code & my approach to this, feel free to suggest another way to do this.
I'm using jQuery and Bootstrap.
Here is a JSFiddle
var count = 3;
$(document).on('click', '#addpv1', function () {
var appendTxt = "<div class='form-group'><input type='text' class='form-control m-b-10' placeholder='Parameter Value' name='para_ans1[]' id='para_ans" + count + "'><small class='form-text'><a href='javascript:void(0);'id='removemanager'>Remove</a></small></div>"
$("#addpvdynamic").append(appendTxt);
count++;
console.log(count)
});
$(document).on('click', '#removemanager', function (e) {
$(this).closest("div").remove();
});
var count = 3;
$(document).on('click', '#addprv1', function () {
var appendTxt = "<div class='form-group'><input type='text' class='form-control m-b-10' placeholder='Parameter Value' name='para_ans1[]' id='para_ans" + count + "'><small class='form-text'><a href='javascript:void(0);'id='removemanager'>Remove</a></small></div>"
$("#addprvdynamic").append(appendTxt);
count++;
console.log(count)
});
$(document).on('click', '#removemanager', function (e) {
$(this).closest("div").remove();
});
var count = 3;
$(document).on('click', '#addprmv1', function () {
var appendTxt = "<div class='form-group'><input type='text' class='form-control m-b-10' placeholder='Parameter Value' name='para_ans1[]' id='para_ans" + count + "'><small class='form-text'><a href='javascript:void(0);'id='removemanager'>Remove</a></small></div>"
$("#addprmvdynamic").append(appendTxt);
count++;
console.log(count)
});
$(document).on('click', '#removemanager', function (e) {
$(this).closest("div").remove();
});
$(document).ready(function () {
var max_fields = 30; //maximum input boxes allowed
var wrapper = $("#dynamic"); //Fields wrapper
var add_button = $("#addparas1"); //Add button ID
var x = 1;
var pq = 3;
var pa = 3;
var pp = 3;
$(add_button).click(function (e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
pq++;
pa++;
pp++;
var $newSelects = $('<div class="row"><div class="col-md-4"> <div class="form-group"> <textarea type="text" name="parameter[]" parsley-trigger="change" required placeholder="Parameter" class="form-control m-b-10" id="pn1" rows="2"></textarea> <input type="text" class="form-control m-b-10" required placeholder="Parameter Value" name="para_ans1[]" id="pv1"> <input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans1[]" id="pv2"> <input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans1[]" id="pv3"> <small>Add parameter values</small> <div id="addpvdynamic"> </div></div></div><div class="col-md-4"> <div class="form-group"> <textarea type="text" name="parameter[]" parsley-trigger="change" required placeholder="Parameter" class="form-control m-b-10" id="pn2" rows="2"></textarea> <input type="text" class="form-control m-b-10" required placeholder="Parameter Value" name="para_ans5[]" id="prv1"> <input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans5[]" id="prv2"> <input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans5[]" id="prv3"> <small>Add parameter values</small> <div id="addprvdynamic"> </div></div></div><div class="col-md-4"> <div class="form-group"> <textarea type="text" name="parameter[]" parsley-trigger="change" required placeholder="Parameter" class="form-control m-b-10" id="pn3" rows="2"></textarea> <input type="text" class="form-control m-b-10" required placeholder="Parameter Value" name="para_ans9[]" id="prmv1"> <input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans9[]" id="prmv2"> <input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans9[]" id="prmv3"> <small>Add parameter values</small> <div id="addprmvdynamic"> </div></div></div>Remove</div>')
wrapper.append($newSelects);
console.log(pq);
console.log(pa);
console.log(pp);
}
});
$(wrapper).on("click", "#remove-pararow", function (e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12"><label>Create Parameters</label></div>
<div class="col-md-4">
<div class="form-group">
<textarea type="text" name="parameter[]" parsley-trigger="change" required placeholder="Parameter" class="form-control m-b-10" id="pn1" rows="2"></textarea>
<input type="text" class="form-control m-b-10" required placeholder="Parameter Value" name="para_ans1[]" id="pv1">
<input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans1[]" id="pv2">
<input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans1[]" id="pv3">
<small>Add parameter values</small>
<div id="addpvdynamic">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<textarea type="text" name="parameter[]" parsley-trigger="change" required placeholder="Parameter" class="form-control m-b-10" id="pn2" rows="2"></textarea>
<input type="text" class="form-control m-b-10" required placeholder="Parameter Value" name="para_ans5[]" id="prv1">
<input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans5[]" id="prv2">
<input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans5[]" id="prv3">
<small>Add parameter values</small>
<div id="addprvdynamic">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<textarea type="text" name="parameter[]" parsley-trigger="change" required placeholder="Parameter" class="form-control m-b-10" id="pn3" rows="2"></textarea>
<input type="text" class="form-control m-b-10" required placeholder="Parameter Value" name="para_ans9[]" id="prmv1">
<input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans9[]" id="prmv2">
<input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans9[]" id="prmv3">
<small>Add parameter values</small>
<div id="addprmvdynamic">
</div>
</div>
</div>
<div class="col-md-12">
Add more
</div>
</div>
<div class="" id="dynamic">
</div>
Your Code is a mess and an excellent example of so many things you can go wrong in js but still achieve a kind of working result.
I guess you need to dig a bit more into how javascript is parsed and when which code will execute in which context, for example your multiple var count definitions are sensless and as far as i can see you dont need the count at all.
But i wont dive into all those errors,
I thing what you are conceptionally doing wrong is adding dynamic things and write static code for it.
Your job would be to keep everthing generic that is generic.
To give you a quickstart, if you have the following markup:
<div class="col-md-4">
<div class="form-group">
<input name="para_ans1[]" id="para_ans1_1" type="text" class="form-control m-b-10" required placeholder="Parameter Value" >
<input name="para_ans1[]" id="para_ans1_2" type="text" class="form-control m-b-10" placeholder="Parameter Value" >
<input name="para_ans1[]" id="para_ans1_3" type="text" class="form-control m-b-10" placeholder="Parameter Value" >
<a data-id="ans1" class="addParameterValue" href="javascript:void(0);"><small>Add parameter values</small></a>
<div class="dynamic" data-id="ans1">
</div>
</div>
</div>
.....
you would only need need two generic functions for adding and removing
$(document).on('click', '.addParameterValue', function () {
var current_id = $(this).attr('data-id');
// use the actual amount of dynamic added inputs in the _current_ form-group
var current_count = $(this).parent().find('input').length;
// for readability i splitted up the appendTxt, look how everything necessary is parametrized
var inp_txt = " <input name='para_'"+current_id+"[]' type='text' class='form-control m-b-10' placeholder='Parameter Value' >";
// and the removelink has a class now too and referrences the input above
var rmv_lnk = "<a data-removeid='para_"+current_id+"_"+current_count+"' class='removemanager' href='javascript:void(0);' >Remove</a>"
var appendTxt = "<div class='form-group' id='para_"+current_id+"_"+current_count+"'>"+inp_txt+"<small class='form-text'>"+rmv_lnk+"</small></div>";
// finally add it to the current row´s dynamic container
$('.dynamic[data-id="'+current_id+'"]').append(appendTxt);
});
// and your generic remove function
$(document).on('click', '.removemanager', function () {
var remove_id = $(this).attr('data-removeid');
$('#'+remove_id).remove();
});
so you this way would be the generation and removal of input generic, to add more rows you have to adapt this pattern but further investigation is your part

Delete HTML elements with JS. WORKING JSFIDDLE [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I made code to generate html rows.
How do I delete them now?? THis doesn't work
$('.deleteEnv').click(function () {
$(this).parents().remove();
});
$('#addEnv').click(function() {
$('#envVariablesDiv').append('<div class="col-sm-5 top10"><div class="input-group"><label class="input-group-addon">Name</label><input id="envName" class="form-control" name="envName" type="text" placeholder="e.g. name1" /></div></div>' +
'<div class="col-sm-5 top10"><div class="input-group"><label class="input-group-addon">Variable</label><input class="form-control" id="envVar" type="text" name="envVar" placeholder="e.g. var1" /></div></div><div class="col-sm-2 top10"><button type="button" class="btn btn-danger deleteEnv"><span class="fa fa-trash">Delete</span></button></div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addEnv">Add</button>
<div id="envVariablesDiv">
</div>
Insert all your code inside a div(it's easier this way), and use a delegated event handler:
$('#addEnv').click(function() {
var parentDiv = $('<div/>', {
class : 'parentDiv',
html : '<div class="col-sm-5 top10"><div class="input-group"><label class="input-group-addon">Name</label><input id="envName" class="form-control" name="envName" type="text" placeholder="e.g. name1" /></div></div>' +
'<div class="col-sm-5 top10"><div class="input-group"><label class="input-group-addon">Variable</label><input class="form-control" id="envVar" type="text" name="envVar" placeholder="e.g. var1" /></div></div><div class="col-sm-2 top10"><button type="button" class="btn btn-danger deleteEnv"><span class="fa fa-trash">Delete</span></button></div>'
});
$('#envVariablesDiv').append(parentDiv);
});
$('#envVariablesDiv').on('click', '.deleteEnv', function(){
$(this).parent().parent().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addEnv">Add</button>
<div id="envVariablesDiv">
</div>
You need to setup the click event each time you have appended the HTML to the DOM.
At the moment you're loading the page, assigning a delete event to nothing, then when a user clicks to add a new item, it adds some html, and the delete event is not assigned.
This Is You Want :
$(document).on('click','#addEnv',function(){
$('#envVariablesDiv').append('<div class="col-sm-5 top10"><div class="input-group"><label class="input-group-addon">Name</label><input id="envName" class="form-control" name="envName" type="text" placeholder="e.g. name1" /></div></div>' +
'<div class="col-sm-5 top10"><div class="input-group"><label class="input-group-addon">Variable</label><input class="form-control" id="envVar" type="text" name="envVar" placeholder="e.g. var1" /></div></div><div class="col-sm-2 top10"><button type="button" class="btn btn-danger deleteEnv"><span class="fa fa-trash">Delete</span></button></div>');
});
$(document).on('click','.deleteEnv',function(){
$('#envVariablesDiv').empty();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<button id="addEnv">Add</button>
<div id="envVariablesDiv">
</div>
Change some parts of your code to the following, this is bad way to code, but for now it works.
$('#deleteEnv').click(function () {
$(this).parents().remove();
console.log("clicked");
});
$('#addEnv').click(function() {
$('#envVariablesDiv').append('<div class="col-sm-5 top10"><div class="input-group"><label class="input-group-addon">Name</label><input id="envName" class="form-control" name="envName" type="text" placeholder="e.g. name1" /></div></div>' +
'<div class="col-sm-5 top10"><div class="input-group"><label class="input-group-addon">Variable</label><input class="form-control" id="envVar" type="text" name="envVar" placeholder="e.g. var1" /></div></div><div class="col-sm-2 top10"></div>');
$('#deleteEnv').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addEnv">Add</button>
<div id="envVariablesDiv"></div>
<button type="button" class="btn btn-danger" style="display:none;" id = "deleteEnv"><span class="fa fa-trash">Delete</span></button>

display input elements from jquery variable

I am working on a project where user can add records, on the add record page user has 1 html form with 10 fields in it. And a button to add more forms with all the 10 fields.
Now, 4 out of 10 fields has auto complete feature of bootstrap typeahead, and the typeahead suggestions works on the default 1st form.
The problem comes when user adds new form on a add-more button click, the form in actually prepared using jquery below:
var wrapper = '<div class="span6"><input type="hidden" name="count[]" value="' + count + '"/><div class="widget-box"><div class="widget-title"> <span class="fa"> <i class="fa fa-info-circle"></i> </span> <h5>Add Parent - ' + count + '</h5><button type="button" class="btn btn-mini btn-danger" id="remove">Remove</button><button type="button" class="btn btn-mini btn-success" id="add">Add</button></div><div class="widget-content nopadding">';
wrapper += '<div class="control-group"> <label class="control-label">First Name</label> <div class="controls"> <input class="span10" type="text" name="firstname[]" id="firstname"> </div></div>';
wrapper += '<div class="control-group"> <label class="control-label">Last Name</label> <div class="controls"> <input class="span10" type="text" name="lastname[]" id="lastname"> </div></div>';
wrapper += '<div class="control-group"> <label class="control-label">Gender</label> <div class="controls"> <select class="span10" name="gender[]" id="gender"> <option value="Male">Male</option> <option value="Female">Female</option> </select> </div></div>';
wrapper += '<div class="control-group"> <label class="control-label">Email Address</label> <div class="controls"> <input class="span10" type="email" name="email[]" id="email"> </div></div>';
wrapper += '<div class="control-group"> <label class="control-label">Password</label> <div class="controls"> <input class="span10" type="password" name="password[]" id="password" autocomplete="new-password"> </div></div>';
//typeahead input comes here.......
wrapper += '</div></div></div>';
$current_row.append(wrapper);
the above code does not include the typeahead inputs which I had previously like below:
wrapper += '<div class="control-group">
<label class="control-label">Hobby</label>
<div class="controls">
<input type="text" class="typeahead span10" name="hobby[]" id="hobby" data-provide="typeahead">
<input type="hidden" name="hobbyid[]" id="hobbyid" value=""/>
</div>
</div>';
now, when users click on add more fields, then the form is actually get added with all the input fields, but here the bootstrap typeahead didn't worked.
so I tried the below code after reading and searching on GOOGLE.
var hobby_typeahead = $('<input type="text" class="typeahead span10" name="hobby[]" id="hobby" data-provide="typeahead"> <input type="hidden" name="hobbyid[]" id="hobbyid" value=""/>');
$current_row.append(hobby_typeahead);
after this, my dynamic fields started showing me the bootstrap typeahead suggestions..
But, the main problem I am getting is to render the input fields under the bootstrap div ex: control-group, control-label and controls div.
Actually I am looking something like below:
wrapper += '<div class="control-group">
<label class="control-label">Hobby</label>
<div class="controls">
'+ hobby_typeahead +'
<input type="hidden" name="hobbyid[]" id="hobbyid" value=""/>
</div>
</div>';
I understand this will print object [Object] etc..
I would like to know, how I could attach it within the div's, I could do it by declaring something like this:
$control_group = $('<div class="control-group"></div>');
$control_label = $('<label class="control-label">Hobby</label>');
$controls = $('<div class="controls"></div>');
$controls.append($hobby_typeahead);
$control_group.append($control_label);
$control_group.append($controls);
$current_row.append($control_group);
But as I have 4 fields with typeahead suggestion and 6 normal fields, is there any smart way to do it, I don't want to go the long way above.
Thanks in advance, any help or suggestion would be really great help for me.
this is how I created it, to fit in my eyes, this is not the complete solution to fit in my requirement
I have a different and fully working copy with me, I thought posting it here, will add helpful resource for others.
var $span6 = $('<div class="span6"></div>');
var $hidden_count = $('<input type="hidden" name="count[]" value="' + count + '"/>');
var $widget_box = $('<div class="widget-box"><div class="widget-title"> <span class="fa"> <i class="fa fa-info-circle"></i> </span> <h5>Add User - ' + count + '</h5><button type="button" class="btn btn-mini btn-danger" id="remove">Remove</button><button type="button" class="btn btn-mini btn-success" id="add">Add</button></div>');
var $widget_content = $('<div class="widget-content nopadding"></div>');
$span6.append($hidden_count);
$span6.append($widget_box);
var $inputs = {
'First Name':'<input class="span10" type="text" name="firstname[]" id="firstname">',
'Last Name':'<input class="span10" type="text" name="lastname[]" id="lastname">',
'Gender':'<select class="span10" name="gender[]" id="gender"> <option value="Male">Male</option> <option value="Female">Female</option> </select>',
'Email Address':'<input class="span10" type="email" name="email[]" id="email">',
'Password':'<input class="span10" type="password" name="password[]" id="password" autocomplete="new-password">',
'Hobbies':'<input type="text" class="typeahead span10" name="hobby[]" id="hobby" data-provide="typeahead">'
};
for(var $k in $inputs){
var $control_group = $('<div class="control-group"></div>');
var $control_label = $('<label class="control-label">'+$k+'</label>');
var $controls = $('<div class="controls"></div>');
var $input = $($inputs[$k]);
$input.typeahead({
source: function (query, process) {
return $.get('get-hobbies?src=typeahead&q='+query, function (data) {
return process(JSON.parse(data));
});
}
});
$controls.append($input);
$control_group.append($control_label);
$control_group.append($controls);
$widget_content.append($control_group);
}
$span6.append($widget_content);
$current_row.append($span6);

clicking the button again making the field reset

When ever i click the add button it makes the previous value disappear.
Example if i click add first time and enter the values in the first input boxes. and the click the add button it is making the previous values disappear from the input boxes
function addInput(event) {
var field =
'<div class="form-group"><input type="text" class="form-control" name="selected_text" placeholder="Selected Text"></div>' +
'<div class="form-group"><input type="text" class="form-control" name="selected_route_url" placeholder="Route Url for selected text"></div>' +
'<div class="form-group"><input type="text" class="form-control" name="unselected_text" placeholder="UnSelected Text"></div>' +
'<div class="form-group"><input type="text" class="form-control" name="unselected_route_url" placeholder="Route Url for unselected text"></div>'
document.getElementById('inputField').innerHTML += field;
event.preventDefault();
}
<div class="form-group">
<a class="btn btn-primary pull-left" onclick="addInput(event)">Add</a>
</div>
<div id="inputField" style="background-color:#eceff1;">
</div>
Adding elements to innerHTML reloads the entire element beforehand. That's why the values get reset.
You could try using the insertAdjacentHTML function. Then this line
document.getElementById('inputField').innerHTML += field;
will become this
document.getElementById('inputField').insertAdjacentHTML('beforeend', field);
Snippet :
function addInput(event) {
var field =
'<div class="form-group"><input type="text" class="form-control" name="selected_text" placeholder="Selected Text"></div>' +
'<div class="form-group"><input type="text" class="form-control" name="selected_route_url" placeholder="Route Url for selected text"></div>' +
'<div class="form-group"><input type="text" class="form-control" name="unselected_text" placeholder="UnSelected Text"></div>' +
'<div class="form-group"><input type="text" class="form-control" name="unselected_route_url" placeholder="Route Url for unselected text"></div>'
document.getElementById('inputField').insertAdjacentHTML('beforeend', field);
event.preventDefault();
}
<div class="form-group">
<a class="btn btn-primary pull-left" onclick="addInput(event)">Add</a>
</div>
<div id="inputField" style="background-color:#eceff1;">
</div>
Source : this similar answer
I totally converted the program to jquery and its working..
$("#link").click(function() {
var field =
'<div class="form-group"><input type="text" class="form-control" name="selected_text" placeholder="Selected Text"></div>' +
'<div class="form-group"><input type="text" class="form-control" name="selected_route_url" placeholder="Route Url for selected text"></div>' +
'<div class="form-group"><input type="text" class="form-control" name="unselected_text" placeholder="UnSelected Text"></div>' +
'<div class="form-group"><input type="text" class="form-control" name="unselected_route_url" placeholder="Route Url for unselected text"></div>';
$('#inputField').append(field);
event.preventDefault();
});
HTML
<div class="form-group">
<a class="btn btn-primary pull-left" id="link">Add</a>
</div>
<div id="inputField" style="background-color:#eceff1;">
</div>
Fiddle

Categories