html Unlimited hierarchy input to form - javascript

I want to add form for adding new categories. Categories might have infinitive sub categories.
$(document).ready(function () {
var max_fields = 15; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function (e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="input_fields_wrap_sec"><input type="text" name="mytext[]" placeholder="Sub-Category title"/>\n\
<input type="submit" name="submit1" value="Add Sub-Sub-Category" class="add_field_button" >\n\
Remove</div>'
); //add input box
}
});
$(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST">
<div class="input_fields_wrap">
<p>Please enter the Category Title</p>
<input type="text" name="mytext[]" placeholder="Category title">
<input type="submit" name="submit1" value="Add Sub-Category" class="add_field_button" >
</div>
<input type="submit" name="submit" value="submit">
</form>
Now I have form like this and when I press "add sub-sub category" it should appear new "sub-sub category" input with buttons: "add sub-sub-sub category" and "remove"
It should be like this, the deep of categories is infinitive

Labas!
You could try something like this:
function getValueText(level) {
let i = 0
let text = "Add ";
while (i < level) {
text += "sub-"
i++;
}
return text + "category";
}
function appendInnerCategory(level, element) {
var myDiv = document.createElement("div");
myDiv.className = "level-" + level
var btn = document.createElement("input");
btn.type = "button";
btn.value = getValueText(level);
btn.addEventListener("click", function(event) {
appendInnerCategory(level + 1, event.target.parentNode);
});
var textBox = document.createElement("input");
textBox.type = "text";
myDiv.appendChild(textBox);
myDiv.appendChild(btn);
element.appendChild(myDiv);
}
appendInnerCategory(0, document.querySelector('.wrapper'));
HTML:
<div class="wrapper"></div>
Fiddle: http://jsfiddle.net/7L382gow/
Updated fiddle to maintain a structure object, while manipulating the DOM.
Submit will print the resulting hierarchy to console.
http://jsfiddle.net/bqk6pmjg/

Related

Hide and Show button not working after appending

I have a simple method to hide and show. I tried to use the live() function and even this method is not working.
I want to append the <div> and with every <div> there should be a hide and show button. Also, the <div> should hide when I click on hide.
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function() { //on add input button click
if (x <= max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div id="myclass""><input type="text" name="mytext[]"/><button onclick class="hide_field">Hide</button><button onclick class="show_field">show</button></div>');
}
});
});
$("#myclass").on("click", ".hide_field", function() {
$(this).hide();
});
$("#myclass").on("click", ".show_field", function() {
$(this).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Add Comment</button>
<br>
<div id="myclass"><input type="text" name="mytext[]">
</div>
</div>
Implementing the changes proposed by matthias_h:
using class instead of id
using three argument form of on click handler
target the input by using $(this).closest
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initial text box count
$(add_button).click(function() { //on add input button click
if (x <= max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="myclass""><input type="text" name="mytext[]"/><button onclick class="hide_field">Hide</button><button onclick class="show_field">Show</button></div>');
}
});
});
$(document.body).on("click", ".myclass .hide_field", function() {
$(this).closest("div").children("input").hide();
});
$(document.body).on("click", ".myclass .show_field", function() {
$(this).closest("div").children("input").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Add Comment</button>
<br>
<div class="myclass"><input type="text" name="mytext[]">
</div>
</div>

Dynamically remove field button not working properly

Here is my code. I am able to add new field and appending the new field and remove button. There is two problem.
Remove button is not appending properly. It should append just after the
strength every time.
It Should remove respected input fields salt field and Strength field of every column.
$(document).ready(function() {
var max_fields = 100; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
var y = x - 1;
$(wrapper).append('<div class="input-field col s6"><input class="salt" id="salt' + y + '" name="drugs[' + y + '][salt]" type="text" required><label for="salt' + y + '">Salt/Drugs</label></div><div class="input-field col s6"><input class="strength" id="strength' + y + '" name="drugs[' + y + '][strength]" type="text" required><label for="strength' + y + '">Strength</label></div>'+'</div>'+' <div class="s4"><i class="material-icons">remove_circle</i></div>');
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent().remove();
x--;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row input_fields_wrap">
<div class="input-field col s4">
<input class="salt" id="salt" name="drugs[0][salt]" type="text" required>
<label for="salt">Salt/Drugs</label>
</div>
<div class="input-field col s4">
<input class="strength" id="strength" name="drugs[0][strength]" type="text" required>
<label for="strength">Strength</label>
</div>
<div class="s4">
<button class="btn btn-large light-blue add_field_button">Add more salt/drugs</button>
</div>
</div>
I want it to be like this
Based on the link in the comment, it is better to restructure the htmlString.
You can try the following way:
$(document).ready(function() {
var max_fields = 100; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
var y = x - 1;
$(wrapper).prepend('<div class="input-field col s6"><input placeholder="Salt/Drugs" class="salt" id="salt' + y + '" name="drugs[' + y + '][salt]" type="text" required><input placeholder="Strength" class="strength" id="strength' + y + '" name="drugs[' + y + '][strength]" type="text" required><i class="material-icons">remove_circle</i></div></div>');
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent().remove();
x--;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row input_fields_wrap">
<div class="input-field col s4">
<input placeholder="Salt/Drugs" class="salt" id="salt" name="drugs[0][salt]" type="text" required>
<input placeholder="Strength" class="strength" id="strength" name="drugs[0][strength]" type="text" required>
</div>
<div class="s4">
<button class="btn btn-large light-blue add_field_button">Add more salt/drugs</button>
</div>
</div>
Dynamically generated elements do not respond when listening the event directly, you have to listen to the DOM on them like
$(document).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent().remove();
x--;
})

Remove parent div on button press

trying to create a dynamic button system to add/remove inputs on clicks. I have the addButton working but not the deleteButton. What am I missing?
$(document).ready(function() {
var maxFields = 20;
var addButton = $('#plusOne');
var deleteButton = $('#minusOne');
var wrapper = $('#userNumbers');
var fieldInput = '<div><input type="text" name="persons" id="persons"/></div>';
var x = 1;
$(addButton).click(function () {
if (x < maxFields) {
x++;
$(wrapper).append(fieldInput);
}
});
$(deleteButton).click(function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="plusOne">+</button>
<button type="button" id="minusOne">-</button>
<div id="userNumbers">
<p>
<input type="text" id="person" name="person">
</p>
</div>
The problem is, that $(this) inside the delete button handler refers to the minus button. That minus button is not inside each of the items (It's at the top. and doesn't have a parent div), so you need to reference the element you want to delete another way. In my case below, I'm selecting the last <div> in $(wrapper):
$(document).ready(function() {
var maxFields = 20;
var addButton = $('#plusOne');
var deleteButton = $('#minusOne');
var wrapper = $('#userNumbers');
var fieldInput = '<div><input type="text" name="persons" id="persons"/></div>';
var x = 1;
$(addButton).click(function () {
if (x < maxFields) {
x++;
$(wrapper).append(fieldInput);
}
});
$(deleteButton).click(function(e) {
e.preventDefault();
$(wrapper).find('div:last').remove();
x--;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="plusOne">+</button>
<button type="button" id="minusOne">-</button>
<div id="userNumbers">
<p>
<input type="text" id="person" name="person">
</p>
</div>
Also you can do it with pure JS using child Nodes. :D
Sometimes pure JS is beater than JQ
Explanation:
remove is a new function. It's a shortcut, making it simpler to remove an element without having to look for the parent node. It's unfortunately not available on old versions of Internet Explorer so, unless you don't want to support this browser, you'll have to use removeChild.
$(document).ready(function() {
var maxFields = 20;
var addButton = $('#plusOne');
var deleteButton = $('#minusOne');
var wrapper = $('#userNumbers');
var fieldInput = '<div><input type="text" name="persons" id="persons"/></div>';
var x = 1;
$(addButton).click(function () {
if (x < maxFields) {
x++;
$(wrapper).append(fieldInput);
}
});
$(deleteButton).click(function(e) {
e.preventDefault();
var myNode = document.getElementById("userNumbers");
i=myNode.childNodes.length - 1;
if(i>=0){
myNode.removeChild(myNode.childNodes[i]);
x--;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="plusOne">+</button>
<button type="button" id="minusOne">-</button>
<div id="userNumbers">
<p>
<input type="text" id="person" name="person">
</p>
</div>
Try below solution, I care about the back end also because you have to send the data to back end developer so you have to give the array name for input fields such as name="person[]". anyway you can try this solution also.
$(document).ready(function(){
var static_html = '<input type="text" name="person[]" class="input_fields" />';
$("#plus").click(function(){
if($(".input_fields").length < 20 )
$("#dynamic_field_container").append(static_html);
});
$("#minus").click(function(){
if($(".input_fields").length > 1 )
$(".input_fields:last").remove();
else
alert("This is default field so u can't delete");
});
});
.input_fields{
display:block;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="fa fa-plus fa-4x" id="plus"> </span>
<span class="fa fa-minus fa-4x" id="minus"> </span>
<div id="dynamic_field_container">
<input type="text" name="person[]" class="input_fields" />
</div>

Automated numbers?

I'm trying to make a add more field. So when I press add more button it should add a number 1. textfield and a dropdown menu. and if you press once more it should do 2. textfield and a dropdown menu.
I have created this code to make a new field but the counter will not match if I delete an entry in the middle
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="mytext[]"/>Ta bort</div>'); //add input box
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Lägg till fler svar</button>
<div>
<input type="text" name="mytext[]">
</div>
</div>
If it is just for displaying purpose, use CSS counter:
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x <= max_fields) { //max input box allowed
x++;
$(wrapper).append('<div class="count"><input type="text" name="mytext[]"/><select><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>Ta bort</div>'); //add input box
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
.input_fields_wrap {
counter-reset: count;
}
.count:before {
counter-increment: count;
content: counter(count) ".";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Lägg till fler svar</button>
<div>
<input type="text" name="mytext[]">
</div>
</div>

How to jQuery - Add button insert maximum 10 new inputs

I want to click on my button and insert every click new input and when up to 10 just stop . I have done with one input lets check my code :
HTML code
<div class="form-group ">
<label for="email2" class="col-sm-3 control-label">Occupants Email Address :</label>
<div class="col-sm-3">
<input type="email" class="form-control" id="email2" placeholder="Email">
</div>
<div class="col-sm-2">
<span class="addMore">ADD</span>
</div>
</div>
<div class="form-group addmore2">
<label for="emailOccup2" class="col-sm-3 control-label">Occupants Email Address 2 :</label>
<div class="col-sm-3">
<input type="email" class="form-control" id="emailOccup2" placeholder="Email">
</div>
<div class="col-sm-2 removeEmail">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> remove
</div>
CSS
.addmore2 {
display: none;
}
jQuery
$('.addMore').click(function() {
$('.addmore2').slideDown();
})
$('.removeEmail').click(function() {
$('.addmore2').slideUp();
});
I know how to insert just one , somebody help what function I need to use to make it uo to 10.
Thanks!
Check out the implementation below, which was heavily adapted from Add/Remove Input Fields Dynamically with jQuery.
Your goal here is to keep track of the number of fields that have been added. Once the number of fields (represented by x) exceeds ten, the append method will no longer function.
On each click, we are incrementing the number of fields by one.
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initial text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append(
'<div class="form-group"><label>Occupants Email Address :</label><div class="col-sm-3"><input type="text" name="mytext[]"/></div>Remove</div>'
); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
Here's the corresponding HTML
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div class="form-group"><label>Occupants Email Address :</label><div class="col-sm-3"><input type="text" name="mytext[]"/></div>
</div>
Here's a working jsFiddle: jsFiddle
here is a basic example
var iteration = 0,
addEmail = document.querySelector("#addEmail");
addEmail.addEventListener("click", function(){
if(iteration < 10){
var input =document.createElement("input");
input.type = "email";
input.placeholder = "Email"
document.body.appendChild(input);
iteration++
}
},false);
<input id=addEmail type=button value="add Email input" />
Using jquery you could do something like
var iteration = 0;
$("#addEmail").click(function() {
if (iteration < 10) {
var input = document.createElement("input");
input.type = "email";
input.placeholder = "Email"
document.body.appendChild(input);
iteration++
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id=addEmail type=button value="add Email input" />

Categories

Resources