Forum Moderators: open

Message Too Old, No Replies

Parse a variable from the URL and select that variable in a list?

I found the answer to the first part, but not the second!

         

whoisgregg

9:58 pm on Mar 22, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I have a large number of pages with a link to a single page with a form on it. The links are all structured in this way:

example.com/request.html?product=widget72

When the page "request.html" is opened, I am able to parse out the "widget72" part of the URL using a javascript function in the head of my document as described here [webmasterworld.com].

Here's the javascript function:


function ParseAndSetField() {
var string=(location.href);
var getit=new Array();
var getit=string.split('product=');
var result=getit[1];
// remove for bug testing alert(result);
document.getElementById('product').value = result;
}

What I cannot figure is how to cause a menu on the request.html page with the name "product" have "widget72" be initially selected. I think I would call the javascript function from within the body of the page with something like this:


<select name="product" id="product">
<option selected="selected">Choose a product...
<option value="widget72">Widget 72
</select>


<script language="JavaScript" type="text/JavaScript">
ParseAndSetField();
</script>

But of course, it's not actually working. :) Add to that I have no clue why it isn't working, and I'm looking at being up *some* creek without a paddle.

Thanks in advance for any help you can provide!

Purple Martin

2:26 am on Mar 23, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Firstly: I once wrote a script to automatically parse any search string (the bit in the URL to the right of "?") and automatically declare all search parameters as JavaScript variables with values. It handles both numeric and string variable types correctly. Just paste it in a script tag at the top of the document head.

if (location.search.length > 0) {
launchString = location.search.substring(1, location.search.length);
var launchStringArray = launchString.split("&");
for (var i = 0; i <= launchStringArray.length - 1; i++) {
var left = launchStringArray[i].substring(0, launchStringArray[i].indexOf("="));
var right = launchStringArray[i].substring(launchStringArray[i].indexOf("=") + 1, launchString.length);
if (isNaN(right)) {
right = '"' + right + '"';
}
eval("var " + left + " = " + right);
}
}

Secondly: Start off with all options unselected. You can then make an option selected by setting it's .selected property in JavaScript, for example:
document.myForm.product[2].selected = true;
As for working out which one to make selected, you could build a for loop to look at each option value in turn and check if it matches the desired value.

whoisgregg

6:26 pm on Mar 23, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Wow, that parsing script is perfect. Thanks again Purple Martin! :)

Now to the next part, the loop to look at each option value and check if it matches the value...

I have this code in the body of the page:


<script language="JavaScript" type="text/JavaScript">
for (i=0; i < document.form.productoptions.length; i++) {
if (document.form. productoptions[i].value == product) {
document.form. productoptions[i].selected = true;
}}
</script>

And it all works beautifully! :D

whoisgregg

9:42 pm on Mar 23, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Now since Purple Martin's script is so flexible, I'd like to go ahead and make mine a little more so. I'll rewrite the script as a function that takes three arguments:

obj - the name of the variable
dest - the ID of the select menu/list you want to have selected
area - the ID of the form on the page

Here's the new script, placed in the head of the html (add appropriate script tags):


function Choose(obj,dest,area) {
len = document.forms[area].elements[dest].length;
for (i=0; i < len; i++) {
if (document.forms[area].elements[dest][i].value == obj) {
document.forms[area].elements[dest][i].selected = true;
}}
}

Here's the code you use in the body of the html, after the form:


<script language="JavaScript" type="text/JavaScript">
Choose(product,"productlist","orderform");
Choose(color,"colorlist","orderform");
</script>

Caveat -- The dest and area arguments must include double quotes while the obj argument cannot have any at all.

Extra thanks to Joshie76 from this thread [webmasterworld.com]. :D