I have a simple text input using the timepicki jquery plugin. I am able successfully use the plugin on my first text input, but I am not able to use it on the additional inputs created by array as shown.
<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
$('#timepicker').timepicki(); //Call Timepicki plugin for #timepicker ID
$(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="timepicker[]"/>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>
<html>
Ring Time:
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" id='timepicker' type='text'name='timepicker[]'"></div>
</div><br><br>
</html>
My question is - How can can enable it so that all instances of the timepicker input can use the timepicker plugin?
Thanks!
Theres a couple of changes that should make it work
$('.timepicker').timepicki(); //class instead of id
and in your HTML and javascript
<input type="text" class="timepicker" name="timepicker[]" />
in the click function
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++;
$(wrapper).append('<div><input type="text" class="timepicker" name="timepicker[]"/>Remove</div>');
}
$('.timepicker').timepicki();
});
Related
I have a Laravel form that collects info from a user. On one part of the form I want to add a button that will add a row containing 4 text boxes (each named differently) that the user can fill in. Each time the user clicks the button, another row of 4 text boxes should be added.
In an ideal world, the code will be a javascript function (so I can reuse it later) called by a button click. I can't seem to see how to add an event handler to a button click on a laravel form.
This works
HTML
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
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
$("#rm").remove();
$(wrapper).append('<div id="divs"><input type="text" name="mytext[]"/>'); //add input box
$(wrapper).append('<div id="divs"><input type="text" name="mytext[]"/>'); //add input box
$(wrapper).append('<div id="divs"><input type="text" name="mytext[]"/></div>'); //add input box
$(wrapper).append('<div id="divs"><input type="text" name="mytext[]"/>Remove</div>'); //add input box
$(wrapper).append('<br>')
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $("#divs").remove(); x--;
$("#divs").remove(); x--;
$("#divs").remove(); x--;
$("#divs").remove(); x--;
})
});
the name will be mytext (first input name = mytest[1] second mytest[2] ...etc)
you can add the X variable to the form so you know how many input you have in your controller
in the html , you can change the type to hidden so you want have any input fields untill user click
check result this in JSFiddle
I am using javascript to add and delete input fields. Fields are properly added, data is saved and displayed too. But when I click remove button in the field that is generated from database, it is not removed. It takes me to the top of the page. But if I click add more fields, new field is generated through javascript and it is removed when I click its remove. Where am I wrong?
HTML AND JAVASCRIPT
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
</div>
<?php
// retrieve the user meta
$fb = get_user_meta($user->ID, 'business_sm_fb', false);
if (!empty($fb)) {
?>
<?php foreach ($fb as $f_b) {
?>
<?php foreach ($f_b as $val) { ?>
<div><input type="text" name="sm_fb[]" type="text" class="regular-text" value="<?php echo $val; ?>" />Remove</div>
<?php
}
}
?>
<?php } else {
?>
<div><input type="text" name="sm_fb[]" type="text" class="regular-text" /></div>
<?php } ?>
<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><input type="text" name="sm_fb[]" type="text" class="regular-text" />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>
the issue seems to be related to the wrapper object:
var wrapper = $(".input_fields_wrap");
In your script you bind the click event to all the .remove_field items, that are inside the wrapper object:
$(wrapper).on("click", ".remove_field", function (e) {
....
})
The problem is that the .remove_field items are added via PHP on the outside of the .input_fields_wrap div, therefore the click event does not work.
As you can see here, the .input_fields_wrap is opened and immediately closed after the <button />. Your PHP code adds the inputs outside this div.
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
</div>
To solve the issue, move the closing div tag after the PHP code block.
Need to add textbox and textarea dynamically to one of my forms. I found this example which works fine for adding textbox dynamically.
Javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(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>
HTML
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>
Result
I tried adding a textarea
$(wrapper).append('<div><textarea name="desc[]"></textarea></div>Remove</div>');
to the above javascript
and to the HTML
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
<div><textarea name="desc[]"></textarea></div>
</div>
but it turns out to be erroneous. How should I add a textarea along with the textbox?
Error
The maximum limit allowed is 10. Say I add 6 of these fields and then decide to use 5 of them. If, I remove the last (6th one in this case) all of them get removed.
EDIT
Link to the above code https://jsfiddle.net/x6krv00u/
** I do not know much about javascripts.**
I think you are doing like this
$(wrapper).append('<div><input type="text" name="mytext[]"/><textarea name="desc[]"></textarea></div>Remove</div>');
And for this following should work
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
$(this).parent().remove(); // you cannot pass 'div' in parent()
});
The input and textarea don't have the same parent. That's what's causing the problem.
This should be the DOM structure:
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div>
<input type="text" name="mytext[]"><br>
<textarea name="desc[]"></textarea>
</div>
</div>
Of course, the <br> is optional. You should probably use CSS for formatting instead.
Here's how you add an input-textarea pair:
$(wrapper).append('<div>' +
'<input name="mytext[]"><br>' +
'<textarea name="desc[]"></textarea>' +
'Remove' +
'</div>');
Here's a working example, which you can copy-paste:
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div>
<input type="text" name="mytext[]"><br>
<textarea name="desc[]"></textarea>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(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 name="mytext[]"><br>' +
'<textarea name="desc[]"></textarea>' +
'Remove' +
'</div>');
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
Hope this helps.
PS: I've tried to make minimal changes to your code. There are other (better) ways of accomplishing what you want.
Edit 0: Improved formatting.
I am dynamically adding select box on button onclick by jQuery. But CSS class for the select box not working.
Here is my 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;
$("#addMore").click(function (e) {
$(".selectized").addClass("data-md-selectize data-md-selectize-bottom");
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(".more_field").append('<div class="uk-width-large-1-4 uk-width-medium-1-2 abc" data-uk-grid-margin><div>Railway Station(s)</div><div> </div><select id="select_demo_2" class="selectized" data-md-selectize data-md-selectize-bottom><option value="a">Ambikapur</option><option value="b">Baloda Bazar</option><option value="c">Bhatapara</option><option value="d">Bilaspur</option><option value="e">Champa</option><option value="f">Dalli-Rajhara</option><option value="g">Dhamtari</option><option value="h">Dongargarh</option><option value="i">Durg-Bhilainagar</option><option value="j">Jagdalpur</option></select></div><div class="uk-width-large-1-4 uk-width-medium-1-2"><div> </div><div> </div><select id="select_demo_3" class="selectized" data-md-selectize data-md-selectize-bottom><option value="">Select...</option><option value="a">Agra Cantt. Railway Station (AGC)</option><option value="b">Agra Fort Railway Station (AF)</option></select></div><div class="uk-width-large-1-4 uk-width-medium-1-2"><div> </div><input type="text" class="md-input validate[required]" name="student_username" id="ereq1" placeholder="Distance"/></div><div class="uk-width-large-1-4 uk-width-medium-1-2"><div><div class="uk-form-row"></div></div></div></div>');
}
$(".more_field").on("click", ".remove_field", function (e) { //user click on remove text
//alert('test');
$(this).parent('.abc').remove();
x--;
})
});
});
You are closing the class after adding only one attribute:
<select id="select_demo_3" class="selectized" data-md-selectize data-md-selectize-bottom>
You need to change it to include all three that you want to be applied:
<select id="select_demo_3" class="selectized data-md-selectize data-md-selectize-bottom">
You have the same issue on both select boxes.
Also you need to update it on your top div from:
<div class="uk-width-large-1-4 uk-width-medium-1-2 abc" data-uk-grid-margin>
to
<div class="uk-width-large-1-4 uk-width-medium-1-2 abc data-um-grid-margin">
I have a form that you can add fields: http://jsfiddle.net/ytrkqr6a/2/
$(document).ready(function() {
var max_fields = 32; //maximum input boxes allowed
var wrapper = $(".cameras"); //Fields wrapper
var add_button = $(".add-camera"); //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"><input type="text" name="camera '+ x +'" value="Camera '+ x +'" placeholder="Camera '+ x +'" class="form-control cameras" readonly /> Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove-camera", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
<div class="cameras">
<div class="camera-field"><button class="add-camera btn btn-primary">+ Add Camera</button></div>
<div style="clear:both;"></div>
<div class="form-group"><input type="text" name="camera" value="" placeholder="Camera 1" class="form-control cameras" readonly /></div>
</div>
Everything works fine adding fields, but where I'm hung up is when you remove one of the fields then numerical order gets off.. how do I make it update the remaining fields to stay in proper numerical order each time you add or remove a field:
Camera 1
Camera 2
Camera 3
etc...
Thanks ahead of time!
I just added a jQuery "each" loop to re placerholder, name, and value each input field every time a remove link is clicked. When using each the value passed to the function is the index of item in the loop's current iteration, I used the variable elm. Since each input field is classed with camerasCounter, you can use $(this) to easily call the input element in the loop. Each is a very useful part of jQuery, if you ask me.
http://jsfiddle.net/v76zn30o/2/
The HTML
<div class="cameras">
<div class="camera-field"><button class="add-camera btn btn-primary">+ Add Camera</button></div>
<div style="clear:both;"></div>
<div class="form-group"><input type="text" name="camera" value="" placeholder="Camera 1" class="form-control camerasCounter" readonly /></div>
</div>
and The jQuery
$(document).ready(function() {
var max_fields = 32; //maximum input boxes allowed
var wrapper = $(".cameras"); //Fields wrapper
var add_button = $(".add-camera"); //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"><input type="text" name="camera '+ x +'" value="Camera '+ x +'" placeholder="Camera '+ x +'" class="form-control camerasCounter" readonly /> Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove-camera", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove();
$(".camerasCounter").each(function(elm){
x = elm + 1
$(this).attr({
"placeholder": "Camera " + x,
"name": "Camera " + x,
"value": "Camera " + x
});
});
});
});