Multiple HTML <select> Elements Showing Same Dropdown Content In Ionic - javascript

I am refactoring an angularJS webapp to mobile app using Ionic with great success. But, I have two SELECT elements that are not functioning properly anymore. One should select "Months" and the other should select "Years". The problem is, when I click/tap on either, they are both opening the "Years" select options. I thought they might be condensed to close and I was "Fat Fingering" the select elements, but I added margin between and separated them and still happening.
Can someone take a look at the below and tell me if they see anything that could be causing this?
Thanks,
B
<div class="card-date-housing">
<div class="form-group date-select">
<label for="year" class="item-select security-select">Expiration Month
<select id="month" class="form-control custom" ng-model="billingInfo.ExpMonth" ng-options="month.id for month in months track by month.id" tabindex="2" required>
</select>
</label>
</div>
</div>
<div class="card-date-housing">
<div class="form-group date-select">
<label for="year" class="item-select security-select">Expiration Year
<select id="year" class="form-control custom" ng-model="billingInfo.ExpYear" ng-options="year.display for year in years track by year.id" tabindex="3" required>
</select>
</label>
</div>
</div>

First, let me apologize for putting a question here that was so clearly a syntax error. I saw just after I posted this that the labels for attribute was assigned to "year" for both select elements. I changed the "month" label for attribute to "month" and of course it started to behave properly.
Thanks for the community.

Related

Tips for a booking form : insert a calendar(datapicker), insert a timepicker (?)

this is my first project about sites for booking, i'm looking to build a little site (with responsive part) with a page to book your appointment in a barber saloon. At the moment i'm stucked in the booking page, i've already inserted the part of form with some choices (barber, services), someone knows how to insert a datapicker and timepicker(?) to complete the form? and how know that data are sended to the database? and my last question about the responsive part is : do i add a pop up with javascript to make the choice of services and barber more easily?
<form action="login.php" method="post" class="login100-form validate-form">
<span class="login100-form-title">
Prenotazione
</span>
<label for="barber">Seleziona barbiere:</label>
<select name="barber" class="input100">
<option value="monaci">Monaci Domenico</option>
<option value="esposito">Esposito Vincenzo</option>
<option value="nessunap">Nessuna preferenza</option>
</select>
</br>
</br>
<label for="service">Seleziona servizio:</label>
<select name="service" class="input100">
<option value="monaci">Vip</option>
<option value="esposito">Taglio</option>
<option value="nessunap">Barba</option>
</select>
</br>
</br>
<label for="cars">Seleziona data:</label>
<div class="container-login100-form-btn">
<button type="submit" class="login100-form-btn">
PRENOTA
</button>
</div>
</form>
<input type="date">
<input type="time">
Thanks for the help, for the date there isn't problem, but for the time, a possible solution is add buttons for each block of time? i mean when you wanna add your service at a specific time? and is it the only way to store any block of time of a day in a database? i think?

Remove auto select of radio button in ng-repeat Angular

I am dynamically populating the radio button using a json. And using ng-repeat to display it. My issue is that the last radio button gets picked by default which I don't want. I don't see any reason for it to be selected.
<div ng-repeat="bankAccount in availableBankAccounts">
<div class="account-list grey-bottom-border">
<div class="col-sm-6">
<label class="radio col-xs-12 spacer-top-sm option-label">
<input type="radio" name="radio2" ng-model="updateDD.bankAccountId" ng-value="updateDD.bankAccountId" ng-click="selectedReason(bankAccount)" required="" class="ng-untouched ng-dirty ng-valid ng-valid-required">
<span class="control-indicator control-indicator-lg hand-cursor"></span>
<span>Account ending in *{{bankAccount.depositAccountNumber|last4Digits}}</span>
</label>
<!-- <p>Account ending in *7890</p> -->
</div>
</div>
</div>
Js file:
$scope.updateDD.bankAccountId=$scope.radio7;
if($scope.availableBankAccounts.length>1)
{
$scope.createJson();
}
Any help indicating what is making last radio button select by default will be helpful.
Try $scope.availableBankAccounts.length>=1
Should work
You are giving the same value to ng-model, where you want to see the selected value and ng-value, which you want to use for value.
Instead of
ng-model="updateDD.bankAccountId" ng-value="updateDD.bankAccountId"
you should do something like
ng-model="updateDD.bankAccountId" ng-value="bankAccount.Id"

How can I put together the option selected with the input inserted by the user?

I'm beginning to study web development, just html, css and bootstrap so far... And training the things that I've learned, I just got stucked with the following situation:
<div class="input-group">
<input required type="email" name="" id="email" class="form-control">
<div class="input-group-append">
<select name="" id="kasp">
<option value="#gmail.com">#gmail.com</option>
<option value="#homail.com">#homail.com</option>
<option value="#yahoo.com.br">#yahoo.com.br</option>
</select>
</div>
</div>
Using only this, would it be possible to put together what was typed in the with what was selected?
I guess that some javascript may be necessary to do it, but I'm also curious to know if there's some way of doing it without js, so what do you tell me? I haven't started with javascript yet, but anyway, how would it looks like?
You can do it in the server script when you submit the form. But if you want to do it on the client, you have to use JavaScript.
Use .value to get the values of each input, and + to concatenate strings.
var full_email = document.getElementById("email").value + document.getElementById("kasp").value

How to change input using a value from iterator (JavaScript and Struts2)

we have an bonus exercise in our JavaScript class which I can't solve. I have a problem regarding how to change what is written in the two <input> tags depending on which applicant I've chosen. I am retrieving from a database for the <div> and <input> tags using JavaScript (which is used to connect the front end and back end, I guess) and Struts2.
For example I select "examinee1", the first input should display the name of his/her father while the second input will provide the name of his/her mother. If "examinee2" was chosen, same thing applies.
Here's what I've already started.
<div>
Applicant:
<select id="examineeList">
<s:iterator value="examineeList" var="examinee">
<option value="${examinee.name}" id="${examinee.id}">${examinee.name}</option>
</s:iterator>
</select>
</div>
<div class="form-group col-lg-3">
<label for="examineeFather">Father:</label>
<input type="text" class="form-control" id="examineeFather"
name="examinee.father" placeholder="-----" maxlength="50" required />
</div>
<div class="form-group col-lg-3">
<label for="examineeMother">Mother:</label>
<input type="text" class="form-control" id="examineeMother"
name="examinee.mother" placeholder="-----" maxlength="50" required />
</div>
Moreover, if I have not choose any examinee, the input tags should have no value and after selecting the examinee, I can still change the value of 2 input tags whenever I want to (my instructor said that just in case i want to rename my father and mother, lol). Also, If I have selected an examinee, I can save directly with the default value of father and mother retrieved from the database. After all, saving the entry to the database follows.
Can anybody help me with the JavaScript code? I'm still learning it and only familiar with its basic/usual functions. Any hints and suggestions would be really much appreciated.
Thank you in advance!

How to implement classic javascript functions in Meteor?

I continue working on my meteor app, and am currently facing a new problem.
I'm still not a level 100 master of Meteor.js, but I kinda start to know it.
But today I discovered but challenges :
The first is that I want my textarea to grow automatically in height
as I'm typing, exactly like facebook do it, without a drag option.
For that, I've tried to implement 2 different solutions : the first
being to call the Jquery autogrow() function, the second one being to
code my own function to modify the css number of row. Unfortunately,
none of them gave me a result.
The second challenge I face is that i want to make my
bootstrap compliant, exactly like it is described here :
http://silviomoreto.github.io/bootstrap-select/
The problem being : no matter in which js file I enable Bootstrap-select, or allow the textarea to autogrow(), nothing happens.
So here is my question : when I build a meteor app, where and how do i implement such function from bootstrap and JQuery ? What are the good habits to have, the tips I should know to improve my app structure and fonctionnality ?
Edit : here is my select code, when i apply the solution proposed by Ethan, i do well get the css applied, but the select doesn't deploy anymore by clicking on it.
<div class="well">
<h3>Account informations :</h3>
<label for="bio">My presentation :</label>
<textarea id="bio" rows="5" cols="100" placeholder="Present yourself (hobbies, job...)"></textarea><br>
<label for="nativeLang">I speak :</label>
<select class="show-tick" id="nativeLang" data-style="btn-primary" data-live-search="true" data-max-options="2" multiple>
{{#each isoLangs}}
{{>isoLang}}
{{/each}}
</select><br>
<label for="learningLang">I want to practice :</label>
<select class="" id="learningLang" data-style="btn-primary" data-live-search="true" multiple>
{{#each isoLangs}}
{{>isoLang}}
{{/each}}
</select><br>
</div>
Thanks you,
David

Categories