I am trying to use javascript to add dynamically an input form.
For example, If I click a button "Add More Fields" it will automatically add another select input form.
When I tried it with my select input form that has PHP code in it. It doesnt work. It gave me an error of Uncaught SyntaxError: Invalid or unexpected token
PHP / HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="input_fields_wrap">
<button class="btn btn-primary add_field_button" type="button">Add More Fields</button>
<div>
<select class="form-control" name="findings[]">
<?php
$option = '<option value="'.$row->id.'">'.$row->illness.'</option>';
foreach($findings->result() as $row)
{
echo '<option value="'.$row->id.'">'.$row->illness.'</option>';
}
?>
</select>
</div>
</div>
</body>
</html>
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> < select class = "form-control"
name = "findings[]" >
<?php
foreach($findings->result() as $row)
{
echo "<option value="$row->id">$row->illness</option>";
}
?> < /select> class="remove_field">Remove</a > < /div>'); / / add input box
}
}); $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
I have implemented an example for you:
JS code:
$(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
$( ".aaaa" ).first().clone().appendTo( ".input_fields_wrap" );
}
});
$(wrapper).on("click", ".remove_field", function(e) {
e.preventDefault();
if($(".aaaa").length > 1) {
$(this).parent('div').remove();
} else {
alert('You can not delete all elements');
}
})
});
HTML code:
<div class="input_fields_wrap">
<button class="btn btn-primary add_field_button" type="button">Add More Fields</button>
<div class="aaaa">
<select class="form-control" name="findings[]">
<option value="a">aaaaaa</option>
<option value="b">bbbbbb</option>
<option value="c">ccccccc</option>
</select>
<button class="remove_field">Remove</button>
</div>
</div>
If you want to use the PHP for the select option than use as below
<select class="form-control" name="findings[]">
<option value="">Select an option</option>
<?php
if($findings->result()) {
foreach($findings->result() as $row) {
echo '<option value="'.$row->id.'">'.$row->illness.'</option>';
}
}
?>
</select>
You cannot add in this way if you want to add more fields which are in the page already you can take a clone by using $("#element").clone() function and then append the same in the place you want
Related
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>
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--;
})
});