I need help with this simple thing. I have a multiple selection input box and I want to get the values of the selected parameter using javascript. The problem is, that when I use:
x=document.form.box.value;
The form looks like this:
<form name="form">
<select name="box" multiple>
<option value="a">A</option>
<option value="b">B</option>
</select>
</form>
I always get just the first selected option. I need to get the values of all selected options as a string, ideally separated by commas. If I for example choose A, I get A, if B, I get B, but when I choose A and B, I get A again.
Any ideas?
First give your select box and ID, this will make it accessible via standard calls:
<select name="box" id="box" multiple>
<option value="a">A</option>
<option value="b">B</option>
</select>
Then you can loop thru individual options, appending only selected ones:
var sel = document.getElementById("box")
var sResult = "";
for (var i = 0; i < sel.options.length; i++) {
if (sel.options[i].selected){
sResult += sel.options[i].value + ','
}
}
if (sResult.length > 1) sResult = sResult.substring(0,sResult.length-1);
Working example: http://jsfiddle.net/LGCY6/2/
Related
I want to add option dynamically to select box using angular.
For example, if quantity limit is 4 then options should be 1, 2, 3, 4.
This is what i have tried:
<select class="form-control" ng-model="selectedQuantity">
<option value="1">1</option>
<option ng-repeat="n in range(1,edata.Products.QuantityLimit)" value="{{n}}">{{n}}</option>
</select>
Here QuantityLimit different for each select box.
Angular code:
$scope.range = function (min, max, step) {
step = step || 1;
var input = [];
for (var i = min; i <= max; i += step) input.push(i);
return input;
};
this works as expected if i remove ng-model="selectedQuantity" from select. Is there any way to do this without removing ng-model="selectedQuantity"
You can use inline ngInit directive to set an initial value to the model directly from the view:
<select class="form-control" ng-model="selectedQuantity" ng-init="selectedQuantity = 1">
And of-course, set a default value from the controller:
$scope.selectedQuantity = 1;
Choose the one you like
Try this embedding the options in the select tag itself using ng-options,
<select class="form-control" ng-options="n for n in range(1,edata.Products.QuantityLimit)" ng-model="selectedQuantity">
<option value="1">1</option>
</select>
The first option will be always 1, if you can you can shift it to controller.
recently I have been trying to effectively parse values to a <selection> tag. For example, I have been trying:
/index.html?exampleId=examplevalue
Yet, this doesn't seem to be working. For added context, here is an example that replicates the structure of my <selection> tag:
<form method="GET">
<select id="CategorySelect" name="CategorySelect">
<option value="default">Select an Option</option>
<option value="dogs">Dogs</option>
<option value="cats">Cats</option>
<option value="horses">Horses</option>
<option value="otheranimals">Other animals</option>
</select>
</form>
If I understand your question correctly, you're trying to pre-fill form inputs based on the query string of the URL.
If so, first you need to parse the query String.
In this example I assign the result of an Immediately Invoked Function Expression to a variable named $_GET (after the variable with the same in PHP used to store the same information).
Inside the IIFE I split the query string by all occurences of ? or &, then loop through the results and split any non-falsey items by =. I assign the results of the final split to an object.
Finally return that object to the $_GET variable.
var $_GET = (function(s,o,a) {
return s.split(/\?|\&/g).forEach(function(i){i&&(a = i.split('='))&&(o[a[0]] = a[1]);}), o;
// split the query by ? or &; iterate the results; split each item by =; assign the result; return the object
})(location.search,{},[]);
Next you need to find elements with the correct names and set the values. So iterate the query object we just made; find all elements that have the correct name; iterate the elements' test the elements tag names so we know how to properly set the value.
This method will work even if there are multiple forms with similar elements on the same page.
// Loop through $_GET; Get a list of all nodes, and the value to set
for(var i in $_GET) (function(nodelist, value){
// Loop through the nodelist
for(var i in Object.keys(nodelist)) (function(el){
// If the element is an input element, set it's value
if(/input/i.test(el.tagName)) el.value = value;
// If the element is a select element, set the default option
if(/select/i.test(el.tagName)) el.querySelector('[value="'+value+'"]').selected = true;
})(nodelist[i]);
})(document.querySelectorAll('[name="'+i+'"]'), $_GET[i]);
Expand and run the following demo to see it in action.
var $_GET = (function(s,o,a) {
return s.split(/\?|\&/g).forEach(function(i){i&&(a = i.split('='))&&(o[a[0]] = a[1]);}), o;
// split the query by ? or &; split each item by =; assign the result; return the object
})("?fruit=banana&greeting=evening",{},[]);
// ^^ For demo purposes only, use location.search instead.
// Loop through $_GET; Get a list of all nodes, and the value to set
for(var i in $_GET) (function(nodelist, value){
// Loop through the nodelist
for(var i in Object.keys(nodelist)) (function(el){
// If the element is an input element, set it's value
if(/input/i.test(el.tagName)) el.value = value;
// If the element is a select element, set the default option
if(/select/i.test(el.tagName)) el.querySelector('[value="'+value+'"]').selected = true;
})(nodelist[i]);
})(document.querySelectorAll('[name="'+i+'"]'), $_GET[i]);
<form>
<select name="fruit">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="banana">Banana</option>
</select>
<select name="greeting">
<option value="morning">Good Morning</option>
<option value="afternoon">Good Afternoon</option>
<option value="evening">Good Evening</option>
</select>
</form>
<form>
<select name="fruit">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="banana">Banana</option>
</select>
<select name="greeting">
<option value="morning">Good Morning</option>
<option value="afternoon">Good Afternoon</option>
<option value="evening">Good Evening</option>
</select>
</form>
If you submit the form you will receive the values in $_GET (or $_POST depending on form method)
<?php
if(isset($_GET['CategorySelect'])){ // test if you have submitted something
echo $_GET['CategorySelect'];
}
?>
<form method="GET">
<select id="CategorySelect" name="CategorySelect">
<option value="">Select an Option</option>
<option value="dogs">Dogs</option>
<option value="cats">Cats</option>
<option value="horses">Horses</option>
<option value="otheranimals">Other animals</option>
</select>
<input type="submit" value="submit"><!-- to be able to submit your form -->
</form>
I have a select input with an option called "custom". So when the user selects "custom" from the list the value needs to be that of a corresponding text input box.
<select id="choice" >
<option value="">custom</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
<input id="custom_choice" />
The "custom" text doesn't need to change, just the value for when the data from the form is collected.
Any ideas?
Thanks
Here you go,
HTML
<select id="choice" onChange="javaScript:getIt(this)">
<option value="">custom</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
<input id="custom_choice" />
JavaScript
getIt = function(obj) {
var val = document.getElementById("choice").value;
//If you want to get value then user above line.
var innerhtml = obj.options[obj.selectedIndex].text;
document.getElementById("custom_choice").value = innerhtml;
}
FIDDLE
JavaScript would work best for this, something like this:
Bear in mind these would be two separate files:
var choice = document.getElementById("choice");
var custom_choice = document.getElementById("custom_choice").innerHTML = choice;
I think this may work but you would have to check it.
this is probably a very basic question, but I can't seem to figure it out.
In the code below you can see that I have a select-option block. It works fine. The only problem is that when I select one of the options (and get redirected to the corresponding page), the tick remains at the default value ("Sort...") of the select-option function.
<select name="sort" onchange="location = this.options[this.selectedIndex].value;">
<option value="">Sort...</option>
<option value="index.php?ascending=true">Preis aufsteigend</option>
<option value="index.php?descending=true">Preis absteigend</option>
</select>
When a user selects "Preis aufsteigend", I would like the tick to be displayed at the corresponding option in the field...
Can anybody help?
Thanks in advance!
You need to reverse your onchange function. On page load look for the url variable you set then select the appropriate option.
Script
var sel = document.getElementById('sort');
var opts = sel.options;
for(var opt, j = 0; opt = opts[j]; j++) {
if(window.location.search.indexOf(opt.value.split('?')[1]) > -1 ) {
sel.selectedIndex = j;
break;
}
}
HTML
<select id="sort" name="sort" onchange="location = this.options[this.selectedIndex].value;">
<option value="">Sort...</option>
<option value="index.php?ascending=true">Preis aufsteigend</option>
<option value="index.php?descending=true">Preis absteigend</option>
</select>
http://jsfiddle.net/t95wqm48/
The list attribute / datalist element of HTML5 forms shows a dropdown menu of choices one can pick from, edit, and even type in some text. All this can be achieved at once with a clean and powerful code:
<input list="states">
<datalist id="states">
<option value="One">
<option value="Two">
</datalist>
However, how to make such a form send a value which is different from the option text, as in the usual select / option (below)?
<select>
<option value="1">One</option>
<option value="2">Two</option>
</select>
Seems you can't with pure HTML without using some JS+CSS help.
try this i hope its help you.
html
<input id="datalisttestinput" list="stuff" ></input>
<datalist id="stuff">
<option id="3" value="Collin" >
<option id="5" value="Carl">
<option id="1" value="Amy" >
<option id="2" value="Kristal">
</datalist>
script
function GetValue() {
var x = $('#datalisttestinput').val();
var z = $('#stuff');
var val = $(z).find('option[value="' + x + '"]');
var endval = val.attr('id');
alert(endval);
}
Best Wishes
Kumar
Below is Kumah's modified answer that uses a hidden field to contain the value which ultimately gets sent to the server.
$('#inputStates').change(function(){
var c = $('#inputStates').val();
$('#inputStates').val(getTextValue());
$('#statesHidden').val(c);
});
function getTextValue(){
var val = $('#inputStates').val();
var states = $('#states');
var endVal = $(states).find('option[value="' + val + '"]');
//depending on your logic, if endVal is empty it means the value wasn't found in the datalist, you can take some action here
return endVal.text();
}