i'm writing some inline javascript. it's not working and i'm not sure why.
at the top of the index page
<meta http-equiv="Content-Script-Type" content="text/javascript" />
later on i have:
<select name='id'>
<option value=-1>New Entry</option>
<option value='1' onclick="location.replace('index.php?page=update&id=1')">2010-06-12 16:38:08</option>
<option value='2' onclick="location.replace('index.php?page=update&id=2')">2010-06-12 18:20:49</option>
<option value='3' onclick="location.replace('index.php?page=update&id=3')">2010-06-13 11:39:09</option>
</select>
what i want is for the page to be replaced when one of the option items is selected but the code is not causing a page refresh and i'm not sure why. is something wrong with the javascript?
Use the onchange event of the select element:
<select name="id" onchange="window.location.replace('index.php?page=update&id='+this.options[this.selectedIndex].value);">
<option value="-1">New Entry</option>
<option value="1">2010-06-12 16:38:08</option>
<option value="2">2010-06-12 18:20:49</option>
<option value="3">2010-06-13 11:39:09</option>
</select>
Note: The location.replace method is used when you want to navigate to the page and also replace the current page in the browsing history. If you just want to navigate to the page normally, you assign the URL to the window.location.href property instead.
I've found that window.location.href doesn't work at all in newer browsers (FF4, Chrome 10, etc.).
Related
Good morning,
I have a form
<select name="select" onchange="window.open(this.options[this.selectedIndex].value,'_self')">
<option selected="selected">Select your size</option>
<option value="https://www.webpage.com/01">Size S</option>
<option value="https://www.webpage.com/02">Size M</option>
<option value="https://www.webpage.com/03">Size L</option>
<option value="https://www.webpage.com/04">Size XL</option>
</select>
So if people select size S they go to https://www.webpage.html/01 and so on.....
On al the pages i have the same select form, but how can i change the chosen option as selected="selected" using javascript?
So if people select size M, the go to https://www.webpage.com/02 and that the form is displaying size M on this page. So if option value url is the same as the page url it automaticly give the select="selected" to this option.
maybe a dump question, but javascript isnt my best part ;)
Thanks for all your help.
You can try
$("option[value='" + window.location.href.toString() + "']").closest("select").val(window.location.href.toString());
It will find the option exactly matching with page url
If url exactly corresponds option values
$("selectElementId").val(window.location);
You can achieve this using javascript or jQuery
HTML
<select name="select" id='option' onchange="window.open(this.options[this.selectedIndex].value,'_self')">
<option selected="selected">Select your size</option>
<option value="https://www.webpage.com/01">Size S</option>
<option value="https://www.webpage.com/02">Size M</option>
<option value="https://www.webpage.com/03">Size L</option>
<option value="https://www.webpage.com/04">Size XL</option>
</select>
jQuery solution
$(document).ready(function(){
$('#option').on('change',function(){
$("#option option:selected").attr('selected','selected');
});
});
If you want to do this with JavaScript only, I would recommend you to do this:
add an id attribute to each of the option tags
<option id="sizeS" value="https://www.webpage.com/01">Size S</option>
<option id="sizeM" value="https://www.webpage.com/02">Size M</option>
add a name attribute to the body-tag of each page:
For example, on the page https:.../01:
<body name="S">
add this function to the JavaScript part of each page:
function updateForm() {
var currentSize = document.getElementsByTagName['body'][0].getAttribute('name');
document.getElementById("size" + currentSize).selected = "selected";
}
execute the function updateForm() when loading the page. For example, with onload:
<body name="M" onload="updateForm()">
you can also use an event listener with the "DOMContentLoaded" event, click here for more information:
So I have this code:
<select onchange="location.href=this.options[this.selectedIndex].value;" name="fancySelect" class="makeMeFancy">
<option value="0" selected="selected" data-skip="1">Choose Your Product</option>
<option value="img/picsamp.jpg" data-icon="img/products/iphone.png" data-html-text="iPhone 4<i>in stock</i>">iPhone 4</option>
<option value="2" data-icon="img/products/ipod.png" data-html-text="iPod <i>in stock</i>">iPod</option>
<option value="3" data-icon="img/products/air.png" data-html-text="MacBook Air<i>out of stock</i>">MacBook Air</option>
<option value="4" data-icon="img/products/imac.png" data-html-text="iMac Station<i>in stock</i>">iMac Station</option>
</select>
With it, I can click on an element and go to the link stored in the "value" attribute. My question is, ¿Can I add a "rel" attribute to that link generated with the onchange? I need to use a rel attribute, not a data-* one.
Edit:
I also need to add ?iframe=true&width=400&height=200 to my links as the lightbox is going to display iframes...
If you're wanting open a modal window, then most libraries allow you to programmatically open windows. So, you could write a code block that listens for the select list to change and then manually open a modal window, with the content coming from the URL you have stored in the currently selected option.
Im trying to get a dynamic update of my select list depending on what radio button is checked.
I have 3 files:
maleweight.html:
<option value="blank"></option>
<option value="Pluma -64.0 kg">Pluma -64.0 kg</option>
<option value="Pena -70.0 kg">Pena -70.0 kg</option>
<option value="Leve - 76.0 kg">Leve - 76.0 kg</option>
<option value="Médio -82.3 kg">Médio -82.3 kg</option>
<option value="Meio-Pesado -88.3 kg">Meio-Pesado -88.3 kg</option>
<option value="Pesado -94.3 kg">Pesado -94.3 kg</option>
<option value="Super Pesado -100.5 kg">Super Pesado -100.5 kg</option>
<option value="Pesadíssimo +100.5 kg">Pesadíssimo +100.5 kg</option>
femaleweight.html:
<option value="blank"></option>
<option value="Rooster -48.5 kg">Rooster -48.5 kg</option>
<option value="Super Feather -53.5 kg">Super Feather -53.5 kg</option>
<option value="Feather -58.5 kg">Feather -58.5 kg</option>
<option value="Light - 64.0 kg">Light - 64.0 kg</option>
<option value="Middle -69.0 kg">Middle -69.0 kg</option>
<option value="Medium Heavy -74.0 kg">Medium Heavy -74.0 kg</option>
<option value="Heavy -79.3 kg">Heavy -79.3 kg</option>
<option value="Super Heavy -84.3 kg">Super Heavy -84.3 kg</option>
<option value="S. Super Heavy +84.3 kg">S. Super Heavy +84.3 kg</option>
newuser.php:
<tr>
<td><b>Køn:</b></td>
<td><input type="radio" name="Mand" value="Mand" id="male" onclick="update()">Mand
<input type="radio" name="Kvinde" value="Kvinde" id="female" onclick="update()">Kvinde</td>
</tr>
<tr>
<td><b>Vægt:</b></td>
<td><select id="weight" name="vægt" id="selectv">
<script language="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js">
function update() {
if (document.getElementById('male').checked) {
$("#weight").load("maleweight.html");
}
else if (document.getElementById('female').checked) {
$("#weight").load("femaleweight.html");
}
}
</script>
</select></td>
</tr>
I have 2 problems:
The radio buttons seem broken, i can choose both at the same time and i can not "uncheck" them. - Maybe because of the script not workind properly?
When i click either of the radio buttons the select list is not updated.
I have tried:
Including (just naming the file ex: maleweight.php).
Javascript (could not make it work).
.get instead of load.
Tried .checked == true
Tried different solutions (not for the exactly same) listed here on SO.
Niether of them will work for me. What am i missing?
Thanks in advance!
Best regards,
Casper
EDIT:
The page where everything is going down: http://www.casperwmn.dk/tiljonas/nyprofil.php
I see a few obvious problems with your code.
You should use the same name for both radio buttons, if you want to make sure only of one them can be selected.
You shouldn't put the JavaScript within your select-element. As soon as the the first .load() method completes, it will remove the entire JavaScript as it replaces the content of your select-element. I'm also fairly certain that it is invalid HTML to do so (a <select> element can only have <option> elements as children).
You cannot both load an external JavaScript-file and write your own JavaScript with the same <script> tag, you will have to have two separate <script> tags - one for loading the jQuery source, and one for writing your own JavaScript.
Your <select> element has two ID attributes, which isn't valid HTML. Remove one of them, and use the one you keep as the selector in your JavaScript.
<script language="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js">
is not the right way to load a JavaScript. Instead of language="text/javascript" it should be type="text/javascript", but you could just as well get rid of the attribute all together, as JavaScript is the default language for the <script> element.
Since you are using jQuery to load the content, why not use it for the complete solution? If you change the name of your radio-buttons to say gender, and the values to male/female, and remove the inline onlick-attribute. Then you could do it all with a small piece of jQuery.
$(function() {
$("input[name='gender']").on("click", function() {
var gender = $(this).val();
$("#weight").load(gender + "weight.html");
});
});
The radio buttons seem broken, i can choose both at the same time and i can not "uncheck" them. - Maybe because of the script not workind properly?
You have to assign them the same name attribute. This puts them in the same group so that they can't be selected simultaneously.
When i click either of the radio buttons the select list is not updated.
Move the script block inside <head>.
Also, you can't put js inside a <script> tag with src attribute. You must use a new <script> tag.
And, your <select> has 2 ids. Although it doesn't get in the way, it is not recommended to do so.
According to w3schools:
When a user clicks on a radio-button, it becomes checked, and all
other radio-buttons with equal name become unchecked.
You should change radiobuttons name attributes so they have the same name.
Separate jquery include and your script, and move your script in head tag:
<script language="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"> </script>
<script>
function update() {
if (document.getElementById('male').checked) {
$("#weight").load("maleweight.html");
}
else if (document.getElementById('female').checked) {
$("#weight").load("femaleweight.html");
}
}
</script>
Name attribute of your tags should be the same.
I make use of Mobiscroll jQuery script for a prettier input by the users. On page load, the first option of the select list is shown as selected. What should I add to the existing code that on page entrance, the (for example) 3rd value is shown as the default?
I tried selecte="selected" but it does not work.
this is the jQuery script
$(function(){
$('#city').scroller({
preset: 'select',
theme: 'android-ics',
display: 'inline',
mode: 'scroller',
});
});
and here is the options of the select box
<select id="city" class="cities" data-role="none" name="City">
<option value="">All</option>
<option value="1">Atlanta</option>
<option value="2">Berlin</option>
<option value="3">Boston</option>
</select>
You can easily set the value from jQuery by doing this:
var defaultValue = 3;
$("#city").val(defaultValue);
"3" here represents Boston from your drop down list, here's a fiddle for proof:
http://jsfiddle.net/6mj8n/5/
Using $('#city').val('3'); will put The third option 'Boston' as selected for example
In this case, I think the vanilla DOM method is what I'd go with:
$('#city')[0].options.selectedIndex = 3;
It should be mentioned that this and other solutions should be placed before you initialize mobiscroll. Working demo with mobiscroll: http://jsfiddle.net/DCaHK/1/
...On further thought, your first suggestion of adding selected to the option should have worked. Updated my demo to do exactly that. Autocomplete could prevent this from working properly in some browsers, so it's possible your issue is simply that you need to turn autocomplete off:
<form autocomplete="off">
<select id="city" class="cities" data-role="none" name="City">
<option value="">All</option>
<option value="1">Atlanta</option>
<option value="2" selected>Berlin</option>
<option value="3">Boston</option>
</select>
</form>
I'm sure this shouldn't be so hard!
I've been struggling with facebook's javascript: I need to redirect to a URL based on the value in a select drop down menu, something like:
<form name="cityselect">
<select name="menu" onChange="location=document.cityselect.menu.options[document.cityselect.menu.selectedIndex].value;" value="GO">
<option value="http://www.leeds.html">Leeds</option>
<option value="http://www.manchester.html">Manchester</option>
</select>
</form>
Can anybody help me get this working? I've had good look though the facebook dev forum and docs but either don't understand what needed or can't find the answer!
Try {} this.options also your urls are mistyped. http://www.leeds.html should be http://www.leeds.com , not sure if that is related but just wanted to point that out just in case.
<form name="cityselect">
<select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">Select One</option>
<option value="http://www.leeds.com">Leeds</option>
<option value="http://www.manchester.com">Manchester</option>
</select>
</form>
Parent Frame:
<form name="cityselect">
<select name="menu" onChange="top.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">Select One</option>
<option value="http://www.leeds.com">Leeds</option>
<option value="http://www.manchester.com">Manchester</option>
</select>
</form>
how to remember selection after redirect.
for example
let us suppose there are many city name in drop down. when i select city name in drop down then relevant page should appear on website and selection of current city should remain on redirected page until selection not changed
all redirect on same domain with subdomain
all sub domain layout same
dropdown will be available on all pages of website.