I'm building a page with a series of inputs. One of them is a select list of email addresses. I'm including a Plus glyph at the right end of the list as a button to invoke some javascript that will add additional select lists for more recipients.
I've spent quite a bit of time trying to do this without the results I was hoping for. The best I can do is this code example. If you click directly on the plus, you get the result. However, I wish that the entire square surrounding the glyph was clickable instead - not unlike a button. Any suggestions? Thank you!
<div class="form-group">
<label for='the_user_email' class='col-sm-2 control-label' style='padding-right: 0px;'>Requested By</label>
<div class='col-sm-6'>
<div class="input-group" id="add_emails_event">
<select class='form-control' name='the_user_email' id='the_user_email'>
<option value='user1#domain.com'>user1#domain.com
<option value='user2#domain.com'>user2#domain.com
</select>
<span class="input-group-addon"><a onclick="add_email();"><span class="glyphicon glyphicon-plus"></span></a></span>
</div>
</div>
</div>
You can solve this by using a button.
<div class="form-group">
<label for='the_user_email' class='col-sm-2 control-label' style='padding-right: 0px;'>Requested By</label>
<div class='col-sm-6'>
<div class="input-group" id="add_emails_event">
<select class='form-control' name='the_user_email' id='the_user_email'>
<option value='user1#domain.com'>user1#domain.com
<option value='user2#domain.com'>user2#domain.com
</select>
<span class="input-group-btn"><button onclick="add_email();" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></button></span>
</div>
</div>
</div>
Related
I'm trying to make calculations on multiple fields having different data but when i add them calculations are only done on the first set of fields but the other fields i add, the javascript does not seem to work.
Plus i want to save those data in an array.
Here's my HTML code to display the select box and the input fields
<div id="addon_details">
<div class="form-group col-md-6">
<label for="name">Select Addon Package</label>
<select id="addon" name="type[]" class="form-control">
<option value="Radio">Radio</option>
<option value="Lamp">Lamp</option>
<option value="Phone">Phone</option>
<option value="Battery">Battery</option>
<option value="Antenna">Antenna</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="name">Quantity</label>
<input type="number" class="form-control" name="quantity[]" placeholder="Qty" id="qty[]" onchange="calculate();">
</div>
<div class="form-group col-md-4">
<label for="name">Total Price</label>
<input type="number" class="form-control" name="total[]" placeholder="" readonly="" id="price">
</div>
</div>
Then when I click on add package button it adds another set of fields
<div class="form-group col-md-12 col-md-offset-2">
<button type="button" class="btn btn-info btn-addon m-b-sm"><i class="fa fa-plus" aria-hidden="true" id="add_success"></i>Add Package</button>
<button type="submit" class="btn btn-info btn-addon m-b-sm"><i class="fa fa-refresh" aria-hidden="true"></i>Upgrade</button>
<button type="button" class="btn btn-default btn-addon m-b-sm"><i class="fa fa-close" aria-hidden="true"></i>Cancel</button>
</div>
Also here's the javascript to compute:
function calculate(){
var qty = document.getElementById('qty[]').value;
var radio = 1000 ;
var price = "";
if(document.getElementById('addon').value == "Radio") {
price = parseInt(qty) * radio;
document.getElementById('price').value = price;
}
}
But unfortunately for me, I can only do calculation on the first set of fields but the other fields the calculation are not possible.
Below you can see what I'm trying to do graphically
Any help is appreciated. Thank you!
As #Barmar suggests, you need to make your ID's unique. In your example your initial addon id could be addon1 like this:
<select id="addon1" name="type[]" class="form-control">...</select>
As you use your add package button, you would have to generate the next number for the select, like:
<select id="addon2" name="type[]" class="form-control">...</select>
<select id="addon3" name="type[]" class="form-control">...</select>
etc...
You could then have your function traverse all the fields with partial matches on addon id. This SO link would help you understand how you might do that.
i have a rather dumb issue but still, can not figure the way around it...The concept is to have a select value which prompts the user to select a subject. Upon selection i need to store that subject id in every form that i am using below in so i can retrieve that subject, and i dont want to use different select for every single form that i need. here is the code below:
<div class="input-field col s12">
<select>
<c:forEach var="subjectItem" items="${subjectList }">
<option value="${subjectItem.id }">${subjectItem.subjectName }</option>
</c:forEach>
</select> <label>For subject</label>
</div>
......
.....
<form method="POST" action="subject-add-school-deadline"
id="deadlineSchoolForm">
----! Here is should retrieve that data from select !-------
<div class="row">
<div class="input-field col s6">
<input id="schoolD_title" type="text" class="validate"
name="title""> <label
for="schoolD_title">Title</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 l12 ">
<textarea id="schoolD_desc" name="description"
class="materialize-textarea validate" form="deadlineSchoolForm"></textarea>
<label for="schoolD_desc">Description</label>
</div>
</div>
<div class="row">
<label class="col s2">Deadline date</label> <input type="date"
class="datepicker col s4" name="date">
</div>
<div class="row right-align">
<button class="waves-effect waves-teal btn-flat" type="submit"
name="action" >
Add <i class="material-icons right">input</i>
</button>
</div>
</form>
----MORE FORMS BELOW ------
.....
.....
Note that i do not need something like
<select form="form1>
because i need that select value for multiple forms. Any help would be greatly appreciated. Thanks!!
I used jQuery to set the value in all inputs named title. Would this solve your problem?
JS Fiddle
The important part:
<script type="application/javascript">
$("select#foo").change(function() {
$("input[name='title']").val($("select#foo").val());
});
</script>
I am a new programmer and I have a little question. This is a part of my code:
<script type="text/html" id="experienceTmpl">
<li class="clearfix">
<div class="page-header no-border holder">
<a class="btn btn-icon-toggle btn-accent btn-delete stick-top-right"><span class="md md-delete"></span></a>
<h4 class="text-accent">Food Items
<%=index%>
</h4>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" id="experience-company-<%=index%>" placeholder="Food Item" name="experience-company-<%=index%>">
<label for="experience-company-<%=index%>"></label>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" id="experience-functiontitle-<%=index%>" placeholder="Price" name="experience-functiontitle-<%=index%>" data-rule-number="true">
<label for="experience-functiontitle-<%=index%>"></label>
<p class="help-block">Digits only</p>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select id="select1-<%=index%>" name="select1-<%=index%>" class="form-control" placeholder="Select" required>
<option value="Full Plate">Full Plate</option>
<option value="Half Plate">Half Plate</option>
<option value="Quarter Plate">Quarter Plate</option>
</select>
<label for="select1-<%=index%>"></label>
</div>
</div>
</div>
<div class="form-group">
<input type="text" multiple name="cuisine" class="tagsInput" value="Afghani,Mughlai" data-url="cuisine.json" data-user-option-allowed="true" data-load-once="true" required />
</div>
</li>
</script>
My question is how can I add this script in this html template so the class in input tag call this script:
<script type="text/javascript">
$('.tagsInput').fastselect();
</script>
Is this Possible to call this script in the html template please provide the solution I'm totally blank.
I think best way to do this is, when rendering particular script/html template dynamically add javascript to DOM.
Detail:
In application level you know which template is going to rend in the page. make separate JS files for each template id's and inject active template related javascript file to DOM.
Note:
This is like you are going to create template engine. Best way to use existing template engine such as Handlebars,JADE,Underscore. it will save your development time and reduced bugs.
I'm hitting a scoping issue when using the ng-repeat functionality of AngularJS.
please see the plnkr
I have an array of objects 'boxCollection' and a list of items 'itemCollection' which I display in a drop down.
$scope.boxCollection = [];
$scope.itemCollection =
[
{name: 'item1'},
{name: 'item2'},
{name: 'item3'}
];
Now I have my view as
<script type="text/ng-template" id="addBox.html">
<div class="box-controls">
<span class="glyphicon glyphicon-plus pull-left" ng-click="addBox()"></span>
<span class="glyphicon glyphicon-minus pull-left" ng-class="{disable_div:boxCollection.length < 2} " ng-click="removeBox($index)"></span>
</div>
<div class="box-container">
<div class="box-details">
<div class="boxItem">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-md-3">Item</label>
<div class="col-md-8">
<select class="form-control" ng-options="item.name for item in itemCollection" ng-model="boxCollection[$index].item" ng-disabled="false">
<option value=""> None </option>
</select>
</div>
</div>
<div class=" form-group ">
<label class="control-label col-md-3">Item Desc</label>
<div class="col-md-8">
<input type="text " class="form-control " ng-model="boxCollection[$index].item.desc ">
</div>
</div>
</form>
</div>
</div>
<div class="clearfix "></div>
</div>
</script>
The view is wrapped in a script tag with an id and is called with an ng-repeat.
I have one function to add a box element into my view 'addBox()'. It generates one entry in 'boxCollection' array and another entry in 'boxTmplList' array. 'boxTmplList' is responsible for showing the views.
Now if you select let's say 'item1' from the drop down in box1 and add a value in the input field, add another box in the view using the '+' button and select 'item1' again in the another instance. It displays the value of input field 1 in the input field 2.
enter image description here
On further analysis I found that Angular tracks the objects with similar 'item' name using the same $hashkey.
I'm using a workaround by adding another property to the object 'boxCollection[$index].itemDesc' instead of 'boxCollection[$index].item.desc' and then later on modify the object using another function, but I feel that's not the most efficient way.
Any insight on this would be greatly appreciated.
You need to change ng-model="boxCollection[$index].item" to ng-model="boxCollection[$index].item.name" , like as-
<select class="form-control" ng-options="item.name for item in itemCollection" ng-model="boxCollection[$index].item.name" ng-disabled="false">
Working Plnkr
Change ng-model="boxCollection[$index].item.desc" to ng-model="itemCollection[$index].name".
<div class=" form-group ">
<label class="control-label col-md-3">Item Desc</label>
<div class="col-md-8">
<input type="text " class="form-control " ng-model="itemCollection[$index].name">
</div>
</div>
I have following form and I'm trying to validate following form states:
themeName must is required and should have min. 4 chars.
themeLangFrom selected value cannot be same as themeLangTo (and vice versa).
I would like to display span error message under each invalidated field.
I tried to do by this way but I cannot resolve it with select inputs.
Could somebody tell to me how to do it in the right way please?
Form code:
<ul class="nav nav-pills pull-right">
<li>Close form</li>
</ul>
<h3 class="text-muted">Add New Theme</h3>
<form role="form" name="addThemeForm" id="addThemeForm" >
<div class="form-group">
<label for="themeName">Theme name:</label>
<input id="themeName" type="name" required class="form-control" ng-minlength="4" ng-model="newtheme.name" placeholder="Enter Theme Name">
<span class="formValidationError" ng-show="addThemeForm.themeName.$error">Enter valid e-mail</span>
</div>
<div class="form-group">
<label for="themeLangFrom">Language from:</label>
<select id="themeLangFrom" required class="form-control" ng-options="language as language.name for language in languages" ng-model="newtheme.langFrom" >
<option value="">{{language.name}}</option>
</select>
</div>
<div class="form-group">
<label for="themeLangTo">Language to:</label>
<select id="themeLangTo" required class="form-control" ng-options="language as language.name for language in languages" ng-model="newtheme.langTo" >
<option value="">{{language.name}}</option>
</select>
</div>
<input ng-click="addTheme(newtheme)" ng-disabled="!addThemeForm.$valid" type="submit" value="Add New Theme" class="btn btn-success btn-block btn-lg">
</form>
In order to validate that themeLangFrom is diferent from themeLangTo you will need to implement a custom directive.
You can use angular-ui's ui-validate directive (http://angular-ui.github.io/ui-utils/) for that or proabbly better:
Roll your own... You can take example from the many implementations for password validation directives out there just notice that unlike password validation you need the fields to not be equal.
You can see some examples here: password-check directive in angularjs