In brief, in the profile page, I have the following code:
<select name="sex" >
<option value="Male"> Male</option>
<option value="Female">Female</option>
</select>
Looks fine :)
However,
When the user wants to update his choice,,, I have an update profile page where I put the same code as:
<select name="sex" >
<option value="Male"> Male</option>
<option value="Female">Female</option>
</select>
My problem is that I couldn't put the previously selected option as default when the page is loaded... Is there a way to load the page with the previously select option as default ?
Many thanx :)
I got the answer :) by implementing the JSTL - <c:if> Tag as follows:
<select name="gender">
<option value="Male" <c:if test="${THE_PATIENT.getGender() == 'Male'}"> selected </c:if>>Male</option>
<option value="Female" <c:if test="${THE_PATIENT.getGender() == 'Female'}"> selected </c:if>>Female</option>
</select>
Related
I have a html form which has a dropdown consisting of a few values. If the user does not select an option and moves to the next field, I need to give an error message. I have used the required attribute but it does not fire in Chrome and Firefox.
This is my code :
<select name="gender" id="gender" style="max-width:100%" required>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
The required attribute does not work on Chrome and Firefox. A JavaScript solution would also be good. At the time of submitting the data I am checking for empty fields but I would like to display an error message if the user does not select a value from the dropdown and moves to the next field.
Use below code, not need any script, use form tag
<!DOCTYPE html>
<html>
<body>
<form>
<select required>
<option value="">None</option>
<option value="demo">demo</option>
<option value="demo1">demo1</option>
<option value="demo2">demo2</option>
<option value="demo3">demo3</option>
</select>
<input type="submit">
</form>
</body>
</html>
Try using the onfocusout option on your select paired with some Javascript.
HTML
<select name="gender" id="gender" onfocusout="check()" style="max-width:100%" required>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
JS
function check(){
var x = document.getElementById("gender").selectedOptions[0].label;
if(x == "Select Gender"){
alert("Please select an option.");
}
}
CodePen.io: https://codepen.io/anon/pen/XQxQgw
There's undoubtedly a more efficient way of doing this and you would need to tweak the JS to check if all fields have been completed etc. but that's my two cents in a pinch!
I'm wondering if i can divide the <datalist> into sections like <optgroup> does. Many thanks!
Codes below:
<label>Location:</label>
<select>
<optgroup label="classroom">
<option>1A</option>
<option>1B</option>
</optgroup>
</select><br>
<label>Location</label>
<input type="text" name="location" class="form-control-lg" list="location">
<datalist id="location">
<option value="Classroom">
<option value="1A">
<option value="1B">
</datalist>
I have the following html code
<select name="Gender" class="form-control">
<option value="m">Male</option>
<option value="f">Female</option>
</select>
I want to change the select option on click with AngularJs.
I've tried almost everything, and I realize that the problem occurs when the click event is called, if there is no click event it works fine
HTML:
<body ng-app ng-controller="AppCtrl">
<div ng-click="setGender()">Set</div>
<select name="Gender" class="form-control">
<option value="m" ng-selected="{{GenderInfo.Gender =='m'}}">Male</option>
<option value="f" ng-selected="{{GenderInfo.Gender =='f'}}">Female</option>
</select>
</body>
AngularJs:
function AppCtrl($scope) {
$scope.setGender = function(){
$scope.GenderInfo = {
Gender: 'f'
}
}
}
JsFiddle:
http://jsfiddle.net/dCFd2/231/
You don't need curly braces inside ng-selected:
<option value="m" ng-selected="GenderInfo.Gender =='m'">Male</option>
<option value="f" ng-selected="GenderInfo.Gender =='f'">Female</option>
Try it like so:
<body ng-app ng-controller="AppCtrl">
<div ng-click="setGender()">Set</div>
<select name="Gender" class="form-control">
<option value="m" ng-selected="GenderInfo.Gender =='m'">Male</option>
<option value="f" ng-selected="GenderInfo.Gender =='f'">Female</option>
</select>
</body>
the ngSelected doesn't need {{}} because it evaluates the expression given.
Hope this helped. I've tested it with your jsFiddle and it seem to work fine.
See my code with ng-options:
<select ng-model="GenderInfo" name="Gender" class="form-control" ng-options="g.value as g.title for g in gender">
Javascript:
$scope.gender = [
{value:'m',title:'Male'},
{value:'f',title:'Female'}
];
$scope.GenderInfo = $scope.gender[0].value;//Set Default gender
You can use ng-options See Example
<select ng-init="model.Gender = genders[0].Key" name="Gender" class="form-control" ng-model="model.Gender" ng-options="g.Key as g.Gender for g in genders">
Is it possible to second drop down box dynamically populated based on the values on first drop down box.
<select name="category">
<option value="0">None</option>
<option value="1" rel="accessories">Cellphones</option>
<option value="2" rel="sports">Sports</option>
<option value="3" rel="cars">Cars</option>
</select>
<select name="items" class="cascade">
<option value="3" class="accessories">Smartphone</option>
<option value="8" class="accessories">Charger</option>
<option value="1" class="sports">Basketball</option>
<option value="4" class="sports">Volleyball</option>
<option value="6" class="cars">Corvette</option>
<option value="2" class="cars">Monte Carloe</option>
</select>
Yes it is possible. Using jquery it would look something like this:
$('select[name="category"]').on('change',function() {
// hide everything
$('select[name="items"] option').hide();
// show matching items
$('select[name="items"] .'+$(this).find(":selected").attr('rel')).show();
// make the top one selected
$('select[name="items"] .'+$(this).find(":selected").attr('rel')).first().attr('selected','selected');
});
If you want to pull the list more dynamically you can use the above as a starting point but fill in the options with an ajax call, as opposed to listing all the options out and hiding/showing.
I intend to "bring back" some information about a user in a form, so I have to place that info into the right inputs. Some are in a select structure.
I want to select the right option from that select structure, and for that I do like this:
<select class="m-wrap span12" name="gender">
{if $obj eq '1'}
<option value="">Seleccione</option>
<option value="1" selected>Hombre</option>
<option value="2">Mujer</option>
{elseif $obj eq '2'}
<option value="">Seleccione</option>
<option value="">Hombre</option>
<option value="2" selected>Mujer</option>
{else}
<option value="0" selected>Seleccione</option>
<option value="">Hombre</option>
<option value="2">Mujer</option>
{/if}
</select>
But I want to make it shorter so I don't repeat code lines. I have tried this but with no success:
<select class="m-wrap span12" name="gender" id="{$obj}">
<option value="1" id="1">Hombre</option>
<option value="2" id="2">Mujer</option>
<option value="0" id="3">Seleccione</option>
</select>
I'm using smarty template and codeigniter.
Thanks in advance, I'm new to programming.
<select class="m-wrap span12" name="gender">
<option value="1" id="1" <?=($obj == 1) ? 'selected="selected"' : '';?>>Hombre</option>
<option value="2" id="2" <?=($obj == 2) ? 'selected="selected"' : '';?>>Mujer</option>
<option value="0" id="3" <?=($obj == 3) ? 'selected="selected"' : '';?>>Seleccione</option>
</select>
In this case I'm using just one line of code with the help of form_helper
<div id='myform'>
{form_open('controller/method')}
{form_dropdown('gender',$genders,set_value('gender',$obj),'class = "m-wrap span8 chosen" data-with-diselect="1"')}
{form_close()}
</div>
Where
$genders is list of genders assigned to smarty variable like
$genders = array('0' => 'Seleccione', '1' => 'Hombre', '2' => 'Mujer')
'gender' is name attribute value of select tag
set_value() function sets the option selected where option value is equal to $obj
and other class like attributes of select tag
Note
form_helper must be loaded before display of a template
You can do this by making the option's hidden HTML value equal to that option's position within the select list, beginning with zero; then storing the server side value; then setting the selectedIndex of the menu equal to the stored value.
<select class="m-wrap span12" name="gender" id="gender_field">
<option value="0" selected>Seleccione</option>
<option value="1">Hombre</option>
<option value="2">Mujer</option>
</select>
<input type="hidden" id="gender_obj" value="{$obj}" />
<!-- the above line passes the server-side variable into the
-- HTML for JavaScript to use -->
<script>
(function (){
var gender_field = document.getElementById('gender_field'),
gender_obj = document.getElementById('gender_obj'),
n;
if (!gender_field || !gender_obj) return;
n = gender_obj.value - 0;
/* will be NaN if nothing (or nothing numerical) is there,
* such as on the first visit */
gender_field.selectedIndex = gender_field.options[n] ? n : 0;
})();
</script>
I could finally achieve this. Using Smarty the sintax can be:
<select class="m-wrap span8 chosen" name="gender" data-with-diselect="1" value="">
<option value=" " {if $okInfo['gender'] eq ' '}selected{/if}>Seleccione</option>
<option value="1" {if $okInfo['gender'] eq '1'}selected{/if}>Hombre</option>
<option value="2" {if $okInfo['gender'] eq '2'}selected{/if}>Mujer</option>
</select>
So that way, if the user selects from a dropdown menu a certain option but then doesn't pass form validation, the data that he entered and it's ok should be retreive in the same way. So for a select html tag, this is the way of "bringing back" the data he had entered.