Hey so basically this is my code, the first script running allows the selected value to be displayed in the URL.
<!-- Adds selected value to current url extensions -->
<script>
$(function() {
var collectParams = function() {
var params = {
Region:$("#search_region").val()
};
if(params.Region) {
location.hash=jQuery.param(params)
}
};
$("#search_region").change(collectParams);
});
</script>
<!-- Adds selected value to current url extensions -->
<select name="search_region" id="search_region" class="search_region">
<option value="0">All Regions</option>
<option class="level-0" value="135">135</option>
<option class="level-0" value="136">136</option>
<option class="level-0" value="137">137</option>
<option class="level-0" value="139">139</option>
<option class="level-0" value="138">138</option>
</select>
Below is the second script running. It's used to store the selection, it all works fine but is there any way to keep the selection stored once i copy the link along with stored selected value (eg: www.example/dropdown-test.html#Region=137) to another browser or if anyone else uses it for it to have my previous selection stored and displayed on their side?
<!-- Stores selected value locally after page refresh -->
<script>
$(function() {
if (localStorage.getItem('search_region')) {
$("#search_region option").eq(localStorage.getItem('search_region')).prop('selected', true);
}
$("#search_region").on('change', function() {
localStorage.setItem('search_region', $('option:selected', this).index());
});
});
</script>
<!-- Stores selected value locally after page refresh -->
I'm not sure if this makes sense but that's the best i can explain.
I also only need to be able to do this with javascript no php
Thanks in advance
If you are about to share data between two clients directly, you will be facing numerous obstacles and since you just ask about the basic concept, I would not recommend you trying to code that directly, rather first study your options. If you want the data spread over larger pool of users, then you really should use some server side solution (lets say something like Firebase).
PEERS
Most likely you will go with some peer-to-peer setup. There are numerous technologies trying to target it, but all are somewhat tricky. Not all are well supported, some are buggy, others difficult to setup.
TO STUDY RECOMMENDATIONS
https://webrtc.org/
http://www.websocket.org/
IMPLEMENTATION
I suggest you first pick the technology you like. Then try to implement it and then you might like to post new questions regarding the specific issues, you will be facing then.
If you go with P2P, I wish you best of luck. This sounds like from zero to hero story.
Stores previous selected # value in URL and carries it over to another users PC when link is copied. If there's any simpler way of doing it, hola
<select name="search_region" id="search_region" class="search_region">
<option value="0">All Regions</option>
<option class="level-0" value="135">135</option>
<option class="level-0" value="136">136</option>
<option class="level-0" value="137">137</option>
<option class="level-0" value="139">139</option>
<option class="level-0" value="138">138</option>
</select>
<script type="text/javascript">
$(function(){
$('#search_region').change(function () {
var url = $(this).val();
window.location.hash = url;
console.log('select Changed');
});
});
window.addEventListener('hashchange', fn, false);
window.onload = fn; // fire on pageload
function fn() {
$('#search_region').val(window.location.hash.replace('#', ''));
console.log("hash = " + window.location.hash);
}
</script>
Related
I need to display two select lists with the same options (there are many).
I have the index.html:
<body>
<select class="c_select1"></select>
<select class="c_select2"></select>
</body>
and in another html file (options.html) all the options (only the options):
<option value='AED' title='United Arab Emirates Dirham'>AED</option>
<option value='AFN' title='Afghan Afghani'>AFN</option>
<option value='ALL' title='Albanian Lek'>ALL</option>
<option value='AMD' title='Armenian Dram'>AMD</option>
<option value='ANG' title='Netherlands Antillean Guilder'>ANG</option>
...
<option value='AOA' title='Angolan Kwanza'>AOA</option>
<option value='ARS' title='Argentine Peso'>ARS</option>
<option value='AUD' title='Australian Dollar'>AUD</option>
<option value='AWG' title='Aruban Florin'>AWG</option>
<option value='AZN' title='Azerbaijani Manat'>AZN</option>
Then, using jQuery, I load options inside the two select tags with the same instruction with different class selector:
$(".c_select1").load("options.html");
I'd like to display as default selected option two different values (since I need to show a currency converter).
I've tried in 2 different ways, but any of these works fine (I show the code for just one).
<script type="text/javascript">
$(".c_select1").load("options.html");
$(".c_select1 option[value=ARS]").prop("selected", true);
</script>
or
$(".c_select1").val("ARS");
I don't know why, but I think there is a problem with the .load() of jQuery.
The only solutions that work are 2:
set a timer and execute the second jQuery statement after this timer
use 2 different options.html files one for each select tag, but I think it is not so clever.
Is there a better way to do this dynamically?
Try this:
$(".c_select1").load("options.html", function(){
$(".c_select1").val("ARS");
});
Explained:
The .load() jQuery method requires some time to get the contents of options.html (even if its just a few milliseconds). The browser doesn't wait for it before continuing to run the rest of the javascript logic. The function(){ I added to your .load( method call is some javascript logic that runs AFTER the results have returned (aka a "callback").
Use a callback :
$(".c_select1").load("options.html", function() {
$(".c_select1").val("ARS");
});
$(".c_select2").load("options.html", function() {
$(".c_select2").val("ARS");
});
Actually there is a delay of load method that is why selected item is not working. Like #Joulss said use callback method that should work. You can see the here.
$(function(){
$(".c_select1").load("option.html", function() {
$(".c_select1").val("AFN");
});
$(".c_select2").load("option.html", function() {
$(".c_select2").val("ANG");
});
});
Demo
Below is my code for a dropdown form that when the user clicks on a selection it should redirect to another local in folder document.
vvv this function is in my script and I have 3 other functions in my script that work properly except this one.
function loadInfo(myForm) {
var menuSelect=myForm.Menu.SelectedIndex
var menuURL=myForm.Menu.options[menuSelect].value+".html"
window.location=menuURL
}
vvv This form is in my body and it shows the drop down but there is no redirecting to the local document when a selection is made.
<form id="menu">
<p style="font-weight:bolder">
If your pencil was a Super Hero who would they be?
<select name="Menu" onchange="loadInfo(this.form)">
<option>Select an item</option>
<option value="batman">Batman</option>
<option value="superman">Superman</option>
<option value="hulk">Hulk</option>
<option value="wonder">Wonder Woman</option>
</select>
</p></form>
I am doing a mock website for school that requires this form function and there is only one decent example in my book but even that will not output the desired task I want to accomplish(also this code was taken from that example in the book. I have tried to put in some of my code with no results)
try
.selectedIndex
instead of
.SelectedIndex
I am having some issues with a search form I created based on two drop downs. Pretty simple but, I cant seem to find the issue. I'm still pretty green at this.
Here is the html:
<form id="CustomSearch">
<select id="Location">
<option value='northeast'>North East</option>
<option value='west'>West</option>
<option value='midwest'>Mid West</option>
<option value='south'>South</option>
</select>
<select id="Style">
<option value='industrial'>Industrial</option>
<option value='farmhouse'>Farmhouse</option>
<option value='contemporary'>Contemporary</option>
<option value='beach+style'>Beach Style</option>
<option value='traditional'>Tradtional</option>
</select>
<button id="DropSearch">
Here is the js:
var location = jQuery('#Location').val();
var style = jQuery('#Style').val();
jQuery(document).ready(function(){
jQuery('#DropSearch').click(function (e){
jQuery.post('http://showroomworldwide.com/?geodir_search=1&stype=gd_place&s=' + location + '&stype=gd_place&s=' + style);
});
});
Once the script is added to the footer of the site, I get a never ending loop, almost like if the function was firing before actually clicking on the button.
There's no need from what I can see to be doing a POST request - just set window.location.href also wrapping your jQuery in an IIFE and passing $ as an argument can be a handy way of making $ available to you if you need to use jQuery in noconflict mode.
Finally as #ADyson mentions you need to set retrieve location and style within the event handler otherwise you'll be stuck with the initial values.
(function($){
$(document).ready(function(){
var location = $('#Location').val();
var style = $('#Style').val();
$('#DropSearch').click(function (e){
window.location.href = 'http://showroomworldwide.com/?geodir_search=1&stype=gd_place&s=' + location + '&stype=gd_place&s=' + style; // Can't just reference location.href due to local variable
});
});
}(jQuery));
I'm working with Webworks for blackberry and i cant get to fire change on the device, in ripple it works like a charm but in the devices the change event doesn't fire...
hope some1 can help me
HTML
<select name="motherCat" onchange="motherChanged(event)">
<option value="0">option0</option>
<option value="1">option1</option>
<option value="2">option3</option>
</select>
<select id="subCategory">
<option value="0">wait mother change to fill</option>
</select>
Javascript
function motherChanged(event){
alert("motherChanged");
var retCategory =subcategories[event.target.value];
var fin = retCategory.length;
var slCat = $('subCategory');
slCat.length = 0;
for(var i = 0;i<fin;i++){
slCat.options.add(new Option(retCategory[i].text,retCategory[i].value));
}
}
The problem is in how you've set the onchange property. event is undefined. Rather use something that will be defined:
<select name="motherCat" onchange="motherChanged(this)">
The this parameter will be the select element itself. Of course, you could also have a function that accepts no parameters, and then you can leave out the this.
You could also use
<select name="motherCat" onchange="motherChanged">
and JavaScript should call the function with the event as a parameter.
I have a html form
Inside of this form in select option i have called one java script function like
<form>
<SELECT NAME="sel" onChange="split('1')">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
function split(str)
{
var str=str+str;
return str;
}
Now i need to get these return value on inside of the form for example in another select
<SELECT NAME="sel123" >
<OPTION VALUE="str">Milk</option>
</SELECT>
can anyone help me?
HTML can't do anything with variables. It isn't a programming language.
You aren't very specific about what you want to do, but it will probably involve writing JS to perform DOM manipulation.
You can have a place where you can display the value. For example.
function split(str)
{
var str=str+str;
$('classoridofelementhere').html(str);
}
EDIT
Here is an example on how to move option from one list to another: http://calisza.wordpress.com/2009/03/29/6-jquery-snippets-you-can-use-to-manipulate-select-inputs/
Remember to download and put a reference to jQuery library.