IE: Javascript onchange function getting empty value - javascript

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).

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.

Option not removing in jquery

Hey I have an issue with my code on IE. Basically it won't remove the option on IE. It works fine on chrome.
function removeYrEndAndPettyCashCat() {
for (var i = 0; i < catsToRemove.length; i++) {
$('option[value = "' + String(catsToRemove[i].ID) + '"]').remove();
}
}
I have checked a few posts on this site and they say that .remove should work and it does in the console. However when I am trying to remove upon clicking on the dropdown the first time the dropdown appears it has the option still there. If I close the dropdown and open it again the option is now gone. This is only happening in IE. Has anyone come across this and if so could you suggest a fix?
Which IE browser are you using
Are you sure you execute your code on document ready or when the select is filled/created.
I just worked on a sample and it seems to work in IE11.
$(document).ready(function(){
$('select[name="test"] option').each(function(){
if($(this).val() === "remove"){
$(this).remove();
}
});
});
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<select id='test' name="test">
<option value="remove">Remove1</option>
<option value="remove">Remove2</option>
<option value="keep">Remove3</option>
<option value="remove">Remove4</option>
<option value="keep">Remove5</option>
<option value="keep">Remove6</option>
<option value="remove">Remove7</option>
<option value="remove">Remove8</option>
<option value="remove">Remove9</option>
</select>
</body>
</html>
I found a fix by adding a timeout. Basically IE is executing the javascript before the dropdown is being loaded dynamically. This is really annoying as Chrome doesn't have this issue.

Setting select box using jQuery on document ready

Can anyone suggest how I get to change the selected item in a select menu with jQuery - I've tried the following but without success. Using this snippet how would I use jQuery to set to value '5' for example (eg Cambridgeshire) as the 'selected' value.
<script type="text/javascript">
$(document).ready(function() {
$('#county_id option[value=3]').attr('selected', 'selected');
});
<html>
<select name="county_id" id="county_id">
<option value="1">Bedfordshire</option>
<option value="2">Berkshire</option>
<option value="4">Buckinghamshire</option>
<option value="5">Cambridgeshire</option>
</select>
</html>
You just need to use the val method.
$('#county_id').val(5);
This should work in most cases and will automatically select the correct option.
<script type="text/javascript">
$(document).ready(function() {
$('#county_id').val(3);
});
</script>
Should be able to use a jquery selector than edit the attributes.
$('input:radio[name=county_id]')[3].checked = true;
or
$('input:radio[name=county_id]:nth(3)').attr('checked',true);
In this case, 3 is the counter associated with Cambridgeshire (remember, counting starts at zero).
via

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!

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

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.

Categories