In the below code I use to add new text-box, but this code is not working in Google chrome, it seems to be working in Firefox.
<input type="submit" class="btn btn-success" name="btnSubmit" id="add-box" value="Add item" />
<script type="text/javascript">
jQuery(document).ready(function($){
$('.control-group #add-box').click(function(){
var n = $('.text-box').length + 1;
if( 100 < n ) {
alert('Stop it!');
return false;
}
var box_html = $('<p class="text-box"> <input type="text" name="boxes[]" value="" id="box' + n + '" /><input type="text" name="boxes1[]" value="" id="box1' + n + '" /><input type="submit" class="btn btn-success" name="btnSubmit" id="remove-box" value="Remove item" /> </p>');
box_html.hide();
$('.control-group p.text-box:last').after(box_html);
box_html.fadeIn('slow');
return false;
});
$('.control-group').on('click', '#remove-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.box-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});
</script>
By looking at your code, I think your problem is with the duplicated remove ids. Try the following:
$('#add-box').click(function() {
var n = $('.text-box').length + 1;
if (100 < n) {
alert('Stop it!');
return false;
}
var box_html = $('<p class="text-box"><input type="text" name="boxes[]" value="" id="box' + n + '" /><input type="text" name="boxes1[]" value="" id="box1' + n + '" /><input type="submit" class="btn btn-success remove-box" name="btnSubmit" id="remove-box' + n + '" value="Remove item" /> </p>'); // change the remove button so id's are unique and add a class
$('.control-group').append(box_html.hide()); // i have just changed this selector for this example
box_html.fadeIn('slow');
return false;
});
$('.control-group').on('click', '.remove-box', function() { // target the class (if you target a duplicated id, it will always only return the first element with that id)
$(this).parent().css('background-color', '#FF6C6C').fadeOut("slow", function() {
$(this).remove();
$('.box-number').each(function(index) {
$(this).text(index + 1);
});
});
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-group">
<input type="submit" class="btn btn-success" name="btnSubmit" id="add-box" value="Add item" />
</div>
since at the first click chrome is not able to find $('.control-group p.text-box:last').after(box_html); so it will not append anything and so on.
please change your code as below
jQuery(document).ready(function($){
$(' #add-box').click(function(){
var n = $('.text-box').length + 1;
if( 100 < n ) {
alert('Stop it!');
return false;
}
var box_html = $('<p class="text-box"> <input type="text" name="boxes[]" value="" id="box' + n + '" /><input type="text" name="boxes1[]" value="" id="box1' + n + '" /><input type="submit" class="btn btn-success" name="btnSubmit" id="remove-box" value="Remove item" /> </p>');
box_html.hide();
if($('.control-group p.text-box:last').length>0) // if there is already then append after it.
$('.control-group p.text-box:last').after(box_html);
else
$('body').append(box_html); // else add textboxes to body or your class below button
box_html.fadeIn('slow');
return false;
});
$('.control-group').on('click', '#remove-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.box-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});
Related
I'm working on the following jsfiddle code:
$(function() {
$("#btnAdd").bind("click", function() {
var div = $("<div />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("#btnGet").bind("click", function() {
var valuesarr = new Array();
var phonearr = new Array();
$("input[name=DynamicTextBox]").each(function() {
valuesarr.push($(this).val());
});
$("input[name=phoneNum]").each(function() {
phonearr.push($(this).val());
});
alert(valuesarr);
alert(phonearr);
});
$("body").on("click", ".remove", function() {
$(this).closest("div").remove();
});
});
function GetDynamicTextBox(value) {
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" /> <input name = "phoneNum" type="text" /> <input type="button" value="Remove" class="remove" />';
}
example
It works perfectly but:
I add more then one input field, for example 3 new rows (via add button), then I can remove each line with the "remove button". I would like to "remove all" rows... is it possible with a new button called "remove all" or something similar?
thanks for your help
$(function() {
$("#btnAdd").bind("click", function() {
var div = $("<div />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("#btnGet").bind("click", function() {
var valuesarr = new Array();
var phonearr = new Array();
$("input[name=DynamicTextBox]").each(function() {
valuesarr.push($(this).val());
});
$("input[name=phoneNum]").each(function() {
phonearr.push($(this).val());
});
alert(valuesarr);
alert(phonearr);
});
$("body").on("click", ".remove", function() {
$(this).closest("div").remove();
});
// remove all input field(s).
$("#btnRemoveAll").bind("click", function() {
$("#TextBoxContainer").empty();
});
});
function GetDynamicTextBox(value) {
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" /> <input name = "phoneNum" type="text" /> <input type="button" value="Remove" class="remove" />';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="btnAdd" type="button" value="Add" />
<input id="btnRemoveAll" type="button" value="remove all" />
<br />
<br />
<div id="TextBoxContainer">
</div>
<br />
<input id="btnGet" type="button" value="Get Values" />
I'm trying to add new rows on button click:
<div class="row" style="margin: 20px 0;">
<div id="AddContainer">
<!--new rows with content to add will be added here-->
</div>
<br />
<input id="btnAdd" type="button" class="btn btn-success" value="+" />
</div>
and JavaScript:
$("#btnAdd").bind("click", function () {
var div = $("<div />");
div.html(GetDynamicTextBox(''));
$("#AddContainer").append(div);
});
$("#btnGet").bind("click", function () {
var values = "";
$("input[name=DynamicTextBox]").each(function () {
values += $(this).val() + "\n";
});
alert(values);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
var ddlId = $('[id*=hfDDLId]').val();
$('[id$=ddl' + parseInt(ddlId) + ']').remove();
$('[id*=hfDDLId]').val(parseInt($('[id*=hfDDLId]').val()) - 1);
var previousDropDownId = $('[id*=hfDropDownIds]').val();
$('[id*=hfdropdownids]').val(resultids);
//}
});
function GetDynamicTextBox(value) {
var combo = $("<select></select>").attr("id", value).attr("name", value).attr("runat", "server").attr("class", "class").attr("required", "required");
$.each(document.pvm.SettingsList(), function (i, el) {
combo.append("<option value=" + el + ">" + el + "</option>");
});
return '<input type="button" value="-" class="remove btn btn-danger" /> '
+ combo + ' '
+ '<input name = "DynamicTextBox" type="text" value="' + value + '" required/> '
}
function ClearAddTab() {
document.getElementById("AddContainer").innerHTML = "";
}
and the settings list is:
_mVM.SettingsList = ko.observableArray(['France', 'Germany', 'Spain']);
The problem is that I want need to add the dropdown with the SettingsList options for each new added row, but it displays [object object].
It is possible to add the dropdown between the red button and the text field, but also to allow the user to delete that row by pressing the red button?
In this case you want the HTML of the selected DOM object rather than the object itself.
When running function GetDynamicTextBox try combo.prop('outerHTML') when returning the string and you should get the dropdown html rather than [object object].
JsFiddle: jsfiddle.net/fgazfLaz
HTML
<div class="row" style="margin: 20px 0;">
<div id="AddContainer">
<!--new rows with content to add will be added here-->
</div>
<br />
<input id="btnAdd" type="button" class="btn btn-success" value="+" />
</div>
Javascript
var settingsListAry = ['France', 'Germany', 'Spain'];
$("#btnAdd").bind("click", function () {
//var test = GetDynamicTextBox('a');
//alert("test");
var div = $("<div />");
div.html(GetDynamicTextBox(''));
$("#AddContainer").append(div);
});
$("#btnGet").bind("click", function () {
var values = "";
$("input[name=DynamicTextBox]").each(function () {
values += $(this).val() + "\n";
});
alert(values);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
var ddlId = $('[id*=hfDDLId]').val();
$('[id$=ddl' + parseInt(ddlId) + ']').remove();
$('[id*=hfDDLId]').val(parseInt($('[id*=hfDDLId]').val()) - 1);
var previousDropDownId = $('[id*=hfDropDownIds]').val();
$('[id*=hfdropdownids]').val(resultids);
//}
});
function GetDynamicTextBox(value) {
var combo = $("<select></select>").attr("id", value).attr("name", value).attr("runat", "server").attr("class", "class").attr("required", "required");
$.each(settingsListAry, function (i, el) {
combo.append("<option value=" + el + ">" + el + "</option>");
});
return '<input type="button" value="-" class="remove btn btn-danger" /> '
+ combo.prop('outerHTML') + ' '
+ '<input name = "DynamicTextBox" type="text" value="' + value + '" required/> '
}
function ClearAddTab() {
document.getElementById("AddContainer").innerHTML = "";
}
First add a <div> inside <div id="AddContainer"> this will hold for appending a new input.
<div id="AddContainer">
<!--new rows with content to add will be added here-->
<div></div>
</div>
Add an onclick event on your button then call this function, it will append a new button:
<script>
function addButton()
{
$('#AddContainer')
.find('div')
.remove()
.end()
.append('<input type="button" value="button"
/><div></div>');
}
</script>
Your input button:
<input id="btnAdd" type="button" onclick="addButton();" class="btn btn-success" value="+" />
In the below jquery file when i click add button it create one text box with one button after i click addbutton it create another textbox with button.......But what i want is when i cllick 1st button it add 2nd button then i click 2 nd button it add 3rd button .....But i doknow how to do ..
$(document).ready(function() {
var counter = 2;
$("#addButton").click(function() {
if (counter > 10) {
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' +
'<input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" >' +
' <input type="button" value="Add Button" id="addButton">');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function() {
if (counter == 1) {
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
});
Duplicate IDs are invalid HTML and will nearly always cause issues with scripting. Avoid if at all possible.
The click() binding you're using is called a "direct" binding which will only attach the handler to elements that already exist. It won't get bound to elements created in the future. To do that, you'll have to create a "delegated" binding by using on().
More details: http://api.jquery.com/on/
Your Sample:
$(document).ready(function(){
var counter = 2;
$(document.body).on('click', ".addButton", function(){
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" >' +
' <input type="button" value="Add Button" class="addButton" id="button' + counter + '">');
newTextBoxDiv.appendTo("#TextBoxesGroup");
$(this).attr( "disabled", "disabled" );
counter++;
});
$(".removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
$("#button" + (counter - 1)).attr( "disabled", false );
if(counter==2){
$(".addButton").attr( "disabled", false );
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons">
<input class="addButton" type="button" value="Add Button" />
<input class="removeButton" type="button" value="Remove Button" />
</div>
<div id="TextBoxesGroup"></div>
You may try this:
This line $(obj).attr( "disabled", "disabled" ); to
disable clicked button. You can skip.
function createButton(obj){
var $input = $('<input type="button" value="Add Button" onclick="createButton(this);">');
$input.appendTo($("#buttons"));
$(obj).attr( "disabled", "disabled" ); // use it to disable clicked btn
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons">
<input type="button" value="Add Button" onclick="createButton(this);">
</div>
i have code where you can add or delete textbox using .append() and .remove() in jquery, now i want to implode all the value of the textboxes separated by commas and pass it into another textbox located outside the script. how can i do it? here's the code for dymically adding and removing textbox. (not mine just got it here in stackoverflow)
HTML:
<input id="btnAdd" type="button" value="Add" />
<br />
<br />
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
</div>
<br />
<input id="btnGet" type="button" value="Get Values" />
javascript:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("<div />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("#btnGet").bind("click", function () {
var values = "";
$("input[name=DynamicTextBox]").each(function () {
values += $(this).val() + "\n";
});
alert(values);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
});
function GetDynamicTextBox(value) {
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" /> ' +
'<input type="button" value="Remove" class="remove" />'
}
</script>
Use .val() to set value of "another textbox" to values
$(function() {
$("#btnAdd").bind("click", function() {
var div = $("<div />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("#btnGet").bind("click", function() {
var values =
$.map($("input[name=DynamicTextBox]"), function(el) {
return el.value
}).join(",\n");
$("#anotherTextbox").val(values);
});
$("body").on("click", ".remove", function() {
$(this).closest("div").remove();
});
});
function GetDynamicTextBox(value) {
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" /> ' +
'<input type="button" value="Remove" class="remove" />'
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input id="btnAdd" type="button" value="Add" />
<br />
<br />
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
</div>
<br />
<input id="btnGet" type="button" value="Get Values" />
<input id="anotherTextbox" type="text" />
Hello I am trying to add new form field and delete form field after getting inspired from this tutorial - http://bootsnipp.com/snipps/dynamic-form-fields
My Current Problem is to delete and reset the value of all in chronological order.
<input type="hidden" name="count" value="1" />
<div class="control-group" id="fields">
<label class="control-label" for="field1">Nice Multiple Form Fields</label>
<div class="controls" id="profs">
<div class="input-append">
<input autocomplete="off" class="span3" id="field1" name="prof1" type="text" placeholder="Type something (it has typeahead too)" data-provide="typeahead" data-items="8"
data-source='["Aardvark","Beatlejuice","Capricorn","Deathmaul","Epic"]'/><button id="b1" onClick="addFormField()" class="btn btn-info" type="button">+</button>
</div>
<br /><small>Press + to add another form field :)</small>
</div>
</div>
Javascript :-
var next = 1;
function addFormField(){
var addto = "#field" + next;
next = next + 1;
var newIn = '<br /><br /><input autocomplete="off" class="span3" id="field' + next + '" name="field' + next + '" type="text" data-provide="typeahead" data-items="8"><button id="b1" onClick="$(this).parent().remove();" class="btn btn-info" type="button">+</button>';
var newInput = $(newIn);
$(addto).after(newInput);
$("#field" + next).attr('data-source',$(addto).attr('data-source'));
$("#count").val(next);
}
Parent Element is getting removed, but next counter is not reset properly. in hidden and all new created form :-
Only Add Demo :- http://bootsnipp.com/snipps/dynamic-form-fields
Add an Delete Demo with Bug :- http://jsfiddle.net/6dCrT/2/
Can someone help me please.
Thanks
Try:
function addFormField(){
var addto = "#field" + next;
next = next + 1;
var newIn = '<br /><br /><input autocomplete="off" class="span3" id="field' + next + '" name="field' + next + '" type="text" data-provide="typeahead" data-items="8"><button id="b'+next+'" onClick="$(this).prev().remove();$(this).remove();" class="btn btn-info" type="button">-</button>';
var newInput = $(newIn);
console.log(addto);
$(addto).after(newInput);
if(next>1)
$("button#b"+next).after(newInput);
$("#field" + next).attr('data-source',$(addto).attr('data-source'));
$("#count").val(next);
}
DEMO FIDDLE
In my example, I was building a form that would allow users to add multiple input names if they had more than one dog.
var counter = 0
jQuery(function () {
$(".newDog").click(function(){
counter ++;
if (counter < 4) {
var elem = $("<input/>",{
type: "text",
name: `dogname${counter}`
});
} else {
alert("You can only add 4 Dog Names")
}
var removeLink = $("<span/>").html("X").click(function(){
$(elem).remove();
$(this).remove();
counter --;
});
$(".dogname-inputs").append(elem).append(removeLink);
});
})
Full credit as mentioned to https://stackoverflow.com/users/714969/kevin-bowersox