i have a dynamic form that i want to align like this.
i tried using bootstrap grid system but im still not getting it.
HTML
<div class="form-group">
<label>Time Schedule:</label>
<div id="items">
<div class="col-md-4">
<input type="text" class="form-control" name="name" placeholder="12:00" data-timepicker>
</div>
<div class="col-md-2"><h5>TO</h5></div>
<div class="col-md-4">
<input type="text" class="form-control" name="name" placeholder="12:00" data-timepicker>
</div>
</div>
</div>
Javascript
$(document).ready(function(){
$("#add-entry").click(function(e){
event.preventDefault();
$("#items").append('<div class="col-sm-3">'
+'<input type="text" class="form-control" name="name" placeholder="12:00" data-timepicker></div>'
+'<div class="col-sm-2"><h5>TO</h5></div><div class="col-sm-3">'
+'<input type="text" class="form-control" name="name" placeholder="12:00" data-timepicker></div>'
+'<div class="col-sm-4"><input type="button" value="delete-entry" class="delete-entry"></div>');
});
$('body').on('click','.delete-entry',function(e){
$(this).parent('div').remove();
});
});
I've created a fiddle for your requirements. You were not actually completing col-md-12 grid as you said. I've created the same UI using col-xs-12 grid. Also, When you clicked on Delete entry you were actually removing the div of button itself.
Here is the working fiddle: Jsfiddle
i solved it already, i added
<div class="col-md-2"></div>
below the last input field in the html file to complete the "col-md-12" grid, i adjusted the javascript col-md's to match the ones in the html.
however i have another problem, it seems that my delete button is not working anymore
Related
On click of checkbox I want to hide one last input field. I have tried prev and closest but it is not working. There are few other set of same kind of input fields so I just want to target on last input field. So on click of this checkbox I want to hide last input field job_to_date[]. Below is my code.
jQuery('input[name^="currently_work_here"]').change(function() {
if (jQuery(this).is(":checked")) {
jQuery(this).prev('.job_to_date').remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6">
<input type="text" name="job_from_date[]" value="" placeholder="From" class="job_from_date">
</div>
<div class="col-sm-6">
<input type="text" name="job_to_date[]" value="" placeholder="To" class="job_to_date">
</div>
<div class="col-sm-12">
<input type="checkbox" name="currently_work_here[]" class="resume_builder_input input_checkbox"> I currently work here
</div>
Based on your revised HTML you need to use .parent().prev().find('.job_to_date') to locate the element you want to remove:
jQuery('input[name^="currently_work_here"]').change(function() {
if(jQuery(this).is(":checked")) {
jQuery(this).parent().prev().find('.job_to_date').remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6">
<input type="text" name="job_from_date[]" value="" placeholder="From" class="job_from_date">
</div>
<div class="col-sm-6">
<input type="text" name="job_to_date[]" value="" placeholder="To" class="job_to_date">
</div>
<div class="col-sm-12">
<input type="checkbox" name="currently_work_here[]" class="resume_builder_input input_checkbox"> I currently work here
</div>
.prev() alone won't work based on your structure. You need to go up a level via .parent(), then to the previous div with .prev(), finally finding the one to remove with .find('.job_to_date')
So I've been working on a code that would try to pre-fill some disabled inputs with a keyup() function from another enabled input that are all enclosed in one div element. What happens is that upon key release, it tries to change the value of the disabled inputs from that specific row of divs. Here's what I currently have on my code
<div class="container-fluid" id="clonegrp">
<div class="row grpit">
<div class="col-md-7">
<input type="text" name="it[]" class="form-control" id="item" placeholder="Chemical/Equipment*" required="true">
</div>
<div class="col-md-2">
<input type="text" name="amount[]" class="form-control" placeholder="Amount*" required="true">
</div>
/<div class="col-md-1">
<input type="text" class="form-control" id="max" placeholder="Max" readonly="readonly">
</div>
<div class="col-md-1">
<input type="text" class="form-control" id="unit" placeholder="Unit" readonly="readonly">
</div>
</div>
so this group of inputs can be cloned by some button and through this JQuery code
var $button2=$('#add-item'),
$row2=$('.grpit').clone(),
$try2=$('#clonegrp');
$button2.click(function() {
$row2.clone().appendTo($try2);
});
the problem lies at the part where I try to do the live keyup function
$(document).ready(function() {
$('#clonegrp').on('keyup','#item', function() {
$('#max').val('some text');
});
});
I know that this is wrong since the id part would mess up which of the cloned inputs with the #max id gets to change the input. I can't seem to figure out how to get the #max sibling of the currently focused #item input. How do I do that?
I have asked a similar question, but have since made a lot of progress so I wanted to share it.
Basically, I have form elements which can be dragged and dropped - it makes use of clone. It allows me to create my own forms. The problem is, an output might be something like so
<form id="content">
<div data-type="text" class="form-group">
<label class="control-label col-sm-5" for="text_input">Text Input</label>
<div class="controls col-sm-7">
<input type="text" name="text_input" class="form-control" id="text_input">
</div>
</div>
<div data-type="text" class="form-group">
<label class="control-label col-sm-5" for="text_input">Text Input</label>
<div class="controls col-sm-7">
<input type="text" name="text_input" class="form-control" id="text_input">
</div>
</div>
<div data-type="textarea" class="form-group">
<label class="col-sm-5 control-label green" for="textareaInput">Text Area:</label>
<div class="controls col-sm-7">
<textarea cols="50" name="textareaInput" id="textareaInput" class="form-control" rows="5"></textarea>
</div>
</div>
<div data-type="textarea" class="form-group">
<label class="col-sm-5 control-label green" for="textareaInput">Text Area:</label>
<div class="controls col-sm-7">
<textarea cols="50" name="textareaInput" id="textareaInput" class="form-control" rows="5"></textarea>
</div>
</div>
<div data-type="date" class="form-group">
<label class="control-label col-sm-5" for="dateInput">Date Input:</label>
<div class="col-sm-3">
<input type="text" name="dateInput" class="form-control date_picker" id="dateInput">
</div>
</div>
<div data-type="date" class="form-group">
<label class="control-label col-sm-5" for="dateInput">Date Input:</label>
<div class="col-sm-3">
<input type="text" name="dateInput" class="form-control date_picker" id="dateInput">
</div>
</div>
<input type="submit" value="Save Template" id="templateSubmit" class="btn btn-primary">
</form>
The problem with this is that if I clone 2 form elements of the same type, they both have the same name and id like shown above. So I need to make sure that each cloned element has a unique name and id. At the moment, I have a partial solution.
I have created a fiddle here Fiddle If you click Save Template, you will see what happens. The id numbers seem very strange, for instance textareaInput222. Really, each element type should start at 0, and 1 be added to it for each additional element of the same type.
Would this be possible? The other thing I am struggling with is setting the elements labels for attribute to be the same as the name which is set for that element.
How can I achieve this?
Thanks
$("#content").find(".form-group").each(function() {
$("textarea").each(function(index, value) {
my friend, these two each is the reason. There are around 6 .form-group element, so that textarea#each ran 6 times. And regard to DRY, here I gave my version https://jsfiddle.net/yjaL2zgL/2/
I'd use underscore.js's unique id function personally, or your own implementation of it and suffix every id with a unique number on the page that increments like "dateInput-345". Even just using a counter variable that everything uses would be easy enough instead of basing it on indexes in loops.
http://underscorejs.org/#uniqueId
your own counter:
instead of using
(index + 1)
you can use something like
var uid = 0; //this needs to be where you declared your other vars
then when you need an id:
var new_id = $(value).attr("id") + '-' + uid++;
just make sure you arent copying an id that already has a number attached to it or you need to deal with that too.
Given the following html snippet, I cant seem to access the input elements under the div with class="input-group"
<form action="login.html#register" method="post" id="form-register" class="form-horizontal display-none">
<div class="form-group">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon"><i class="gi gi-user"></i></span>
<input type="text" id="register-firstname" name="register-firstname" class="form-control input-lg" placeholder="Firstname">
</div>
</div>
<div class="col-xs-6">
<input type="text" id="register-lastname" name="register-lastname" class="form-control input-lg" placeholder="Lastname">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="input-group">
<span class="input-group-addon"><i class="gi gi-envelope"></i></span>
<input type="text" id="register-email" name="register-email" class="form-control input-lg" placeholder="Email">
</div>
</div>
</div>
</form>
I have tried numerous selector syntax but nothing seems to work. I cannot figure out why this version doesn't work, it certainly should, but I'm no expert on JQuery just yet.
To me the syntax below says get all the items with class form-group in the element with id form-register, then get all divs with class input-group and then all the input tags in those divs. Am I mistaken there?
$('#form-register.form-group > div.input-group > input').attr('disabled', true);
The proper syntax is, via assistance from the accepted answer;
$('#form-register div[class^="col-xs"] input').attr('disabled', true);
Your CSS syntax is incorrect. Try this:
$('#form-register .form-group div.input-group > input').attr('disabled', true);
Firstly, notice the space between the first two selectors, because .form-group is a child of #form-register. Secondly the > means 'direct child of', so was incorrect when used on div.input-group.
"Sorry for my English as it is not my native language"
On to the problem. I have a trouble with ng-autocomplete when I dynamically create form fields.
The ng-autocomplete works fine when I create an input tag in the index file but when I try to add more tags via the javascript function the ng-autocomplete does not work in the new input tags created..
As you see in the picture the two input fields "Travel from" and "Travel to" have ng-autocomplete but the input field "travel via" which is created by the javascript function does not have ng-autocomplete..
The question is how can I add a working ng-autocomplete for every created input field via the function?
Down below is the script.js file with the code for creating the input tag
$(document).ready(function(){
var i=1;
$("#add_city").click(function(){
$('#end_city'+i).html('<input type="text" class="form-control input-lg ng-isolate-scope" name="via_city" ng-autocomplete="via_city" placeholder="Travel via" autocomplete="off" />');
$('#tab_logic').append('<div id="end_city'+(i+1)+'"></div>');
i++;
});
$("#delete_city").click(function(){
if(i>1){
$("#end_city"+(i-1)).html('');
i--;
}
});
});
And there is the index.php
<div class="page-header">
<h4>Create your trip</h4>
</div>
<form ng-submit="submitTrip()"> <!-- ng-submit will disable the default form action and use our function -->
<!-- START CITY -->
<div class="form-group col-md-6">
<input type="text" class="form-control input-lg" name="start_city" ng-autocomplete="tripData.start_city" placeholder="Travel from">
</div>
<!-- END CITY -->
<div class="form-group col-md-6" id="tab_logic">
<div id="end_city0">
<input type="text" class="form-control input-lg" name="end_city" ng-autocomplete="tripData.end_city" placeholder="Travel to">
</div>
<div id="end_city1"></div>
</div>
<!-- START DATE -->
<div class="form-group col-md-6">
<input type="date" class="form-control input-lg" name="start_date" ng-model="tripData.start_date" placeholder="Travel date">
</div>
<!-- END DATE -->
<div class="form-group col-md-6">
<input type="date" class="form-control input-lg" name="end_date" ng-model="tripData.end_date" placeholder="Return date">
</div>
<!-- COMMENT -->
<div class="form-group col-md-12">
<textarea class="form-control input-lg" name="comment" ng-model="tripData.comment"></textarea>
</div>
<!-- Img -->
<div class="form-group col-md-12">
<input type="text" class="form-control input-lg" name="img" ng-model="tripData.img" placeholder="Image source">
</div>
<!-- SUBMIT BUTTON -->
<div class="form-group text-right">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
<a id="add_city" class="btn btn-default pull-left">Add City</a><a id='delete_city' class="pull-right btn btn-default">Delete City</a>
</div>
</form>
I have looked at these two examples and I dont know why it does not work.. Please if anybody knows how to fix this problem it would help a lot :)
http://plnkr.co/edit/il2J8qOI2Dr7Ik1KHRm8?p=preview
http://bootsnipp.com/snippets/featured/dynamic-table-row-creation-and-deletion
Thanks!
/K.A.
You need to compile the element by using the $compile service:
...
$('#tab_logic').append('<div id="end_city' + (i + 1) + '"></div>');
var element = angular.element(document.querySelector('#end_city' + i));
var scope = element.scope();
var $compile = element.injector().get('$compile');
$compile(element)(scope);
...
Good short explanation of how to work with Angular from the 'outside' can be found here.