Please help me in this situation i have uploaded the code through image your can see the code
Selector IDs should be unique while your IDs are identical "wakeupdaily". There are a number of ways to read select tag values, but the simplest dependency free solution would be to use native JS.
function select1() {
var res = document.getElementById("wakeupdaily1").value;
document.getElementById("result1").innerHTML = res;
}
function select2() {
var res = document.getElementById("wakeupdaily2").value;
document.getElementById("result2").innerHTML = res;
}
<select name ="daily1item1[]" id="wakeupdaily1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button onclick="select1()">Get Value</button>
<p id="result1"></p>
<select name ="daily1item2[]" id="wakeupdaily2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button onclick="select2()">Get Value</button>
<p id="result2"></p>
Related
I am attempting to have 10 drop down selections with 3 choices: 1,2, or 3, and save each selection as an integer, then add them all up and have them displayed. I'm not sure how to do this in HTML and would like some help.
This is an example of a selection I have attempted to use (from w3schools), but I don't see how to temporarily store the input as an integer and then use it later.
<!DOCTYPE html>
<html>
<body>
<h1>The optgroup element</h1>
<p>The optgroup tag is used to group related options in a drop-down list:</p>
<form action="/action_page.php">
<label for="number">Choose a number:</label>
<select name="numbers" id="numbers">
<optgroup label="Numbers">
<option value="three">3</option>
<option value="two">2</option>
<option value="one">1</option>
</optgroup>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Any kind of help is appreciated.
Most of the html you posted is not necessary, all you really need is your selects. The form element is really only used for communicating information from a user to a server. As far as what your HTML should look like:
<body>
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</body>
To collect input from multiple selects, as you are describing would use javascript. The following code returns a list of html elements with the class of '.select'.
let selectArray = document.querySelectorAll('.select');
Next you would want to loop through and add them to a variable.
let number = 0;
for(let i = 0; i < selectArray.length; i++){
number += parseInt(selectArray[i].value);
}
There are a few ways to save variables, for your use I recommend using localStorage.
I have three dropdowns:-
<form name="myForm" data-ng-submit="save(myForm.$valid)"novalidate="novalidate">
<label>1st</label>
<select ng-model="a.value[0]">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<label>2nd</label>
<select ng-model="a.value[1]">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<label>3rd</label>
<select ng-model="a.value[2]">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<button type="submit" class="btn btn-warning"><i class="fa fa-save"></i>
Save</button>
</form>
Controller code:-
$scope.a.value = [];
$scope.func = function () {
if (_.uniq($scope.a.value).length !== $scope.a.value.length) {
scope.notify("error", "Please set unique values");
}
};
What I want is that it should not saved if the values in the dropdowns are not unique. What validations should I apply and where?
What you have made looks like an initiative way to identify duplicate values using lodash. Theoretically your implementation should work. Did you try ?
Ideally you should check for the duplicates values when the user tries to select the value for better user experience. One way of doing that is you can remove the values selected in the 1st dropdown in the subsequent dropdowns and so on.
in your js add:-
$scope.allModels = {
firstDD: 'One',
secondDD: 'Two',
thirdDD: 'Three'
}
and then in your html to all Dropdowns use
<select ng-model="$scope.allModels.firstDD">
<select ng-model="$scope.allModels.secondDD">
<select ng-model="$scope.allModels.thirdDD">
eventiually in save function look for them
$scope.save = function(){
if($scope.allModels.firstDD != $scope.allModels.secondDD != $scope.allModels.thirdDD){
//do the thing you want or post it to server
}
}
I have three dropdowns:-
<form name="myForm" data-ng-submit="save(myForm.$valid)"novalidate="novalidate">
<label>1st</label>
<select ng-model="a.value[0]">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<label>2nd</label>
<select ng-model="a.value[1]">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<label>3rd</label>
<select ng-model="a.value[2]">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<button type="submit" class="btn btn-warning"><i class="fa fa-save"></i>
Save</button>
</form>
What I want is user select unique value in each dropdown, if not get notified.
$scope.a.value = [];
scope.func = function () {
if (_.uniq(scope.a.value).length !== scope.a.value.length) {
scope.notify("error", "Please set unique values");
}
};
I used the above code but didn't get it right? Please tell me what I am doing wrong? or give me a possible solution.
Also what I want is that it is not saved if the values are not unique. What validation should I apply and where?
Use ng-change="uniqCheck()" in each select directive:
<select ng-model="a.value[0]" ng-change="uniqCheck()">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
Use in the controller:
$scope.uniqCheck = function(){
$log.log('this is $scope.a', $scope.a);
if (_.uniq($scope.a.value).length !== $scope.a.value.length) {
// $scope.notify("error", "Please set unique values");
$window.alert("error - Please set unique values")
}
}
this should work as #Selva.K comment
Your code should work fine - _.uniq returns an array with duplicate values removed - so if you compare the length of the result of _.uniq with the result of the unmodified array you can determine if the values are all unique.
The step you're missing is that you are not calling your validation - as pointed out by Anandapriyan S.D.
You need to make sure that every time you change your select you call the function that checks the uniqueness.
<div ng-controller="Ctrl">
<label>1st</label>
<select ng-model="a.value[0]" ng-change="uniqCheck()">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<label>2nd</label>
<select ng-model="a.value[1]" ng-change="uniqCheck()">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<label>3rd</label>
<select ng-model="a.value[2]" ng-change="uniqCheck()">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
</div>
function Ctrl($scope) {
// not sure why you are nesting values onto a, unless a has more important information
// you could just use $scope.a = []; and then use $scope.a[0] ...
$scope.a = {};
$scope.a.value = [];
$scope.notify = function(error, message) {
alert(error + ': ' + message);
}
$scope.uniqCheck = function() {
if (_.uniq($scope.a.value).length !== $scope.a.value.length) {
$scope.notify("error", "Please set unique values");
}
};
}
https://plnkr.co/edit/UARPwYWQGjJux9FrQwFc?p=preview
I want to make the contains of a second drop down menu dependent on what is selected in the the first. In my case wish to do it for a car selection option. i.e when the car make is selected this then populates the model drop down menu with the relevant models.
As there are a lot of makes of car I would like to keep it concise if possible I presume arrays of models for each make is the solution but how do implement this.
I have look at various solutions and cannot find a suitable answer to this, any suggestions/examples would be gratefully appreciated.
I am using jsp.
Make:<select>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="ford">Ford</option>
<option value="toyota">Toyota</option>
</select>
You could do it with some simple JS and css ( here is a JSFiddle: http://jsfiddle.net/N7Q57/1/)
Make:
<select name="cars" id="cars">
<option selected value="Choose">Choose</option>
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Ford">Ford</option>
<option value="Toyota">Toyota</option>
</select>
<div id="brands">
<select class="audi">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select class="bmw">
<option value="3">3</option>
<option value="4">4</option>
</select>
</div
the jQuery
$("#cars").change(function () {
var string = "";
string = $("select#cars option:selected").text();
if (string == "Audi"){
$("#brands .bmw").hide();
$("#brands .audi").show();
$("#brands").show();
} else if (string == "BMW"){
$("#brands .audi").hide();
$("#brands .bmw").show();
$("#brands").show();
}
})
and the CSS:
#brands{
display: none;
}
I have a drop down:
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
How would I select item 2 programmatically?
First get a handle on that select somehow:
var select = document.getElementsByTagName("SELECT")[0];
Then manipulate the selectedIndex property (I believe it's a zero-based index):
select.selectedIndex = 1;
If you're talking about pre-selecting an item, simply set the item as "selected" as follows:
<select>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
If you're using plain HTML:
<option selected value="2">2</option>
If you're able to use jQuery, use the val() method:
<select id="foo"> //give it an id
$("#foo").val("2");
jQuery edition...
$('#your_select').val('2');
<select>
<option value="1">1</option>
<option value="2" selected>2</option>
</select>
The easiest solution is this:
<select>
<option value="1">1</option>
<option selected value="2">2</option>
</select>