We Keep Coding

Add new row with dropdown on button click

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" />&nbsp'
+ combo + '&nbsp'
+ '<input name = "DynamicTextBox" type="text" value="' + value + '" required/>&nbsp'
}
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" />&nbsp'
+ combo.prop('outerHTML') + '&nbsp'
+ '<input name = "DynamicTextBox" type="text" value="' + value + '" required/>&nbsp'
}
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="+" />

Issues with converting label to input field on button click

I have modified the answer in the post dicussed here.
In my application I have two buttons - edit and save. When clicked on edit, the labels get converted into input fields, where the user can edit the content and save.
Everything is working fine, but the problem is that when the user clicks on the edit button twice, the content in the input fields becomes blank, i.e. the <input> value becomes blank.
Please suggest me a fix for this. Where am I going wrong?
<div id="companyName">
<label class="text-cname"><b>#Html.DisplayFor(m => m.Company)</b></label>
</div>
<div class="row center-block">
<input type="submit" class="btn btn-success" value="Save" id="btnSave" />
<input type="button" id="edit" class="btn btn-primary" value="Edit" />
</div>
<script>
$(document).ready(function () {
$('#edit').click(function () {
// for company name
var companyName = $('.text-cname').text();
var lblCName = $('<input id="attrCName" type="text" value="' + companyName + '" />')
$('.text-cname').text('').append(lblCName);
lblCName.select();
});
$('#btnSave').click(function () {
var text = $('#attrCName').val();
$('#attrCName').parent().text(text);
$('#attrCName').remove();
});
});
</script>

You can use replaceWith() method to convert label to textarea.
$("#edit").click(function(){
var text = $("label").text();
$("label").replaceWith("<input value='"+text+"' />");
});
$("#save").click(function(){
var text = $("input ").val();
$("input ").replaceWith("<label>"+text+"</label>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="edit">Edit</button>
<button id="save">Save</button>
<br/><br/>
<label>Text</label>

The most simple fix would be to disable the edit button once you've clicked it, and enable it again after saving:
$(document).ready(function () {
$('#edit').click(function () {
$(this).prop('disabled', true);
/*for company name*/
var companyName = $('.text-cname').text();
var lblCName = $('<input id="attrCName" type="text" value="' + companyName + '" />')
$('.text-cname').text('').append(lblCName);
lblCName.select();
});
$('#btnSave').click(function () {
$('#edit').prop('disabled', false);
var text = $('#attrCName').val();
$('#attrCName').parent().text(text);
$('#attrCName').remove();
});
});

When you click the second time the value of companyName is empty, that's why the <input> value becomes blank. This is a very simple solution, but you lose the focus on edit box which is easy to fix.
$('#edit').click(function () {
/*for company name*/
var companyName = $('.text-cname').text();
var lblCName = $('<input id="attrCName" type="text" value="' + companyName + '" />');
if(companyName != "")
$('.text-cname').text('').append(lblCName);
lblCName.select();
});

Try This one
function EditContent(){
var companyName = $('.text-cname').text();
var lblCName = $('<input id="attrCName" type="text" value="' + companyName + '" />');
if (companyName != "") {
$('.text-cname').text('').append(lblCName);
}
lblCName.select();
}
function SaveContent(){
var text = $('#attrCName').val();
$('#attrCName').parent().text(text);
$('#attrCName').remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="companyName">
<label class="text-cname"><b>Company</b></label>
</div>
<div class="row center-block">
<input type="submit" class="btn btn-success" value="Save" id="btnSave" onclick="SaveContent()" />
<input type="button" id="edit" class="btn btn-primary" value="Edit" onclick="EditContent()" />
</div>

Increment php variable with the help of javascript?

I have a form with an input textbox and a link to add another input textbox.
The first input textbox has the label Artist1.
When I click the link to add another input textbox, I want the label to be Artist2, if I click again Artist3 and so on.
I have the following link:
Add another
and as I click on the link it executes this javascript function:
<script type="text/javascript">
$(function() {
var scntDiv = $('#p_scentsHeadliners');
var i = $('#p_scentsHeadliners').size() + 1;
$('#addScntHeadliners').bind('click', function() {
//$().appendTo(scntDiv);
$('<p id="newp'+i+'"></p>').appendTo(scntDiv);
var html = '<br /><?php echo $this->Form->input('Artist'.$qtd_headliners,['class="form-control" rows="7" placeholder="e.g. Day 1" style="max-width: 150px; max-height: 200px;"']); ?><br /><label for="formGroupExampleInput2">Photo</label><div class="fileupload fileupload-new" data-provides="fileupload"><span class="btn btn-primary btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file" name="file"/></span><span class="fileupload-preview"></span>×</div>Remove';
var succss = $("#newp"+i).append(html)
$('#remScntHeadliners'+ i ).on('click', function() {
$(this).parent().remove();
return false;
});
i++;
return false;
});
});

The solution as sugested by #madalinivascu was to go full js! :)
<script type="text/javascript">
$(function() {
var scntDiv = $('#p_scentsHeadliners');
var i = $('#p_scentsHeadliners').size() + 1;
var headlinersqtd = <?php echo $qtd_headliners; ?>;
$('#addScntHeadliners').bind('click', function() {
//$().appendTo(scntDiv);
$('<p id="newp'+i+'"></p>').appendTo(scntDiv);
headlinersqtd++;
var html = '<br /><label for="artist1">Artist '+ headlinersqtd+'</label><input type="text" name="Artist'+headlinersqtd+'" class="form-control" rows="7" placeholder="e.g. Day 1" style="max-width: 150px; max-height: 200px;" ="class="form-control" "="" id="Artist'+headlinersqtd+'"><br /><label for="formGroupExampleInput2">Photo</label><div class="fileupload fileupload-new" data-provides="fileupload"><span class="btn btn-primary btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file" name="file"/></span><span class="fileupload-preview"></span>×</div>Remove';
var succss = $("#newp"+i).append(html)
$('#remScntHeadliners'+ i ).on('click', function() {
$(this).parent().remove();
return false;
});
i++;
return false;
});
});

Dynamically add and remove TextBoxes and get value of dynamic TextBox using jQuery and display it in a textbox

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" />

Add textbox via Jquery is not working in chrome

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;
});
});