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));
Related
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>
I would like to have a tag search button in Tumblr by selection using the select option but I am not sure how to insert the onclick event using Tumblr's {text:Search Label}.
form action = "">
<select name = "Cities">
<option value="----">--Select--</option>
<option value="roma">Roma</option>
<option value="torino">Torino</option>
<option value="milan">Milan</option>
</select>
Anyone here can help? Thanks.
Well here is my code: http://jsfiddle.net/htWW6/
This is the script:
$(document).ready(function(){
$('select').bind('change',function(){
var loc = $(this).val();
location = "/tagged/" + loc;
});
});
This is jquery, so if your theme currently has this installed (many do) then that code should work off the shelf. If not then it is very easy to add jquery, but if you need a pure JS solution, I cannot help with that. Although the other answer does offer some insight.
I am creating a way-finding app using HTML5, jQuery and Javascript. There are 3 total html pages and each page has a different legend. In this app I have buttons that call a jQuery click function to display stars on the map above the location you have selected. Each button has an id and the buttons work how I want them to work. The problem is that I want to add a drop down list that will provide the same functionality as the buttons on the legend. So basically what I want to be able to do is select a section from the drop down list and then jump to the page that has that section and have the stars already displayed for the selected section. IE: If I select Restrooms, I want to be able to jump the ground floor and have stars displayed over the restrooms. Is this possible to do? I tried using a Javascript function to make the URL navigate to the value of the select list option I wanted but that didn't make the stars show up. I am fairly new to Javascript and jQuery so please help. Thanks! Here is my code:
HTML:
<form method="get" name="form1" action="">
<select name="locations" onchange="gotoSection(this.form)">
<option selected>Please pick a Section</option>
<option disabled>---Ground Floor---</option>
<option value="grdFloor.html#mc" >Mayor's Commision on Literacy</option>
<option value="grdFloor.html#ch">Children's</option>
<option value="grdFloor.html#sr">Story Book Room</option>
<option value="grdFloor.html#eo">Extensions Office</option>
<option value="grdFloor.html#ma">Montgomery Auditorium</option>
<option value="grdFloor.html#restRm">Restrooms</option>
</select>
</form>
<div id="restRm" class="legend">
<a href="#restRm" ><img src="floorMaps/restBTN.png"/></a>
</div>
jQuery:
$(document).ready(function(){
$('.legend, .arrows').show('slow');
$('.stars').hide();
$('#restRm').click(function(){
$('.stars:not(#restStar1, #restStar2)').fadeOut('slow');
$('#restStar1, #restStar2').toggle('pulsate');
}); //end restroom
Javascript:
function gotoSection(form) {
var newIndex = form.locations.selectedIndex;
if ( newIndex == 0 ) {
alert( "Please select a Section!" );
} else {
cururl = form.locations.options[ newIndex ].value;
window.location.assign( 'http://libwww3.freelibrary.org/maps/central/' + cururl );
}
}
Try this:
<select name="locations" onchange="gotoSection(this.value)">
function gotoSection(cururl) {
window.location.assign( 'http://libwww3.freelibrary.org/maps/central/' + cururl );
}
EDIT:
Maybe i should read the entire question before i answer, i thought the problem was that your navigation didn't work, i apologize.
But as to the question about the stars, if i understand your question and example code correctly, you're navigating within the same page, just with diferent #hash tags. And if thats the case, your document.ready won't run.
Instead you can make a function that triggers the stars and call that from your gotoSection method, after you've assigned the new url.
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.