I've a simple bootstrap text field for entering ticket quantity. When I enter ticket quantity as 2, then I want two bootstrap panels having a form created automatically. If the value is 3, then 3 bootstrap panels having a form are created automatically. How can I do it?
JsFiddle link: https://jsfiddle.net/gcxxehwf/
Html code:
<div class="col-md-12 col-xs-12">
<div class="field">
<label for="price">Ticket quantity:</label>
<input type="number" name="tquantity" value="" class="form-control" id="tquantity">
</div>
</div>
<div class="col-md-8 col-xs-12" id="participantpanel"></div>
By using AngularJS it would be much easier than with the jQuery append method. Just use the ng-repeat directive and repeat the panel as often the value is.
Related
I have a form where user can add multiple questions using repeater and inside the question the user can add multiple input option. As the question types are many so I'm fetching questions options through ajax and rendering it under the question.
Now when the question option are rendered through ajax i call, this is the html response
<div class="inner-repeater">
<div data-repeater-list="inner-list">
<div data-repeater-item>
<div class="form-group">
<label>Dropdown Answer</label>
<input type="text" name="dropwdown[]"
placeholder="Member will be able to choose one option"
class="form-control question_answer">
</div>
<a href="javascript:void(0);" data-repeater-delete>Remove Dropdown option</a>
</div>
</div>
<div class="form-group">
<div class="col p-0">
<button class="btn btn-primary" data-repeater-create type="button"><i
class="os-icon os-icon-folder-plus"></i>
Add Dropdown option
</button>
</div>
</div>
</div>
<script>
$(".repeater-a").repeater({
repeaters: [{
// (Required)
// Specify the jQuery selector for this nested repeater
selector: '.inner-repeater'
}],
});
</script>
I append this code under the question. due to this solution plugin is being initialized again and then if i click on add button the whole question is repeated again with current dropdown options.
Is there a way to dynamically add the inner repeater and initialize it without effecting the main repeater
URL - https://github.com/DubFriend/jquery.repeater/
View:
I have a form with two select fields : The second one only activates when a choice in the first one has been made and the content shown is relative to the first field.
Model :
Establishment (id,name)
Account (id,Establishment)
Logic : The first field loads a list of establishment from the model attribute "etablissements" that the Controller loads.
The second field should then enable itself after a selection has been made (easy), but then it should also show a list of accounts that are "registered" to this Establishment.
The question is how do i set this kind of conditional statement in thymeleaf, knowing that I have access to all establishments and account in the template as shown here :
<form id="demo-form2" data-parsley-validate
class="form-horizontal form-label-left" action="addOP"
th:object="${paiement}" method="post">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12"
for="first-name"> Compte <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select class="form-control" th:field="*{idCompte}">
<option th:each="account : ${etablissements}"
th:text="${etablissement.name}" th:value="${etablissement.name}">Choose
Etablissement</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12"
for="first-name"> Imputation <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select class="form-control" disabled="disabled">
<option th:each="account : ${accounts}"
th:text="${account.owner}" th:value="${account.id}">Compte</option>
</select>
</div>
</div>
What's the best way to do this using thymeleaf or javascript ?
PS : Sorry for the formatting haven't found a way to automatically remove those spaces from code.
You should still render the list using thymeleaf and give it a hidden class which sets it to display: none. Then with javascript you can add an eventlistener to the dropdown which looks for that specific value and removes the hidden class to show the list.
Edit: to filter the list you can put a data attribute on the element and show or hide the item based on that data
I'm trying to disable a materializecss button if the value of a particular input in a form is blank, but I can only successfully disable it using ng-disable if the form is $pristine, not on the input.
This works:
data-ng-disabled="mainDetailsForm.$pristine"
but this doesn't:
data-ng-disabled="mainDetailsForm.niNumberInput.$pristine"
and this doesn't:
data-ng-disabled="niNumberInput.$pristine"
-
JSFiddle: https://jsfiddle.net/6qswosh8/.
-
Full HTML:
<form id="mainDetailsForm" name="mainDetailsForm">
<div class="row">
<div input-field class="input-field col-xs-12 col-md-4">
<input id="niNumberInput" name="niNumberInput" type="text" class="validate" pattern=".{9}" placeholder="National Insurance Number">
<label for="niNumberInput" data-error="National Insurance number must be 9 characters long">National Insurance Number</label>
</div>
<div input-field class="input-field col-xs-12 col-md-1">
<button data-ng-disabled="mainDetailsForm.niNumberInput.$pristine" class="btn button waves-effect"><span class="fa fa-search"></span>Verify</button>
</div>
</div>
</form>
To access the properties of individual inputs through the form you need to give the input an ng-model. The ng-model property is what binds it. I updated your jsfiddle https://jsfiddle.net/dougefresh/6qswosh8/1/ ( I also had to get angular working properly in the fiddle).
<input id="niNumberInput" name="niNumberInput" ng-model="niNumberInput" type="text" class="validate" pattern=".{9}" placeholder="National Insurance Number">
This small line in the docs is important "To allow styling of form as well as controls, ngModel adds these CSS classes:" It lists $dirty, $pristine, etc.. The docs specifically say they are bound to ng-model.
https://docs.angularjs.org/guide/forms
I have a form splitted in 4 steps (I made a form "wizard" using ng-switch), the submit button is on the last page of the wizard. I have some troubles making the angular form validation to work . It seems that the formName.$invalid only watches the inputs of the current step of the form.
<form name="carouselForm">
<div ng-switch="modal.getCurrentStep()" class="slide-frame">
<div ng-switch-when="general" class="wave row">
....
</div>
<div ng-switch-when="carousel" class="wave row">
<div class="col-md-12">
<div class="form-group"
ng-class="">
<label for="Title">
Title <span class="red">*</span>
</label>
<div>
<input id="Title"
ng-model="entityData.Title"
type="text"
required
placeholder="" class="form-control input-md">
</div>
</div>
</div>
</div>
<div ng-switch-when="details" class="wave row">
.....
</div>
<div ng-switch-when="description" class="wave row">
.....
</div>
</div>
</form>
I removed most of the form cause it would have been very long. In step two I left an input with the required tag. On this step the carouselForm.$invalid is properly set to true if this field is not set, but as soon as I change to the next step, carouselForm.$invalid is false again even if I didn't filled the required input.
It seems that the angular form validation doesn't watch the inputs in my other ng-switch block. Is there a way to make include them into the validation ?
Thank you very much !
You can replace ng-switch-when by ng-show, that way it doesn't get removed from the DOM, but is hidden using CSS.
I have some AngularJS code to dynamically create form elements based on an array with form details (input type, value, etc.)
Here's the example code I have for a text input:
<div ng-repeat="input in input_array">
<div ng-switch on="input.input_type">
<div ng-switch-when="text">
<label class="item item-input">
<input type="text" placeholder="Hello World">
</label>
</div>
</div>
</div>
As you can see, the top-level div is repeated for every form element in the array. The problem, is that when input.input_type equals "text", it doesn't show unless I remove the label tags! I've tried doing label tags without any attributes (<label>...</label>) and it still doesn't show the input unless I remove them.
This is pretty strange, does anyone have any ideas why it would do that? Thanks!
EDIT: Now I've tried removing the input and putting text in (<label>Hello!</label>), and it shows up.....so it just doesn't allow inputs wrapped in a label element? o.O
You need to close your input tag.
<div ng-repeat="input in input_array">
<div ng-switch on="input.input_type">
<div ng-switch-when="text">
<label class="item item-input">
<input type="text" placeholder="Hello World"/>
</label>
</div>
</div>
</div>