Develop Reference

Issue with removing cloned element once created

I have code that clones/adds a div element and it's children when a button is clicked, however, when the remove button is clicked, it doesn't seem to be removing the closest div to the remove button. Can you help with this.
$(function() {
//on click
$(".btn-primary").on("click", function() {
//alert($(".input-group").length)
var
//get length of selections
length = $(".input-group").length,
//create new id
newId = "selection-" + length,
//clone first element with new id
clone = $("#selection").clone().attr("id", newId);
clone.children('.show-tick').attr('id', 'select-' + length++);
//append clone on the end
$("#selections").append(clone);
});
$(".btn-secondary").on("click", function() {
$(this).closest('.input-group').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selections">
<div class="input-group" id="selection">
<span class="input-group-addon">
<i class="icon wb-menu" aria-hidden="true"></i>
</span>
<select class="show-tick" data-plugin="select2" id="select">
<option>True</option>
<option>False</option>
</select>
</div>
</div>
<button class="btn btn-primary" type="button" style="margin-left:30px;">Add new selection</button>
<button class="btn btn-secondary" type="button" style="margin-left:30px;">Remove new selection</button>

To remove last select item you should use:
$("#selections").find('select').last().remove();
In your function:
$(".btn-secondary").on("click", function() {
$("#selections").find('select').last().remove();
});

or do just
$('#selections div:last').remove();

You can use :last-child selector:
$('.input-group:last-child').remove();

Use the last method $("#selections").children("div").last().remove();
$(function() {
//on click
$(".btn-primary").on("click", function() {
//alert($(".input-group").length)
var
//get length of selections
length = $(".input-group").length,
//create new id
newId = "selection-" + length,
//clone first element with new id
clone = $("#selection").clone().attr("id", newId);
clone.children('.show-tick').attr('id', 'select-' + length++);
//append clone on the end
$("#selections").append(clone);
});
$(".btn-secondary").on("click", function() {
$("#selections").children("div").last().remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selections">
<div class="input-group" id="selection">
<span class="input-group-addon">
<i class="icon wb-menu" aria-hidden="true"></i>
</span>
<select class="show-tick" data-plugin="select2" id="select">
<option>True</option>
<option>False</option>
</select>
</div>
</div>
<button class="btn btn-primary" type="button" style="margin-left:30px;">Add new selection</button>
<button class="btn btn-secondary" type="button" style="margin-left:30px;">Remove new selection</button>

There is various way you can do inside your click handler:
$("#selections .input-group:last-child").remove();
// Or
$(".input-group:last-child", "#selections").remove();
// Or
$(".input-group", "#selections").last().remove();
Using the first way:
$(function() {
//on click
$(".btn-primary").on("click", function() {
//alert($(".input-group").length)
var
//get length of selections
length = $(".input-group").length,
//create new id
newId = "selection-" + length,
//clone first element with new id
clone = $("#selection").clone().attr("id", newId);
clone.children('.show-tick').attr('id', 'select-' + length++);
//append clone on the end
$("#selections").append(clone);
});
$(".btn-secondary").on("click", function() {
$("#selections .input-group:last-child").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selections">
<div class="input-group" id="selection">
<span class="input-group-addon">
<i class="icon wb-menu" aria-hidden="true"></i>
</span>
<select class="show-tick" data-plugin="select2" id="select">
<option>True</option>
<option>False</option>
</select>
</div>
</div>
<button class="btn btn-primary" type="button" style="margin-left:30px;">Add new selection</button>
<button class="btn btn-secondary" type="button" style="margin-left:30px;">Remove new selection</button>
You should also add a check that, there is at least 1 .input-group element left for add button to work, because if there is no .input-group element, which element you'll clone? So, add a check like:
$(function() {
//on click
$(".btn-primary").on("click", function() {
//alert($(".input-group").length)
var
//get length of selections
length = $(".input-group").length,
//create new id
newId = "selection-" + length,
//clone first element with new id
clone = $("#selection").clone().attr("id", newId);
clone.children('.show-tick').attr('id', 'select-' + length++);
//append clone on the end
$("#selections").append(clone);
});
$(".btn-secondary").on("click", function() {
var length = $(".input-group").length;
if (length === 1) {
alert("Can not delete the last element");
return;
}
$("#selections .input-group:last-child").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selections">
<div class="input-group" id="selection">
<span class="input-group-addon">
<i class="icon wb-menu" aria-hidden="true"></i>
</span>
<select class="show-tick" data-plugin="select2" id="select">
<option>True</option>
<option>False</option>
</select>
</div>
</div>
<button class="btn btn-primary" type="button" style="margin-left:30px;">Add new selection</button>
<button class="btn btn-secondary" type="button" style="margin-left:30px;">Remove new selection</button>

You want the last .input-group so replace the last line with this:
$('.input-group').last().remove();
The buttons are actually siblings of #selections so the point of reference (this) doesn't need to be from the button itself. .closest() would target ancestor elements of the button and the .input-group is more like a "nephew/niece" relation to the buttons. Using the parent container #selections or the collection of .input-group is sufficient.
Edit
Added a condition that should the $('.input-group').length be 1, that it be spared from being deleted, otherwise, there'd be nothing to clone.
Demo
$(function() {
//on click
$(".btn-primary").on("click", function() {
//alert($(".input-group").length)
var
//get length of selections
length = $(".input-group").length,
//create new id
newId = "selection-" + length,
//clone first element with new id
clone = $("#selection").clone(true, true).attr("id", newId);
clone.find('.show-tick').attr('id', 'select-' + length++);
//append clone on the end
$("#selections").append(clone);
});
$(".btn-secondary").on("click", function() {
if ($(".input-group").length > 1) {
$('.input-group').last().remove();
} else {
return false;
}
});
});
<div id="selections">
<div class="input-group" id="selection">
<span class="input-group-addon">
<i class="icon wb-menu" aria-hidden="true"></i>
</span>
<select class="show-tick" data-plugin="select2" id="select">
<option>True</option>
<option>False</option>
</select>
</div>
</div>
<button class="btn btn-primary" type="button" style="margin-left:
30px;">
Add new selection
</button>
<button class="btn btn-secondary" type="button" style="margin-left:
30px;">
Remove new selection
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Input field value returned empty after entering some value

The requirement is to dynamically add each li element as and when user click on "add row" button". And when User enters any value in field1, an ajax call with this value as parameter is made to server and the return value is set in the next 2 fields.
In focus lost method, when I try to retrieve the user entered value, the input field value is always returned as EMPTY or the default value which I set in the source code and not the user modified value.
The row ids are given unique like f1_edit_row1, f1_edit_row2 etc. Please let me know on why I dont get the value.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script src="js/jquery-1.12.4.js"></script>
<title>Insert title here</title>
</head>
<body>
<ul id="Rows_Edit">
<li id="EditRow1">
<div class="row">
<div class="col-md-3 Field1">
<span>Field1</span><input type="text" class="form-control field1"
id="f1_edit_row1" onfocusout="focusLost_edit('1')" name="field1"
placeholder="1234">
</div>
<div class="col-md-3 Field2">
<span>Field2</span><input type="text" class="form-control"
id="f2_edit_row1" name="field2" placeholder="123"
disabled="disabled">
</div>
<div class="col-md-5 name">
<input type="text" class="form-control" id="field3_edit_row1"
placeholder="ABC" disabled="disabled">
</div>
<div class="col-md-1 icons" id="btn_row1">
<input type="button" class="addbtn" id="btn_row1" name="Add" value="Add Row" onclick="addButtonClick()">
<!-- <i class="fa fa-plus-square" id="btn1_edit" aria-hidden="true"></i> -->
</div>
</div>
</li>
</ul>
<div></div>
<div></div>
<div></div>
<div class="updatebutton">
<input type="submit" id='submit-button_edit' class="btn btn-default" value="Update" onclick="updateBtnClick()">
</div>
<div class="cancelbutton">
<input type="button" id='cancel-button_edit' class="btn btn-default" value="Cancel">
</div>
</body>
</html>
<script type="text/javascript">
function focusLost_edit(rowNo){
var id = "f1_edit_row" + rowNo;
var value = document.getElementById(id).value;
console.log(id, " Value:[", value, "]");
// API Code here
var returnvalue = "TEST";
var id1 = "#f2_edit_row" + rowNo;
$(id1).val(returnvalue);
console.log(id1, " Return Value:[", returnvalue, "]");
var returnvalue1 = "TESTING";
var id2 = "#field3_edit_row" + rowNo;
$(id2).val(returnvalue1);
console.log(id2, " Return Value1:[", returnvalue1, "]");
}
function addButtonClick(){
console.log("Add Button Click");
// Code to add rows here
}
function updateBtnClick(){
console.log("Update Button Click");
$('ul#Rows_Edit li').each(function() {
var id = $(this).attr('id');
var rowNo = id.substring(7);
var id1 = "#f1_edit_row" + rowNo;
var value1 = $(id1).val();
var id2 = "#f2_edit_row" + rowNo;
var value2 = $(id2).val();
var id3 = "#field3_edit_row" + rowNo;
var value3 = $(id3).val();
console.log("Value1:[", value1, "] Value2:[", value2, "]Value3:[", value3), "]";
});
// Code to send value to server here
}
</script>

Use this in your function call.
function focusLost_edit(rowNo){
var id = "f1_edit_row" + rowNo;
var value = document.getElementById(id).value;
console.log(id, " Value:[", value, "]");
// API Code here
var returnvalue = "TEST";
var id1 = "#f2_edit_row" + rowNo;
$(id1).val(returnvalue);
console.log(id1, " Return Value:[", returnvalue, "]");
var returnvalue1 = value;
var id2 = "#field3_edit_row" + rowNo;
$(id2).val(returnvalue1);
console.log(id2, " Return Value1:[", returnvalue1, "]");
}
function addButtonClick(){
console.log("Add Button Click");
// Code to add rows here
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="shipToRows_Edit">
<li id="EditRow1">
<div class="row">
<div class="col-md-3 Field1">
<span>Field1</span><input type="text" class="form-control field1"
id="f1_edit_row1" onfocusout="focusLost_edit('1')" name="field1"
placeholder="1234">
</div>
<div class="col-md-3 Field2">
<span>Field2</span><input type="text" class="form-control"
id="f2_edit_row1" name="field2" placeholder="123"
disabled="disabled">
</div>
<div class="col-md-5 name">
<input type="text" class="form-control" id="field3_edit_row1"
placeholder="ABC" disabled="disabled">
</div>
<div class="col-md-1 icons" id="btn_row1">
<input type="button" class="addbtn" id="btn_row1" name="Add" value="Add Row" onclick="addButtonClick()">
<!-- <i class="fa fa-plus-square" id="btn1_edit" aria-hidden="true"></i> -->
</div>
</div>
</li>
</ul>

How to increment the input field names in the middle of them

http://www.quirksmode.org/dom/domform.html
I am trying to implement this extend form function in my project. Since I am compiling with CakePHP naming convention, in my extend form I have 2 field names:
[Student][0][age]
[Student][0][grade]
The script doesn't work because it is appending the counter only at the end of a field name all alike like this: fieldName + counter, whereas I am trying to increment, as you might have guessed it, like this:
[Student][1][age]
[Student][1][grade]
[Student][2][age]
[Student][2][grade]
I am new to Javascript and hopefully someone can advise how to work this out.
HTML:
<span id="readroot" style="display: none">
<input class="btn btn-default" type="button" value="Remove review" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
<br /><br />
<div class="row">
<div class="col-lg-3">
<div class="form-group required"><label for="Student1Age">Age</label><input name="data[Student][0][age]" class="form-control" placeholder="Age" maxlength="11" type="text" id="Student1Age" required="required"/></div>
</div>
<div class="col-lg-3">
<div class="form-group required">
<label for="Student1Grade">級別</label>
<select name="data[Student][0][grade]" class="form-control" id="Student1Grade" required="required">
<option value="">Please Select</option>
<option value="1">Grade 1</option>
<option value="2">Grade 2</option>
</select>
</div>
</div>
</div></span>
<span id="writeroot"></span><input class="btn btn-default" type="button" onclick="moreFields()" value="Give me more fields!" />
Javascript:
var counter = 0;
function moreFields() {
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}

You have to replace this one line like follows.
Yours:
newField[i].name = theName + counter;
New one:
newField[i].name = "[Student][" + counter + "][" + theName + "]";
I made a working sample page out of your script. Check the following link.
http://sugunan.net/demo/extend_form.php

Create HTML element using Form Input value via jQuery

I am trying to implement automatically HTML using form value.
When user enter the information in the form, the JS will create the correspond HTML for him.
For example.
<div class="row" id="1">
<div class="form-group col-lg-2">
<select class="form-control" name="tag">
<option value="p" selected>p</option>
<option value="br">br</option>
</select>
</div>
<div class="form-group col-lg-2">
<select class="form-control" name="class">
<option value="Day" selected>Day</option>
<option value="BlockTime">BlockTime</option>
<option value="BlockTitle">BlockTitle</option>
<option value="Session">Session</option>
<option value="Person">Person</option>
<option value="Firm">Firm</option>
</select>
</div>
<div class="form-group col-lg-7">
<textarea class="form-control" rows="3" name="content"></textarea>
</div>
<div class="form-group col-lg-1">
<input type="button" class="btn btn-default" onclick="addLine()" value="Add">
</div>
</div>
The user selected P, Day, Test message, and the press "Add" button, the button will call function addLine(). The main part is below, I didn't make it right.
var currentTag = currentLine.find("select[name='tag'] option:selected").text();
var currentClass = currentLine.find("select[name='class'] option:selected").text();
var currentText = currentLine.find("textarea").val();
var new_content = $("<currentTag></currentTag>").addClass(currentClass).html(currentText);
Now the currentTag will get the value "p", currentClass will get "Day", currentText do get "Test message", this has been done.
This is what I want, the jQuery creates HTML code like this:
<p class="Day">Test message</p>
And I want to store the HTML code to a variable called new_content. ...

If you have a container for these elements, you could just append them to it:
First you want to set your new line as a variable:
var newElements = [];
var i = 0; //Make an index counter so you can use it later if you want to. This is optional
/* Do your selection script */
var htmlElement = "<" + currentTag + " class='" + currentClass + "'>" + currentText + "</" + currentTag + ">";
newElement.push(htmlElement, i);
$('.container').append(htmlElement);
i++; //increment your i to create an index
/* Make sure all of this is inside your selection script. */

Dynamically add or remove input box using jQuery

The problem in my case is I can dynamically add / remove input boxes, but the problem is when I manually add a set of input box and remove button instead of press add button to create one, it can not remove it.
Is it possible to have 3 sets of input boxes but 2 remove buttons?
Thank you for any kind of help.
JSFiddle
<script>
$(document).ready(function() {
$("#add").click(function() {
var intId = $("#buildyourform div").length + 1;
var label = $("<label>Field Name</label>");
var labelType = $("<label>Field Type</label>");
var labelReq = $("<label>Require</label>");
var labelTag = $("<label>Tag</label>");
var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
var fName = $("<input type=\"text\" name=\"inputName[]\" class=\"required\" />");
var fTag = $("<input type=\"text\" name=\"inputTag[]\" class=\"required\" />");
var fReq = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"1\">Yes</option><option value=\"0\">No</option></select>");
var fType = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"textbox\">Text</option><option value=\"textarea\">Paragraph</option></select>");
var removeButton = $("<input type=\"button\" class=\"remove\" value=\"Remove\" />");
removeButton.click(function() {
$(this).parent().remove();
});
fieldWrapper.append(label);
fieldWrapper.append(fName);
fieldWrapper.append('<br>');
fieldWrapper.append(labelType);
fieldWrapper.append(fType);
fieldWrapper.append('<br>');
fieldWrapper.append(labelReq);
fieldWrapper.append(fReq);
fieldWrapper.append('<br>');
fieldWrapper.append(labelTag);
fieldWrapper.append(fTag);
fieldWrapper.append('<br>');
fieldWrapper.append(removeButton);
$("#buildyourform").append(fieldWrapper);
});
});
</script>
</head>
<body>
<form id="config" method="post" action="config.php" >
<fieldset id="buildyourform">
<legend>Build your own form!</legend>
<!-- I manually create a set of input box here -->
<div class="fieldwrapper" id="field1"><label>Field Name</label><input type="text" name="inputName[]" class="required"><br><label>
Field Type</label><select class="fieldtype">
<option value="checkbox">Checked</option><option value="textbox">Text</option><option value="textarea">Paragraph</option></select><br><label>Require</label>
<select class="fieldtype"><option value="checkbox">Checked</option>
<option value="1">Yes</option><option value="0">No</option></select><br><label>
Tag</label><input type="text" name="inputTag[]" class="required"><br><input type="button" class="remove" value="Remove"></div>
<!-- I manually create a set of input box here -->
<input type="text" name="input[]" value="test">
</fieldset>
<input type="button" value="Add a field" class="add" id="add" />
<input type="submit" value="Submit">
</form>
</html>

Try setting the remove button actions when the document is loaded.
Try it here or use the code below.
<script>
$(document).ready(function() {
$('.remove').click(function(){
$(this).parent().remove();
});
$("#add").click(function() {
var intId = $("#buildyourform div").length + 1;
var label = $("<label>Field Name</label>");
var labelType = $("<label>Field Type</label>");
var labelReq = $("<label>Require</label>");
var labelTag = $("<label>Tag</label>");
var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
var fName = $("<input type=\"text\" name=\"inputName[]\" class=\"required\" />");
var fTag = $("<input type=\"text\" name=\"inputTag[]\" class=\"required\" />");
var fReq = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"1\">Yes</option><option value=\"0\">No</option></select>");
var fType = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"textbox\">Text</option><option value=\"textarea\">Paragraph</option></select>");
var removeButton = $("<input type=\"button\" class=\"remove\" value=\"Remove\" />");
removeButton.click(function() {
$(this).parent().remove();
});
fieldWrapper.append(label);
fieldWrapper.append(fName);
fieldWrapper.append('<br>');
fieldWrapper.append(labelType);
fieldWrapper.append(fType);
fieldWrapper.append('<br>');
fieldWrapper.append(labelReq);
fieldWrapper.append(fReq);
fieldWrapper.append('<br>');
fieldWrapper.append(labelTag);
fieldWrapper.append(fTag);
fieldWrapper.append('<br>');
fieldWrapper.append(removeButton);
$("#buildyourform").append(fieldWrapper);
});
});
</script>
</head>
<body>
<form id="config" method="post" action="config.php" >
<fieldset id="buildyourform">
<legend>Build your own form!</legend>
<!-- I manually create a set of input box here -->
<div class="fieldwrapper" id="field1"><label>Field Name</label><input type="text" name="inputName[]" class="required"><br><label>
Field Type</label><select class="fieldtype">
<option value="checkbox">Checked</option><option value="textbox">Text</option><option value="textarea">Paragraph</option></select><br><label>Require</label>
<select class="fieldtype"><option value="checkbox">Checked</option>
<option value="1">Yes</option><option value="0">No</option></select><br><label>
Tag</label><input type="text" name="inputTag[]" class="required"><br><input type="button" class="remove" value="Remove"></div>
<!-- I manually create a set of input box here -->
<input type="text" name="input[]" value="test">
</fieldset>
<input type="button" value="Add a field" class="add" id="add" />
<input type="submit" value="Submit">
</form>
</html>​

This is an excellent case to use templates as it makes the hole thing much more maintainable rather than create the entire form div in JavaScript.
Live code: http://jsbin.com/uzelix/edit#javascript,html
HTML
<fieldset id="buildyourform">
<legend>Build your own form!</legend>
<div id="fields"></div>
</fieldset>
<button class="btn-add">Add field</button>
<!-- I manually create a set of input box here -->
<script id="fieldTemplate" type="text/x-jquery-tmpl">
<div class="fieldwrapper" id="field_${Id}">
<label>Field Name</label>
<input type="text" name="fieldname_${Id}" class="required">
<label>Field Type</label>
<select class="fieldtype_${Id}">
<option value="checkbox">Checked</option>
<option value="textbox">Text</option>
<option value="textarea">Paragraph</option>
</select>
<label>Require</label>
<select class="fieldtype_${Id}">
<option value="checkbox">Checked</option>
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<label>Tag</label>
<input type="text" name="fieldtag_${Id}" class="required">
<div class="control-button">
<button class="btn-remove">Remove</button>
</div>
</div>
</script>
<!-- I manually create a set of input box here -->
jQuery
$(function(){
$(".btn-add").click(function() {
addField();
});
$(".btn-remove").live("click", function() {
$(this).closest(".fieldwrapper").slideUp("slow", function() {
$(this).remove();
clearRemove();
});
});
// add first field
addField();
});
function addField() {
var i = $(".fieldwrapper").length;
$("#fieldTemplate").tmpl({ Id: i }).appendTo("#fields");
clearRemove();
}
function clearRemove() {
// hide all remove buttons except last one so we don't get
// multiple ids... or use a counter to keep ids unique.
if($(".fieldwrapper").length > 1) {
$(".btn-remove:last").show();
$(".btn-remove:not(:last)").hide();
}
else
$(".btn-remove").hide();
}