Can't access the option value using javascript on Internet Explorer - javascript

I have the following setup
"<form name=\"mylimit\" style=\"float:left\">
<select name=\"limiter\" onChange=\"limit()\">
<option selected=\"selected\"> </option>"; ...
I wrote a js script to access the selected value of the selectField 'limiter' like so:
var w = document.mylimit.limiter.selectedIndex;
var url_add = document.mylimit.limiter.options[w].value;
//On every browser i get the expected value except on Internet Explorer. think IExplorer dont like the bolded portion above. Any clue?

IE is looking for the value attribute. It looks like other browsers are defaulting to the text displayed as the value if value="" is not found on the option tag. The following is what works on all major browsers.
<form name="mylimit" style="float:left">
<select name="limiter" onChange="limit()">
<option selected="selected" value='foo'>bar</option>
</select>
</form>
<script>
var index = document.mylimit.limiter.selectedIndex;
var value = document.mylimit.limiter.options[index].value;
alert(value); // Alerts 'foo'
</script>
This way you can have a seperate value and display for each option.

Did you try out one of these
document.mylimit.limiter.options[document.mylimit.limiter.selectedIndex].value
or
document.getElementById('limiter').options[document.getElementById('limiter').selectedIndex].value
This should help I think

document.getElementById("limiter").value works as well.

Related

Pre-select option in dropdown menu with URL

I'm working with this code snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// <![CDATA[
$(document).ready(function() {
// Parse your query parameters here, and assign them to a variable named `queryParams`
var option = queryParams.type;
$("#GCValue").val(option);
});
// ]]>
</script>
I don't have a lot of latitude with how I can affect the page, this is in the <body> section of the page, since I don't have access to the <head> tag.
I have this form:
<select id=GCValue>
<option val="10">10</option>
<option val="25">25</option>
<option val="50">50</option>
<option val="100">100</option>
<option val="250">250</option>
</select>
and I would like to use the URL of the page to select one of these five options (currently default is 10). I think it's supposed to be either https://www.mywebsite.com/gift-card/?type=2 or https://www.mywebsite.com/gift-card/?GCValue=2 but neither work. I'm pretty new to JS and JQuery, so I know I have to be doing something wrong. Any help appreciated.
According to your code your URL should be something like
https://www.mywebsite.com/gift-card/?type=10
You have to pass the option values to the URL instead of the option indexes based on your current code.

How to access the javascript variable inside html tags

I wanted to added javascript variable inside html code.
Here is my code:
<select id="currentrun" name="currentrun" >
<option value=""><script>selectedrun</script></option>
</select>
and my js function
var currentrun="";
var selectedrun="";
function setCurrentRun()
{
currentrun = document.getElementById("runlist");
selectedrun = currentrun.options[currentrun.selectedIndex].value;
}
But this doesn't work.
Can anyone help me to do this.
Thanks in advance.
You don't have to run the script like that.
The value of the currentrun can be retrieved as:
document.getElementById('currentrun').value
And for completeness, if you want to trigger a JavaScript function call each time the selection is modified, do this:
<select onchange="my_function();">
<option>...</option>
</select>
It seems like you are trying to set the text of the option element with javascript. Here is one way you can do it using the id of the element to get it and then set the text property of the element to your javascript variable:
<select id="currentrun" name="currentrun" >
<option id="currentoption" value=""></option>
</select>
<script>
document.getElementById("currentoption").text = selectedrun;
</script>
Be sure to put any necessary javascript that declares and sets the selectedrun variable before the above script.

Angular binding not working in Chrome/Opera

Hi this JSFiddle works in Internet Explorer and Firefox but no other browxsers work. The idea of the code is a currency converter that is up to date using the Yahoo Currency API. It doesn't update the $scope on the other browsers the way it is supposed to on Chrome. http://jsfiddle.net/xHmLT/13/
choose a post ({{visible.post}} is visible)
<select>
<option ng-repeat="shot in shots" ng-click="visible.post = shot.Name" value="{{shot.Name}}">{{shot.Name}}</option>
</select>
<div ng-repeat="shot in shots" ng-if="visible.post == shot.Name">{{shot.Rate | currency:'':''}}
</div>
<div ng-repeat="shot in shots" ng-if="visible.post == shot.Name">{{shot.Rate *5 | currency:'':''}}
</div>
I updated your fiddle and is working as you'd intended...
Your select is now populated via ng-options and the model is visible.post (as an object). As a result anywhere showing visible.post, is now showing visible.post.Name (field on the object)
<select ng-options="s.Name for s in shots" ng-model="visible.post"></select>
The initialization of the selected value is done in the success promise handler:
$scope.visible.post = $scope.shots[0];

IE: Javascript onchange function getting empty value

Why this Simple Javascript function not working in Internet Explorer Version 8.
Why myvalue is empty in Internet Explorer.
javascript debug myvalue==
This is working fine in Chrome/Firefox and shows the selected value correctly.
javascript debug myvalue=Item2=
Code
<html>
<script type="text/javascript">
function showValue(myvalue)
{
document.write("javascript debug myvalue=" + myvalue + "=\n");
}
</script>
<body>
<select id="items" onchange="showValue(this.value);">
<option>Item1</option>
<option>Item2</option>
<option>Item3</option>
</select>
</body>
</html>
That's because you don't have VALUES in your options. Something like this will work:
<option value="VALUE1">TEXT1</option>
But, if you actually need option's TEXT and not VALUE, you should use this:
var e = document.getElementById("items");
var txt = e.options[e.selectedIndex].text;
Refer to HTMLOptionElement DOM spec for more info on options.
If you were to use instead of this.value, this.options[this.selectedIndex], it might work in IE8 (which I don't have).

Why is'nt this JavaScript function not redirecting to selected option value?

I have a JavaScript function:
function redirect(location) {
window.location.href=location;
}
Which I'm using like so:
<select onChange="redirect(this.options[this.selectedIndex].value)">
<option value="http://mysite.com/videos">One</option>
<option value="http://mysite.com/music">Two</option>
</select>
I'm expecting for it to redirect to the selected option value, but does'nt seem to do anything? - bare in mind im new to JavaScript.
Hope someone can help! :)
Try this:
<select onChange="redirect(this.value)">
try this
<script>
function redirect() {
var location=document.getElementById("i").value;
window.location.href=location;
}
</script>
<select onChange="redirect()" id="i">
<option value="http://mysite.com/videos">One</option>
<option value="http://mysite.com/music">Two</option>
</select>
Your code itself is functional (i tried).
Where have you placed the function definition?
Is there any other javascript code on the page?
In which browser are you testing this?
If you're running it in Firefox check the error console (Tools->error console).
I also noticed that Internet Explorer 8 blocks this javascript, I haD to check allow blocked content for this to work.
can be because location is a short way to call window.location, so just rename your input parameter - _location, newLocation, loc, whatever else.
UPDATE
Nope, this should work. Having only
<select onChange="redirect(this.options[this.selectedIndex].value)">
<option value="http://mysite.com/videos">One</option>
<option value="http://mysite.com/music">Two</option>
</select>
<script type="text/javascript">
function redirect(location) {
window.location.href=location;
}
</script>
on the page gave me the desired result, so the error may be somewhere around - just give us more code!

Categories