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.
Related
Suppose I have a file "file.html" with the content:
<select>
<option vale="apple.html">Apple</option>
<option vale="ball.html">Ball</option>
<option vale="cat.html">Cat</option>
</select>
Now I want the value and the names of each option tag from this file to be displayed in another file "new.html" as:
Apple
Ball
Cat
What will be the best possible way of achieving this? and also this must be dynamic so that in adding a new option tag in "file.html",the value and names of that updated option tag is displayed automatically in new.html.
My whole intention is to maintain one common file to obtain the select option list and the html links separately from that one common file.Changing the data in that one common file will trigger the change in option list and the html link in different files automatically.In this case that one common is the "file.html".
Any advice on how to achieve the result a different way is also welcomed.
Thank you in advance.
You can use localStorage to store each link and access it to other page.
Use JQuery library to make life easier.
Use this as reference:
On your file.html
<select id="linkList">
<option value="facebook.com" >Facebook</option>
<option value="google.com" >Google</option>
<option value="yahoo.com" >Yahoo</option>
</select>
On your new.html
<div id="links">
</div>
The javascript:
<script>
$(document).ready(function(){
var linkList = [];
$('select#linkList').children('option').each(function(i,v){
linkList.push( $(this)[0].value );
});
localStorage.setItem( 'linkList', linkList );
var links = localStorage.getItem( 'linkList' );
var linksArray = links.split(',');
var template = '';
var link = linksArray.map(function(value, index){
return ''+value.replace('.com','').toUpperCase()+'<br/>';
});
$('#links').html(link);
//console.log(linksArray);
});
</script>
If you want to do it without any database where you load the list from. Maybe it is possible to make one file with all the options and include this file in the files where you want to use it. With this option you only have to change one file to change every other file.
The most ideal way in which such things are done is by setting up a database and having the values stored in the database. You can also later have a functionality to update the values from your website.
If you won't be using a database you can actually store your list of values into an xml or json file and then use ajax in jquery to load the information and set it into your html.
You can look into this link on how ajax will work http://api.jquery.com/jquery.ajax/
Once you have the data, the jquery to update your html will look something like this.
mydata.forEach(
function(s){
$("select").append($("<option>").attr("value", s).text(s));
}
);
Where mydata is your array of data.
Of course the code will need several updates such as setting an id for your select. However this is the basic idea.
with jquery you can use this sample:
<!doctype html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<style>
.link-item {
display: block;
min-width: 100px;
margin-top: 15px;
font-size: 14px;
}
</style>
</head>
<body>
<select class="target-combo">
<option value="apple.html">Apple</option>
<option value="ball.html">Ball</option>
<option value="cat.html">Cat</option>
</select>
<select class="target-combo">
<option value="apple.html">Apple2</option>
<option value="ball.html">Ball3</option>
<option value="cat.html">Cat3</option>
</select>
<div id="linksWrapper"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
var comBoOptions = $("select.target-combo").children("option");
var links = [];
comBoOptions.each(function() {
links.push("<a href='" + $(this).val() + "' class='link-item' >" + $(this).text() + "</a>");
});
$("#linksWrapper").html(links.join(""));
})
</script>
</body>
</html>
<select onchange="location = this.value;">
<option value="apple.html">Apple</option>
<option value="ball.html">Ball</option>
<option value="cat.html">Cat</option>
</select>
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.
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
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!
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.