Forum Moderators: open

Message Too Old, No Replies

Using parsed URL data to change default selected in forms

Using parsed URL data to change default selected in forms

         

pinkshiro

11:31 pm on May 31, 2005 (gmt 0)

10+ Year Member



Hi there,

Throughout the site im working on, there are links such as "contact mike" and "contact the webmaster", which links to the contacts page with an identifier attatched to the URL....such as "contact.html?name=mike"....i think thats called parse urls?

On the contacts page, I have Javascript which successfully grabs the name from the end of the URL. I didn't write it, but grabbed it from a site. All I have to do when i need the string is:

var pqs = new ParseQueryString();
var zork = pqs.param("name");

the above code seems to successfully set variable zork as the parsed string, and I tested this out by:

document.write(zork);

Which displays the correct string. But the whole reason I am passing parsed strings along the url is so if i click on 'contact mike', it will take me to the contacts page AND set a select box within a form to have 'mike' as its selected option. So basically, which parsed string is sent across determines the default selected option in my drop down box. Problem is, I can't get this to work. Can someone please help me out with this as I cant get this to work!

FYI:

form name = Contact
select name = send_to

httpwebwitch

3:58 am on Jun 1, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



to preselect an option, write " SELECTED" as an attribute.

There are nice ways to do this dynamically using the SelectedIndex() property, but since you're preselecting the option on page load, it can be done as you're drawing the select options... here is an example, where "luke" is preselected:

<body>
<script>
contacts=new Array();
contacts[0]="mike";
contacts[1]="luke";
contacts[2]="mark";
contacts[3]="john";

preselected="luke";
</script>

<select name="contacts">
<script>
for(i=0;i<contacts.length;i++){
document.write("<option value='"+contacts[i]+"'");
if(contacts[i]==preselected){
document.write(" SELECTED");
}
document.write(">"+contacts[i]+"</option>");
}
</script>
</select>
</body>

I would normally do this with a server-side script, like PHP or ASP. Client-side Javascript can pull it off, but if the browser has javascript turned off you'll end up with an empty select box :(

Another bit of advice: get out of the habit of using variable names like "zork". It's harmless when you are working with really simple scripts, but on more complicated projects you'll regret not using descriptive, sensible names.

when I see code like this:

zork=var1-foo+(bar12%juju)

it makes me cringe.

good luck!

httpwebwitch

4:06 am on Jun 1, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



here's another way.
draw your select options in the regular way, then use a script to select the chosen name.


<form name="contacts">
<select name="send_to">
<option value='mike'>mike</option>
<option value='luke'>luke</option>
<option value='mark'>mark</option>
<option value='john'>john</option>
</select>
</form>


<script>
preselected="luke";
for (i=0;i<document.contacts.send_to.length;i++){
if (document.contacts.send_to.options[i].value==preselected){
document.contacts.send_to.selectedIndex=i;
}
}
</script>

rocknbil

4:09 pm on Jun 1, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



To your second option, which **should** function whether or not Javascript is enabled, I would only add this, as that would always load "luke" as the selected option. If you were doing that, all you'd do is add ' selected' next to "luke." Not having access to ParseQueryString, I had to add myParse to test this, but bolded are the relevant contributions:

<form name="contacts">
<select name="send_to">
<option value='mike'>mike</option>
<option value='luke'>luke</option>
<option value='mark'>mark</option>
<option value='john'>john</option>
</select>
</form>

<script type="text/javascript">
var zork = myParse();
if (zork) {
for (i=0;i<document.contacts.send_to.length;i++){
if (document.contacts.send_to.options[i].value==zork){
document.contacts.send_to.selectedIndex=i;
break; // No need to continue loop if found
}
}
}

// Roughly equivalent to your ParseQueryString(), just an example
function myParse() {
var pqs = document.location+''; // Insures string
var pairs=pqs.split('?');
for (i=0;i<pairs.length;i++) {
var keyval = pairs[i].split('=');
if (keyval[0] == 'name') { var nm = keyval[1]; break; }
}
if (nm) { return nm; }
}
</script>
This captures the incoming value of the query string, and the "if" squelches any Javascript errors if there's no query string.

HTTP.W.W. - I had to chuckle a little, when you see the odd variable names repetitively over the years a psychology of sorts begins to emerge. These are some of the ways programmers attempt to obfuscate their code, by using nonsense variables. It doesn't work, only frustrates those that clean up afterward. :-)

I do have an unrelated question though. Over the years I always see this:

contacts=new Array();
contacts[0]="mike";
contacts[1]="luke";
contacts[2]="mark";
contacts[3]="john";

Why does this seem preferred over

contacts=new Array('mike','luke','mark','john');
Of course in function it's the same thing, just four lines less. Not picking at your code, but have always wondered.

httpwebwitch

5:04 pm on Jun 1, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



rocknbil:
good call on "break"ing the loop. I often forget to do that.

doing the
myarray = new Array();
myarray[1]=blah blah

is - you're right - no different from Array(blah,blah,blah)

I only do it the former way because it's neater to look at, say if I want to debug and see what myarray[45] was set to.

The second solution is better because with javascript disabled you will still see the <options> - though the preselection of "luke" won't happen. A server-side solution is better, which would use a script to write " SELECTED" right into the appropriate HTML tag.

I am assuming that server scripting is not available in this situation?

Cheers

badjo

7:33 pm on Jun 1, 2005 (gmt 0)

10+ Year Member



Excuse the interuption but I have been looking for something very similar to what you have described here and can not seem to get it done.

I am trying to create a simple solution to manage affiliates.
I want to have a script that will capture the query string and place it into a hidden form field.

user comes to site with:
ww.domain.com?id=4444

Then when the user selects a product on my page and submits the form one of the fields contains the "4444" and I can credit my partner for the order.

I have found another post that provides some code but I do not know how to get it to execute.
[webmasterworld.com...]

It seems as though it would be a common need but I can not find a shared code.

Thanks for any information, sorry for the interuption.

jb

pinkshiro

10:57 pm on Jun 1, 2005 (gmt 0)

10+ Year Member



To all of the above,

Can't express how good it is to get some real help on the net from what looks like real proffesionals. Thankyou so much.

I'm going with httpw.w.'s second suggestion, including rocknbil's addition to that code.

I have just one more question relating to this topic. I need my option values to stay as numbers, because the cgi script I have uses the option values to redirect the e-mail to the right person. Is there any way of modifying this code so that the value doesn't have to be the same as the parsed query string?

For example:

?name=mike passes 'mike' along the string, and the corresponding option value is '5'. Does this complicate things much? Would appreciate it if you could take the time to help me solve this.

rocknbil

12:49 am on Jun 2, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<select name="send_to">
<option value="0">SELECT</option>
<option value="1">Follow</option>
<option value="2">Luke</option>
<option value="3">And</option>
<option value="4">Matthew</option>
<option value="5">ToThe</option>
<option value="6">John</option>
</select>

Perl, and PHP would do it too:

@addresses= ('','Follow','Luke','And','Matthew','ToThe','John');

%emails= (Follow','follow@yourdomain.com','Luke','luke@yourdomain.com',
'And','and@yourdomain.com','Matthew','matthew@yourdomain.com',
'ToThe','tothe@yourdomain.com''John','john@yourdomain.com');

if (! ($qs{'send_to'} > 0)) { &error('Please Select An Email Address'); }
## Now you know why I left the first one blank :-)

&mail_subroutine($emails{$qs{'send_to'}});

If $qs{'send_to'} == 4, index 4 of @addresses is Matthew, so $email{'Matthew'} = matthew@yourdomain.com.

pinkshiro

3:36 am on Jun 2, 2005 (gmt 0)

10+ Year Member



Ta for the reply..

Here's my select box code:

<select class="forminput1" name="send_to" >

<option value="1">General info</option>
<option value="4">Webmaster</option>
<option value="2">John Gutsell</option>
<option value="3">Nick Barrett</option>
<option value="4">Mike Walker</option>
<option value="5">Martin Cookson</option>
<option value="6">David Walker</option>
<option value="7">Renee Lockerbie</option>

</select>

and here's the javascript im using now:

<script type="text/javascript">
if (zork) {
for (i=0;i<document.Contact.send_to.length;i++){
if (document.Contact.send_to.options[i].value==zork){
document.Contact.send_to.selectedIndex=i;
break; // No need to continue loop if found
}
}
}
</script>

At the moment, this script wont work because the value of one of the options must match zork, right? What code would I have to add to the existing js to get it to say 'if zork = webmaster, then make option with value of 4 the selected value'?

httpwebwitch

12:44 pm on Jun 2, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



change
if (document.contacts.send_to.options[i].value==zork){

to

if (document.contacts.send_to.options[i].text==zork){

and see if that works

rocknbil

3:49 pm on Jun 2, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



To directly answer the Q, I think it's not working because there's nothing in "zork," as you have it, and also webmaster is not the same as Webmaster. Did you leave this out?

var zork = myParse();
or
var pqs = new ParseQueryString();
var zork = pqs.param("name");

So what is your query string parser actually capturing? You can check this with an alert:
alert(zork);

As is, your code will give you "undefined" in that alert.

Once you've verified the value of what's in "zork", the addition of the code she posted will work.

Not to confuse you, but I'd consider it a personal economy of style to just pass a number, and have the number correspond to the selectedIndex property of the drop-down instead of jumping through hoops to match it up. Then you can set those values to whatever you want

<a href="page.html?name=4">Email Mike Walker</a>

<select class="forminput1" name="send_to">
<option value="general">General info</option> (index 0)
<option value="webmaster">Webmaster</option> (index 1)
<option value="jgutsell">John Gutsell</option> (index 2)
<option value="nbarret">Nick Barrett</option> (index 3)
<option value="mwalker">Mike Walker</option> (index 4)
<option value="mcookson">Martin Cookson</option> (index 5)
<option value="dwalker">David Walker</option> (index 6)
<option value="rlockerbie">Renee Lockerbie</option> (index 7)
</select>

var zork = myParse();
or
var pqs = new ParseQueryString();
var zork = pqs.param("name");

if (zork) { document.contacts.send_to.selectedIndex=zork; }
(remember that = sets a variable or object parameter, == compares.)

The advantage here is in your server side script, you just connect the value with the domain:

$to = $qs{'send_to'} . '@yourdomain.com';

(HTTPWW is correct, zork is beginning to annoy. :-) )