I am adding input field on clicking the button and at the same time giving remove button to remove the input field.However my remove button is not removing the input field instead it takes me to top of page...
<div class="input_fields_wrap">
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Preferred Work Location</label>
<div class="col-md-3">
<input type="text" id="loc" name="Work_Location[]" class="form-control" >
</div>
<button class="add_field_button">Add More Locations</button>
</div>
</div>
and below is the jQuery to add more textbox when I click the button
<script>
$(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 class="form-group"><label class="col-md-3 control-label" for="example-text-input">Preferred Work Location</label><div class="col-md-3"> <input type="text" id="loc" name="Work_Location[]" class="form-control" ></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--;
})
});
</script>
I have an example for you, you can do it easier
function closeMe(element) {
$(element).parent().remove();
}
function addMore() {
var container = $('#list');
var item = container.find('.default').clone();
item.removeClass('default');
//add anything you like to item, ex: item.addClass('abc')....
item.appendTo(container).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="list">
<li class="default" style="display: none;">
<input type="text" /><span style="cursor: pointer;" onclick="closeMe(this);">close</span>
</li>
</ul>
<button onclick="addMore();">Add</button>
Also you can use this:
$(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[]"/>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/1.9.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>
Hope this is helpful for you
Thanks
$(document).ready(function() {
var max = 10;
var wrp= $(".input_fields_wrap");
var addBtn = $(".add_field_button");
var x = 1;
$(addBtn ).click(function(e){
e.preventDefault();
if(x < max){
x++;
$(wrp).append('<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Preferred Work Location</label>
<div class="col-md-3">
<input type="text" id="loc" name="Work_Location[]" class="form-control" >
</div>
Remove</div>');
}
});
$(wrp).on("click",".remove_field", function(e){ /
e.preventDefault();
$(this).parent('div').remove(); x--;
})
});
Related
I have to implement the logic when add button is clicked,it will add the input field and when remove button is clicked it removes the fields, For this requirement code is working fien,but when i add checkbox ,if checkbox is clicked the requirement is that input field should be disabled and all new input fields will be removed,in my case only one input filed removes,i have to remove all fields.
var maxField = 5; //Input fields increment limitation
var add_button = $('#add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div id="fieldhtml"><input type="text" name="socials[]" value="" />
<img src="{{ 'remove-icon.png' | asset_url }}"/></div>'; //New input field html
var x = 1; //Initial field counter is 1
<div class="col-lg-6 col-sm-12">
<div class="input-icons pt-2">
<label for="socials">Socials <span class='req'>*</span></label>
<div class="input-icon">
<i class="plus"></i>
<div class="icon"></div>
<div class="field_wrapper">
<input type="text" class="validate input-field validate-input-structure" data-input-type="text" name="socials[]" value="" id="socials" required />
</div>
<label for="chksocials">
<input type="checkbox" id="chksocials" name="chksocials" />
My business doesn’t have social media
</label>
</div>
</div>
</div>
$(function(){
//Once add button is clicked
$(add_button).click(function(){
//Check maximum number of input fields
if(x < maxField){
x++; //Increment field counter
$(wrapper).append(fieldHTML); //Add field html
}
});
//Once remove button is clicked
$(wrapper).on('click', '.remove_button', function(e){
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
$("#chksocials").click(function () {
if ($(this).is(":checked")) {
$("#add_button").attr("disabled", "disabled");
$("#socials").attr("disabled", "disabled");
$("#fieldhtml").remove();
} else {
$("#socials").removeAttr("disabled");
$("#fieldHTML").removeAttr("disabled");
$("#add_button").removeAttr("disabled");
//$("#fieldhtml").parent('div').show();
$("#socials").focus();
}
});
You need to define the fieldHTML based on the Jquery Documentation.
// HTML
<div class="col-lg-6 col-sm-12">
<div class="input-icons pt-2">
<label for="socials">Socials <span class='req'>*</span></label>
<div class="input-icon">
<a href="" class="add-button" title="Add field" id="add_button">
ADD
</a>
<div class="icon"></div>
<div class="field_wrapper">
<input type="text" class="validate input-field validate-input-structure socials" data-input-type="text" name="socials[]" value="" required />
</div>
<label for="chksocials">
<input type="checkbox" id="chksocials" name="chksocials" />
My business doesn’t have social media
</label>
</div>
</div>
</div>
// JS
const add_button = $('#add_button');
const wrapper = $('.field_wrapper');
$(function(){
const maxField = 5;
let x = 1;
$(add_button).click(function(e){
e.preventDefault();
if(x < maxField){
x++;
// This is to create element in JQUERY
const fieldHTML = $('<div class="fieldhtml"><input type="text" name="socials[]" value="" />REMOVE</div>');
$(wrapper).append(fieldHTML);
}
});
//Once remove button is clicked
$(wrapper).on('click', '.remove_button', function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});
$("#chksocials").click(function () {
if ($(this).is(":checked")) {
wrapper.hide();
} else {
wrapper.show();
$(".socials").focus();
}
});
});
Note : do not use the same HTML ID multiple times, see here.
I add input dynamically and write event for this input. Event work, but all the second inputs are the same s. I want to do event for each other.
JavaScript:
$(document).ready(function() {
var max_fields = 4; //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) {
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input id="test" class="test" type="text" name="mytext[]"/>Remove<br><input id="test2" class="test2" type="text" name="mytext2[]"></div></div>'); //add input box
$(".test").on("input", function () {
$(this).closest('div').find('.test2').val($(this).val());
});
}
});
$(wrapper).on("click", ".remove_field", function (e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
});
$(".test").on("input", function () {
$(this).closest('div').find('.test2').val($(this).val());
});
});
HTML:
<div id="input_fields_wrap" class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input id="test" class="test" type="text" name="mytext[]"></div>
<div><input id="test2" class="test2" type="text" name="mytext2[]"></div>
</div>
may you need to see the demo as above...it works as you need..i maked some changes in class or jQuery...
$(document).ready(function() {
var max_fields = 4; //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) {
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input id="test" class="test dynamic" type="text" name="mytext[]"/>Remove<br><input id="test2" class="test2 dynamic" type="text" name="mytext2[]"></div></div>'); //add input box
$(".test").on("input", function() {
$(this).closest('div').find('.test2').val($(this).val());
});
// Your Event Code Put Here //
// It Find the all input and add event //
}
});
$(wrapper).on("click", ".remove_field", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
});
$(".test").on("input", function() {
$(this).closest('div').find('.test2').val($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input_fields_wrap" class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div>
<input id="test" class="test" type="text" name="mytext[]"/>
<bR/>
<input id="test2" class="test2" type="text" name="mytext2[]"/>
</div>
</div>
You can add a class to all your dynamically created elements and then attach an event listener to the class before the event is actually created in the following manner:
Assuming the class you'll be giving is dynamic:
$(document).on('event','.dynamic',function(){
console.log($(this));
});
UPDATE:
$(document).on('input','.dynamic',function(){
console.log("Typing in input 1");
});
$(document).on('input','.dynamic2',function(){
console.log("Typing in input 2");
});
$(document).ready(function() {
var max_fields = 4; //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) {
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input id="test" class="dynamic" type="text" name="mytext[]"/>Remove<div><input id="test2" class="dynamic2" type="text" name="mytext2[]"></div></div>'); //add input box
}
});
$(wrapper).on("click", ".remove_field", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
And the HTML would be
<div id="input_fields_wrap" class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input id="test" class="dynamic" type="text" name="mytext[]"></div>
<div><input id="test2" class="dynamic" type="text" name="mytext2[]"></div>
</div>
jQuery first find the all tag and add event. so you can need to assign event after add field...
$(document).ready(function() {
var max_fields = 4; //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) {
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input id="test" class="test dynamic" type="text" name="mytext[]"/>Remove<div><input id="test2" class="test2 dynamic" type="text" name="mytext2[]"></div></div>'); //add input box
$('.dynamic').on('event',function(){
// Your Code
});
// Your Event Code Put Here //
// It Find the all input and add event //
}
});
$(wrapper).on("click", ".remove_field", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
});
$(".input_fields_wrap").on("input", "input", function() {
$(".input_fields_wrap .test2").val($(".input_fields_wrap .test").val());
});
});
I want add fisrst name and last name fields dynamically to my form. Currenltly I managed to add one field. but how can I add two fields once.
Ex: fname lastname
fname lastname (X remove)
fname lastname (X remove)
(+ add)
my code
html
below is my html code ser
<div class="input_fields_wrap">
<div><input type="text" name="mytext[]"></div>
// I want to add another field with this
</div>
<button class="add_field_button">Add More Fields</button>
js
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap");
var add_button = $(".add_field_button");
var x = 1;
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++; //text box increment
$(wrapper).append('<div><input type="text" name="mytext[]"/>Remove</div>');
}
});
$(wrapper).on("click",".remove_field", function(e){ e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
Well this will work for you:-
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap");
var add_button = $(".add_field_button");
var fname_lname = '<div>First Name:- <input type="text" name="fname"/>Last Name:- <input type="text" name="fname"/>Remove</div>'
var x = 1;
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++; //text box increment
$(wrapper).append(fname_lname);
}
});
$(wrapper).on("click",".remove_field", function(e){ e.preventDefault(); $(this).parent().remove(); x--;
})
});
checkout the fiddle
https://jsfiddle.net/dhruv1992/em1je2cu/
So first, I removed the hardcoded HTML from your javascript. Then, I moved that to a HIDDEN template element, and just loaded its inner HTML as my template element -- by doing this, I can create as many elements as I might want.
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap");
var add_button = $(".add_field_button");
var x = 1;
$(add_button).click(function(e) {
// Here, I load the template's HTML
var myFullTemplate = $(".fields-template").html();
''
e.preventDefault();
if (x < max_fields) {
x++; //text box increment
$(wrapper).append(myFullTemplate);
} else {
$(".add_field_button").hide();
}
});
$(wrapper).on("click", ".remove_field", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
if ($(".add_field_button").is(":hidden")) {
$(".add_field_button").show();
}
})
});
.fields-template {
display: none;
}
label {
font-weight: bolder;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<div>
<input type="text" name="mytext[]">
</div>
// I want to add another field with this
</div>
<button class="add_field_button">Add More Fields</button>
<div class="fields-template">
<div>
<label for="fname">First name:</label>
<input type="text" name="fname[]" />
<label for="lname">Last name:</label>
<input type="text" name="lname[]" />Remove
</div>
</div>
So, to do what you mention in your comment (remove both fields rather than one), simply edit your HTML template to suit your needs. Also, another change: when you hit your max number of items, the add button is hidden (and when you delete one, it shows again).
I have a button which adds dynamic columns on clicking that. I tried to get the target id of each column.
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>
js
$(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[]"/>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
alert("target id" + e.target.id); // I get nothing here
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
How to get target ids and also if it has some value I want to print that as well before removing the column for dynamic column added ?
var max_fields = 10,
wrapper = $('.input_fields_wrap'),
add_button = $('.add_field_button'),
x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append('<div><input id="' + x + '" type="text" name="mytext[]"/>Remove</div>');
}
});
$(wrapper).on('click', '.remove_field', function(e) {
var div = $(this).parent('div'),
input = div.find('input');
e.preventDefault();
console.log('target id:', input.attr('id'));
console.log('target value:', input.val());
div.remove();
x--;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>
You aren't giving IDs to the columns !
<div>
<input type="text" name="mytext[]"/>
Remove
</div>
I used the x of your code, var x = 1; //initlal text box count
$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field" id='+x+'>Remove</a></div>');
https://jsfiddle.net/7yn7apte/4/
I built this code in order add and remove select thanks to button but when i click on it, nothing happen.
UPDATE :
My HTML :
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div>
<select class="form-control" name="competence" id="competence">
<?php foreach ($resDisplayCompetence as $ligne) { ?>
<option value="<?php echo $ligne['id'] ?>"><?php echo $ligne['name'] ?></option>
<?php } ?>
</select>
My jQuery :
$(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(
'<select class="form-control" name="competence" id="competence"><option value="">test</option></select>'); //add input box
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
I wanted to know if it is possible to add dynamic select using PHP with this jQuery code.
Found this article at https://www.safaribooksonline.com/library/view/jquery-cookbook/9780596806941/ch10s07.html, which might help you with your issue.
HTML:
<label for="form-control">Form Control</label>
<select class="form-control" name="competence" id="competence">
<option>Option 1</option>
</select>
<br>
<br>
<button id="remove">Remove</button>
<br>
<br>
<label for="newFieldName">New Select</label>
<input id="newFieldName" type="text" />
<label for="newFieldValue">Value</label>
<input id="newFieldValue" type="text" />
<button id="add">Add</button>
jQuery:
// find the "Add New" button
$('#add').click(function(event){
event.preventDefault();
//could be static values
var optionName = $('#newFieldName').val();
var optionValue = $('#newFieldValue').val();
$('<option/>').attr('value',optionValue).text(optionName).appendTo('#competence');
});
// find the "Remove Selected" button
$('#remove').click(function(event){
event.preventDefault();
var $select = $('#competence');
$('option:selected',$select).remove();
});
jsFiddle - https://jsfiddle.net/0d83L0q8/
I think what you are looking for is
$(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 $select = $('#competence');
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
$select.clone().removeAttr('id').appendTo(wrapper.find('div'));
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
if (x > 1) {
x--;
wrapper.find('select:not(#competence)').last().remove();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<button class="remove_field">Remove More Fields</button>
<div>
<select class="form-control" name="competence" id="competence">
<option value="">test</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>