I want to add placeholder or name on the select.. I want "Pet Type" will show up but the "Pet 1" will show..thanks..
<select name="Pet Type">
<option value="A">Pet 1</option>
<option value="B">Pet 2</option>
<option value="C">Pet 3</option>
</select>
I want to add placeholder or name on the select.. I want "Pet Type" will show up but the "Pet 1" will show..thanks..
Use <option value="" disabled selected>-- Pet Type --</option> as your first option, see How do I make a placeholder for a 'select' box?
Related
I have multiple select with the same name like this :
<select name="test[]"><option>blah....</option></select>
<select name="test[]"><option>blah....</option></select>
<select name="test[]"><option>blah....</option></select>
<select name="test[]"><option>blah....</option></select>
in php code i have :
$atest = $_POST['test'];
print_r($atest);
But, I got only data from not empty select, how to force $_POST to include all select disregarding it has value or not, so the array contains always 4 items.
thank you.
Multiple select you can use
<select name="test[]" size="7" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
After request you check $_POST['test'] is array that contains selected options
$test = $_POST['test'];
var_dump($test);
I have two dropdown menus in an Angular form. One is country and the other is country dialing code. When the user selects USA on the first dropdown, I want to update the second dropdown to default to +1 for the dialing code. Otherwise, the second dropdown should deafult to the placeholder "Select Country Code". I have successfully done this using javascript, but Angular still considers the form to be invalid when submitted. I've tried forcing the field to become valid in the javascript, but it doesn't seem to work. Is there a way to do this using javascript or an ng command in the HTML? I would like to keep the html formatted as is (i.e. with the select and options tags).
HTML:
<select required
class="form-control vertical-gap-5--bottom color-gray--warm-8"
id="country" name="country" type="text"
ng-model="contactSession.country">
<option data-countryCode="UG" value="256">Uganda</option>
<option data-countryCode="UA" value="380">Ukraine</option>
<option data-countryCode="AE" value="971">United Arab Emirates</option>
<option data-countryCode="GB" value="44">United Kingdom</option>
<option data-countryCode="US" value="1">United States</option>
<option data-countryCode="UY" value="598">Uruguay</option>
<option data-countryCode="UZ" value="998">Uzbekistan</option>
</select>
<select required
class="form-control vertical-gap-5--bottom color-gray--warm-8"
id="countryCode" name="countryCode" type="text"
ng-init="contactSession.countryCode = '1'"
ng-model="contactSession.countryCode">
<option value="" selected="selected">Select Country Code</option>
<option data-countryCode="UA" value="380">Ukraine (+380)</option>
<option data-countryCode="AE" value="971">United Arab Emirates(+971)</option>
<option data-countryCode="GB" value="44">United Kingdom (+44)</option>
<option data-countryCode="US" id="usaSelection" value="1">United States (+1)</option>
<option data-countryCode="UY" value="598">Uruguay (+598)</option>
</select>
JS:
$('select[name=country]').change(function () {
if ($(this).val() == '1') {
document.getElementById("countryCode").value = document.getElementById("usaSelection").value;
} else {
document.getElementById("countryCode").value = "";
}
});
I've made a fiddle, but I am not sure whether this is same as your intent or not.
Change select box
<select ng-options="country.code as country.nameAndCode for country in countries"
ng-model="selectedCountryAndCode"
ng-change="changeCountryAndCode();"
required>
<option value="">Select Country Code</option>
</select>
If you use 'ng-options', it'll make code more simple.
.
.
UPDATE
Here's updated fiddle.
A little modified following as I've understood.
.
.
.
Latest UPDATE
Here's another updated fiddle
I have this in my code
$this->Form->month('cc_month',['monthNames' => false]);
It generates the following code:
<select name="cc_month[month]">
<option value="" selected="selected"></option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
But I only want <select name="cc_month">, without the [month] prefix. How can I do that?
The method
Cake\View\Helper\FormHelper::month(string $fieldName, array $attributes)
is meant to be used with date related fields.
The property $fieldName will be used as a prefix for the HTML name attribute of the select element, as described in Creating Date & Time Related Controls.
In your case, I understand that field month stores an integer. You can use the following code to generate the appropriate SELECT tag:
echo $this->Form->select('cc_month',range(1,12))
Angular < 1.4 works with ng-options shown as such:
<select ng-options="option.value as option.label for option in options" ng-model="selectedValue">
With the following array of options:
[{ value:"4_220588",label:"dropdown 1-test value 1"},{value:"4_220589",label:"dropdown 1-test value 2"}]
If you look at the resultant HTML is is as you would expect:
<select ng-options="option.value as option.label for option in options" ng-model="selectedValue" class="ng-pristine ng-valid ng-touched">
<option value="" class="">-- SELECT ONE --</option>
<option value="0" label="dropdown 1-test value 1">dropdown 1-test value 1</option>
<option value="1" label="dropdown 1-test value 2">dropdown 1-test value 2</option>
</select>
As soon as you change the angular version to Angular 1.4+, the option value attribute get's messed up. Here is the output with the same ng-options using a newer version of angular:
<select ng-options="option.value as option.label for option in options" ng-model="selectedValue" class="ng-pristine ng-valid ng-empty ng-touched">
<option value="" class="" selected="selected">-- SELECT ONE --</option>
<option label="dropdown 1-test value 1" value="string:4_220588">dropdown 1-test value 1</option>
<option label="dropdown 1-test value 2" value="string:4_220589">dropdown 1-test value 2</option>
</select>
What is the solution to getting the value to show up still as the index of the array?
Here is the plnkr: http://plnkr.co/edit/3CTUI9b9ntTGWhXDNQI5?p=preview
Your application logic should not be sensitive to the value attribute in the dropdown, because ng-model will set the model correctly regardless of what is output in the HTML. If you application logic does expect a specific format for this attribute, you have 3 ways to deal with this breaking change.
Use ng-repeat instead of ng-options. This is the least recommended option, as it changes the way the select lists work significantly.
Use a track by clause to enforce the key format that you are expecting, i.e. option.value as option.label for option in options track by option.value. This presumes that option.value exists and is the value you wish to represent. http://plnkr.co/edit/TSXfkpf1lhsE9QYa2NAc?p=preview
Change your application logic to expect the hashkey instead, or preferably correct the logic so that it only relies upon ng-model.
One solution would be to use ng-repeat over the options.
<select ng-model="vm.selectedValue">
<option value="" selected disabled>-- SELECT ONE --</option>
<option ng-repeat="option in options"
value="$index"
ng-selected="option === vm.selectedValue">
{{option.label}}
</option>
</select>
Here is your updated Plunkr.
This should do the trick:
<select ng-options="index as option.label for (index, option) in options2" ng-model="vm.selectedValue">
<option value="">-- SELECT ONE --</option>
</select>
On render the value of the selected option would be string:index but will output the desired value without the type included. Here is your edited plunker with the expected result in the Selected Value:
Plunker
I've got a very simple form with a select that contains all the states + abbreviations. When using the keyboard to navigate the second keypress doesn't change ng-model value in certain circumstances. For example if you tab to the select element and hit T it will properly select Tennessee and TN will be placed into the ng-model. Hitting down arrow or T a second time updates the displayed value to Texas, but ng-model is still set to TN. Weirdly enough this doesn't occur if its 2 different letters, so T followed by A correctly puts AL into the ng-model.
The HTML looks like this:
<div>
<label for="user_city">City</label>
<input type="text" name="user_city" id="user_city" ng-model="user.city" />
<label for="user_state">State*</label>
<select name="user_state" id="user_state" ng-model="user.state" style="width: 228px" required>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
Here is a jsfiddle demonstrating the issue: http://jsfiddle.net/cKF6Q/2/
To duplicate, click the city box and then press TAB to focus the select box and type T T. You'll see user.state go to TN on the first press of T, but the second one is ignored.
NOTE: This is only the SECOND keypress so you have to reload the page between tests.
I had the exact same problem. Here's a jsFiddle - the first dropdown has been "fixed", the second one has not (just for demonstration).
<div ng-app>
<input type="text" name="name" ng-model="form.name" />
<select name="expirationMonth" ng-model="form.expirationMonth">
<option value="">--</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
</select>
<select name="expirationYear" ng-model="form.expirationYear">
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
</select>
<pre>{{ form | json }}</pre>
</div>
I noticed it with the down arrow key. I tab onto the field and press the down arrow. The first key press updates the model. The second key press updates the form element but not the model. The third key press and every key press after that updates the model as you would expect.
The Fix
Add an extra option with a blank value to the top of the list. By making the value blank, it will not interfere with form validation (marking the field as required, for instance). Also, AngularJS does allow you to include one static option when you bind to an array. From the AngularJS docs:
Optionally, a single hard-coded <option> element, with the value set
to an empty string, can be nested into the <select> element. This
element will then represent the null or "not selected" option.
UPDATE: Browser Diff
I've noticed that Chrome will update the display of the model with each keypress of the down arrow (except the second keypress when the static default option is not present, obviously). Chrome was the browser I used when writing the fiddle. Firefox, on the other hand, does not update the display of the model until i tab or click out of the field. Internet Explorer 11 updates the model "on the fly" similar to Chrome, but I wasn't able to reproduce this "2nd keypress issue" on IE 11. I don't have any other browsers to test on.