I cannot get onclick="location.href='link.html'" to load a new page in Safari (5.0.4).
I am building a drop-down navigation menu using the <select> and <option> HTML tags. I am using the onclick handler to load a new page after a menu-item is clicked, but nothing happens in Safari. (I have successfully tested in FF & Opera.) I know that there are many onclick bugs in Safari, but I haven't found any solutions that address this specific issue.
You can see a sample of my code below:
<select>
<option onclick="location.href='unit_01.htm'">Unit 1</option>
</select>
and
<select>
<option onclick="location.href='#5.2'">Bookmark 2</option>
</select>
I do not (and prefer not) to have any javascript embedded in the head section of my HTML. I am developing the page for someone who does not know how to use javascript--so the simpler the code, the better.)
What JavaScript code would make the menu-item clickable in all-browsers? (Please verify compatibility with IE.)
Try this:
onclick="javascript:location.href='http://www.uol.com.br/'"
Worked fine for me in Firefox, Chrome and IE (wow!!)
Use jQuery....I know you say you're trying to teach someone javascript, but teach him a cleaner technique... for instance, I could:
<select id="navigation">
<option value="unit_01.htm">Unit 1</option>
<option value="#5.2">Bookmark 2</option>
</select>
And with a little jQuery, you could do:
$("#navigation").change(function()
{
document.location.href = $(this).val();
});
Unobtrusive, and with clean separation of logic and UI.
Give this a go:
<option onclick="parent.location='#5.2'">Bookmark 2</option>
You can try this:
<a href="link.html">
<input type="button" value="Visit Page" />
</a>
This will create button inside a link and it works on any browser
I had the same error. Make sure you don't have any <input>, <select>, etc. name="location".
try
<select onchange="location=this.value">
<option value="unit_01.htm">Unit 1</option>
<option value="#5.2" selected >Bookmark 2</option>
</select>
Related
I'm experiencing some problems when sharing links on Facebook, they are opened inside Facebook instead of the default browser. Usually, I don't mind but I discovered that some features on my pages were simply not working and I don't know why.
I have for example this that works:
<input list="brandlist" name="brandlist" oninput="loadModel()" data-label="brand">
<datalist id="brandlist" >
<option value='Acer'>Acer</option>
<option value='Alcatel'>Alcatel</option>
<option value='Apple'>Apple</option>
<option value='Asus'>Asus</option>
<option value='Black'>Black</option>
<option value='Blackshark'>Blackshark</option>
<option value='Blackview'>Blackview</option>
<option value='Cubot'>Cubot</option>
</datalist>
This code works as expected, when I start typing something in the input field the content of <datalist> is filtered and I can select one of the options.
The following code doesn't work:
<input list="modellist" name="modellist" data-label="model">
<datalist id="modellist">
<option value="model1">Model1</option>
<option value="model2">Model2</option>
<option value="model3">Model3</option>
<option value="model4">Model4</option>
</datalist>
The difference between both is that the second one loads the options from an ajax call.
The content is displayed correctly on the screen, I see the filtered list when I start typing but as soon as I select one of the options the list disappears, and the content of the option tag is not propagated to the input field.
I also see differences in behavior with alert().
From what I understand it is impossible to force Facebook to open Chrome which means that I'll have to adapt my code but in order to do this, I need to understand why it is not working in Facebook while it works fine with Chrome or any other browser.
Any idea?
additional info: submit in JS to my API doesn't seem to work either.
I am using jQuery .load to load different HTML files into my webpage using a dropdown menu. Each dropdown selection calls the corresponding file. My target div is <div id="targetPane"></div> to load the file. That works fine. I am looking to clean up the code so I dont have to write $('#f1').click(function(){$('#targetPane').load( 'includes/inc_1.html' );}); 50 or so times.
The naming convention is that the #f1 will call inc_1.html, #f2 will call inc_2.html and so on. Maybe a solution using a for loop or ('option:selected',this) ? Thanks
$(document).ready(function () {
$('#f1').click(function(){$('#targetPane').load( 'includes/inc_1.html' );});
$('#f2').click(function(){$('#targetPane').load( 'includes/inc_2.html' );});
..
..
..
$('#f50').click(function(){$('#targetPane').load( 'includes/inc_50.html' );});
});
HTML
<form name="courseCalc">
<select name="myCourses"
OnChange="location.href=courseCalc.myCourses.options[selectedIndex].value">
<option selected>Please Select...</option>
<option id="f1" value="#">Item 1</option>
...
<option id="f50" value="#">Item 1</option>
</select>
</form>
Firstly, note that when working with select elements you are best off using the change event of the parent select element instead of listening for click on the option. It's better practice, more widely supported in various browsers, and follows accessibility guidelines.
With regard to your question, the technique you're looking for is called 'Don't Repeat Yourself', or DRY for short. To achieve it in this case you can hook the change event handler and use get a reference to the select from the Event object passed to the handler. You can amend the HTML to store the URL in the value attribute and then provide it as the argument to load(), like this:
<form name="courseCalc">
<select name="myCourses" id="courses">
<option selected>Please Select...
<option value="includes/inc_1.html">Item 1</option>
<option value="includes/inc_2.html">Item 2</option>
<!-- ... -->
<option value="includes/inc_50.html">Item 50</option>
</select>
</form>
jQuery($ => {
$('#courses').on('change', e => {
$('#targetPane').load(e.target.value);
});
});
Note that I added an id to the select element to make it easier to retrieve the element in the example, but any selector would work.
I'm trying to make a table with multiple dropdowns, which all have the same values but different ID's which should retain values even after refreshing or closing and opening the page again.
It has to run on a local computer without php or any server sided scripting and without any addons, so standard browser configuration.
I've searched a lot on google and found:
local storage for multiple select option dropdowns
which helps with keeping the data, but as soon as I close the browser and load it again. The values are gone.
Can somebody help me figure this out?
Thanks in advance.
example of the code as requested:
<select name="1" id="1" class="test">
<option value="-">-</option>
<option value="Mike">Mike</option>
<option value="Steven">Steven</option>
<option value="Sacha">Sacha</option>
<option value="Wilfried">Wilfried</option>
<option value="Kevin">Kevin</option>
<option value="Stefan">Stefan</option>
<option value="Koen">Koen</option>
<option value="Wasil">Wasil</option>
</select>
<select name="2" id="2" class="test">
<option value="-">-</option>
<option value="Mike">Mike</option>
<option value="Steven">Steven</option>
<option value="Sacha">Sacha</option>
<option value="Wilfried">Wilfried</option>
<option value="Kevin">Kevin</option>
<option value="Stefan">Stefan</option>
<option value="Koen">Koen</option>
<option value="Wasil">Wasil</option>
</select>
this is the js file.
$('.test').change(function() {
localStorage.setItem(this.id, this.value);
}).val(function() {
return localStorage.getItem(this.id)
});
Good that you added some code :) I've tested exactly your code and it worked. Check this Fiddle:
https://jsfiddle.net/96hrybu2/
Your problem might be that you are not binding the elements correctly.
Try to change your code to this:
$(document).ready(function(){
$('.test').change(function() {
localStorage.setItem(this.id, this.value);
}).val(function() {
return localStorage.getItem(this.id)
});
});
What seems to be happening is that he tries to bind those elements faster then they are rendered in the DOM.
Either that or your browser doesnt support localStorage.
Let me know if it helped.
Also check your console for some kind of errors and don't forget to add the jQuery library but I guess you know that :P
Cheers.
Was hoping you guys can help me out. I can't seem to figure out how to make a bookmarklet to selecting options on a drop-down menu on a webpage.
Hoping to achieve: make a bookmark on my chrome browser. When I click it on this page it will select the drop-down and select level 2 in the membership box
html of the webpage
<select name="membership" onchange="submit()">
<option value="1"> Level 1</option>
<option value="2"> Level 2</option>
<option value="3"> Level 3</option>
thanks. Really new to this.
Edit: Sorry I apologize. This is the current bookmark I tried to make
javascript:document.getElementById("membership").selectedIndex = 2; <
EDIT2 < realized probably can't use get element by id since the <select name="membership" is using name instead of id. Is there one that can search the name=?
EDIT 3 THANKS EVERYONE for your help here you guys are amazing and I've learned a lot in the past 2 hrs with the different types of getElements* and queryselector. thanks sideroxylon!
This might get you started. First up you select the option you want. Then trigger the onchange event. Make sure you're passing the selected value.
document.getElementsByName('membership')[0].value = 2;
document.getElementsByName('membership')[0].onchange();
function submit(val) {
alert(val);
}
<select name="membership" onchange="submit(this.value)">
<option value="1">Level 1</option>
<option value="2">Level 2</option>
<option value="3">Level 3</option>
</select>
Your bookmarklet should look something like this:
javascript:document.getElementsByName('membership')[0].value = 2;document.getElementsByName('membership')[0].onchange();
How do I highlight the option based on the page the user is currently on?
E.g. If on Beds page, Beds option is selected.
This is inside of a wordpress sidebar text widget so it is not coded separately on each page. I guess maybe javascript would be needed to detect what page it's on?
<form>
<select onChange="location=this.options[this.selectedIndex].value;">
<option value="#">Select a Category</option>
<option value="https://www.furnishare.it/shop/">Shop All</option>
<option value="/product-category/beds/">Beds</option>
<option value="/product-category/chairs/">Chairs</option>
<option value="/product-category/decor/">Decor</option>
<option value="/product-category/dressers/">Dressers</option>
<option value="/product-category/sofas/">Sofas</option>
<option value="/product-category/storage/">Storage</option>
<option value="/product-category/tables/">Tables</option>
</select>
</form>
Thank you!
You would want to get the url pathname:
window.location.pathname
I would suggest that you do this in a JS file rather than inline HTML. The implementation (jsfiddle wasn't saving for some reason):
http://codepen.io/anon/pen/VvEeMY
Make sure to un-comment the commented location line to get it working on your webpage:
var location = window.location.pathname;
Note that I would highly recommend not dealing with DOM events using attributes like onClick ... but to answer your question I've written the pure JS code above.
Edit: Using location.pathname requires you to use full paths starting after your domain but since your implementation was already doing so in select > option values I've taken the liberty to simplify it with location.pathname.