Hide and Show button not working after appending - javascript

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>

Related

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

html Unlimited hierarchy input to form

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/

JQuery disable button when field is equal to a specific number

I am developing a form that can add specific number of fields when the button is clicked and it will be disabled when the number reached the limit of adding text fields.
the problem is when it reaches the limit the button can still be clicked and will disable when you click on the button twice when the text field reached its maximum input boxes allowed
here is my code.
$(document).ready(function() {
var max_fields = 5; //maximum input boxes allowed
var wrapper = $("#healthcard"); //Fields wrapper
var add_button = $("#add_field"); //Add button ID
var x = 0; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x >= max_fields) { //max input box allowed
e.preventDefault();
$(this).toggleClass("disabled");
} else {
x++; //text box increment
$(wrapper).append('<div class="hmo-add' + x + '""><div class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" />Remove</div></div></div>'); //add input box
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$('.hmo-add' + x).remove();
x--;
e.preventDefault();
$('#add_field').toggleClass("disabled");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<div id="healthcard" class="form-group">
<button id="add_field" class="btn btn-primary" type="button" name="hmo">HMO</button>
</div>
</div>
</div>
I think I am missing something in my code that I can't figure out. Please help me.
sorry for bad english.
Thanks,
Your problem is that you need to click the button 6 times to disable it which is wrong , below is a working snippet using the disabled attribute:
When the user reaches the max, I disable the button.
The button click is register to work on the button that is not disabled using not(':disabled')
When the user removes a div, the button is enabled again
$(document).ready(function() {
var max_fields = 5; //maximum input boxes allowed
var wrapper = $("#healthcard"); //Fields wrapper
var add_button = $("#add_field"); //Add button ID
var x = 0; //initlal text box count
$("#add_field").not(':disabled').click(function(e) { //on add input button click
e.preventDefault();
x++; //text box increment
if (x == max_fields)
{
$(this).attr("disabled", true);
}
$(wrapper).append('<div class="hmo-add' + x + '""><div class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" />Remove</div></div></div>'); //add input box
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
$('.hmo-add' + x).remove();
x--;
$('#add_field').attr("disabled", false);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<div id="healthcard" class="form-group">
<button id="add_field" class="btn btn-primary" type="button" name="hmo">HMO</button>
</div>
</div>
</div>
Check x right after append:
$(add_button).click(function(e) { //on add input button click
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="hmo-add' + x + '""><div class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" />Remove</div></div></div>'); //add input box
if (x == max_fields)
{
$(this).addClass("disabled");
}
}
});
DEMO
Instead of toggleClass use addClass while disabling and removeClass while enabling as below:
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x >= max_fields) { //max input box allowed
e.preventDefault();
$(this).addClass("disabled");//addClass
} else {
x++; //text box increment
$(wrapper).append('<div class="hmo-add' + x + '""><div class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" />Remove</div></div></div>'); //add input box
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$('.hmo-add' + x).remove();
x--;
e.preventDefault();
$('#add_field').removeClass("disabled"); //removeClass
})
This is what you need:
$(document).ready(function() {
var max_fields = 5; //maximum input boxes allowed
var wrapper = $("#healthcard"); //Fields wrapper
var add_button = $("#add_field"); //Add button ID
var x = 0; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x >= max_fields) { //max input box allowed
$(this).addClass("disabled");
$(this).attr("disabled", "disabled");
} else {
x++; //text box increment
$(wrapper).append('<div class="hmo-add' + x + '""><div class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" />Remove</div></div></div>'); //add input box
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$('.hmo-add' + x).remove();
x--;
$('#add_field').removeClass("disabled");
$('#add_field').removeAttr("disabled");
})
});
I removed the toggleClass to addClass/removeClass as it makes more sense in this situation. I also disabled the button once the limit is reached using the disabled HTML attribute and the attr() function. If you hit the remove button, the disabled class and attribute is removed. I also removed a couple of duplicate e.PreventDefault() calls as they weren't needed.
$(document).ready(function() {
var max_fields = 5; //maximum input boxes allowed
var wrapper = $("#healthcard"); //Fields wrapper
var add_button = $("#add_field"); //Add button ID
var x = 0; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
//if (x >= max_fields) { //max input box allowed
//e.preventDefault();
// $(this).toggleClass("disabled");
//} else {
if(x < max_fields){
x++; //text box increment
$(wrapper).append('<div class="hmo-add' + x + '""><div class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" />Remove</div></div></div>'); //add input box
if(x === max_fields) {
$(this).toggleClass("disabled");
}
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$('.hmo-add' + x).remove();
x--;
e.preventDefault();
$('#add_field').toggleClass("disabled");
})
});
[http://jsfiddle.net/W4Km8/8153/][1] I just updated your code in jsfiddle please check

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