What would be the best way to do the following:
A drop-down list with COUNTRYies. The list of countries are in json format, retrieved from a web service.
Show or pre-fill the STATE dropdown based on Country selection.
This looks to be a standard requirement but was not able to find a proper solution.
What we have done as of now if using Sightly, make a call to get the Country list in a json and populate, and based on selection show STATES(for USA) or PROVINCES(for Canada) and doing Show/Hide. But was looking for better alternatives.
<!-- COUNTRY -->
<select class="myContactFieldSelect" id="companyCountry" tabindex="22" name="countryID">
<option value="">Please Select</option>
<div data-sly-list.country="${jHelper.pJSON.countryList}" data-sly-unwrap>
<option value="${jHelper.pJSON.countryList[country].countryID # context='html'}">
${jsonHelper.parsedJSON.countryList[country].countryLongName # context='html'}
</option>
</div>
</select>
<!-- STATES or PROVINCES -->
<select class="myContactFieldSelect" id="companyState" tabindex="20" name="stateLongName" style="display: none;">
<option selected="selected" value="">Please Select</option>
<div data-sly-list.state="${jHelper.pJSON.stateListUS}" data-sly-unwrap>
<option>${jHelper.pJSON.stateListUS[state].stateLongName # context='html'}</option>
</div>
</select>
<!-- OR -->
<select class="myContactFieldSelect" id="companyProvince" tabindex="21" name="provinceLongName" style="display: none;">
<option selected="selected" value="">Please Select</option>
<div data-sly-list.province="${jHelper.pJSON.stateListCA}" data-sly-unwrap>
<option>${jHelper.pJSON.stateListCA[province].stateLongName # context='html'}</option>
</div>
</select>
My solution will be:
Manage Country/City hierarchy in Taxonomy
Create a Json from taxonomy for Country-City
Use Javascript to read Json and populate correct city for country
Above solution can be enhanced by pre-populating country/city based on user geolocation.
Related
I have a select field that starts with an option that says "Select Location" and want to force the user to choose something before submitting. I saw this article about disabling the Submit button with amp-bind until an option is available, but I would like to use the validation built into amp-form if at all possible.
I have tried using the pattern attribute on the <select> and <option> fields. I have used something similar to pattern="^((?!default).)*$" and multiple variations without any success.
<form
id="contactForm"
method="post"
action-xhr="https://valid.json/endpoint"
custom-validation-reporting="show-all-on-submit"
target="_top">
[...]
<select
id="formLocation"
name="location_id"
pattern="^((?!default).)*$"
required>
<option value="default" disabled selected>Select Location</option>
<option value="newyork">New York</option>
<option value="losangeles">Los Angeles</option>
</select>
<span
visible-when-invalid="patternMismatch"
required
validation-for="formLocation">
Please Choose a Location
</span>
[...]
<input
id="formSubmit"
type="submit"
value="Submit">
</form>
When I click Submit without changing the value, I expect the validation error to appear, but it doesn't. Is it possible to use this validation method with Select fields? Or will I have to just use the aforementioned amp-bind method?
I am assuming that you have added all required script js files form the form. I have provided an example of the rating.
AMP is providing two types of validation one which is for the blank value and another when the pattern does not match. You are missing the blank value validation.
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<form action-xhr="here will be your url" custom-validation-reporting="show-all-on-submit" target="_top" method="post" class="wpcf7-form i-amphtml-form amp-form-dirty" novalidate="">
<label for="rating">Select rating</label>
<select name="rating" required="" class="user-invalid valueMissing" id="show-all-on-submit-select" aria-invalid="false">
<option value="">Rate…</option>
<option value="5">Perfect</option>
<option value="4">Good</option>
<option value="3">Average</option>
<option value="2">Not that bad</option>
<option value="1">Very poor</option>
</select>
// You are missing this one
<span visible-when-invalid="valueMissing" validation-for="show-all-on-submit-select">
Please select rating..!!
</span>
// This is for the pattern validation message. If the field is having the value but not does not match with patter this span will provide the validation
<span visible-when-invalid="patternMismatch" validation-for="show-all-on-submit-select">
Please select rating..!!
</span>
<input type="submit" name="submit" value="Submit" class="wpcf7-form-control wpcf7-submit button yellow-button">
</form>
Now, If you need the same solution in your code just put below span I think it must work for you:
<span
visible-when-invalid="valueMissing"
required
validation-for="formLocation"
validation-for="show-all-on-submit-select">
Please Choose a Location
</span>
Thanks
I have a form that has input fields and and some select dropdowns. All the input fields are being populated correctly from the input object, but the dropdowns are not being selected to the correct value, and always have a blank option first.
This is what the template looks like:
<div class="form-group">
<label for="state">State:</label>
<select class="form-control formField" id="state" required [(ngModel)]="user.state" name="state">
<option *ngFor="let state of states" [ngValue]="state">{{state}}</option>
</select>
</div>
I cant figure out what I am missing.
user.state is a string that contains a 2-letter state abbreviation.
States is an array of US states using 2-letter abbreviation.
The best way I've found is as follows:
<div class="form-group">
<label for="state">State:</label>
<select class="form-control formField" id="state" required [(ngModel)]="user.state" name="state">
<option [ngValue]="undefined" disabled selected>Select a State</option>
<option *ngFor="let state of states" [ngValue]="state">{{state}}</option>
</select>
The disabled attribute does not allow that option to be selected from the dropdown. Hope this helps.
I asked this over at Expression Engine Answer but was directed here. I would like to show a snippet of code only if a certain option is selected in a tag. This is what I have but it does not work.
<select id="size" name="size" value="">
<option value="one">one</option>
<option value="two">two</option>
</select>
{if size.value == "two"}
//code I want to show
{/if}
Using Twitter Boostrap, I'm trying to create a form dropdown with dividers within the dropdown, corresponding to each section. Is that possible?
JSFiddle included
I'd like to create something like:
<!--GROUP-->
<option>1</option>
<option>2</option>
<option>3</option>
<!--GROUP-->
<option>4</option>
<option>5</option>
<option>6</option>
To achieve this, you could use optgroup
<div class="container">
<select>
<optgroup label="Group 1">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</optgroup>
<optgroup label="Group 2">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</optgroup>
</select>
</diV>
Updated fiddle: http://jsfiddle.net/codovations/M8pSH/
<select name="day" id="day">
<option value="0" label="Day:">Day:</option>
<option value="1" label="1">1</option>
</select>
<select name="month" id="month">
<option value="0" label="Month:">Month:</option>
<option value="1" label="January">January</option>
</select>
<select name="year" id="year">
<option value="2010" label="2010">2010</option>
</select>
Can I build a form part like this format using Zend_Form and Decorator? I have read many posting but couldn't find any which helps to pack more than one elements together inside a "dd" tag. Does it possible or not?
http://weierophinney.net/matthew/archives/217-Creating-composite-elements.html
This post goes onto explain how to create a composite object using Zend_Form_element and settings up custom decorators.
It is also built around having all date fields grouped together so you could probably just modify this example to get what you want.