...

View Full Version : Need help using URL Variables to write a form field



johnrivers
02-16-2010, 06:45 PM
Using the url test.html?a=john&b=doe

I am using the following code:

<script type="text/javascript" language="javascript">
function getUrlVars() {
var map = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi;
function(m,key,value) { map[key] = value; }); return map;
}
var john=getUrlVars(map[a]);
alert (getUrlVars(map[a]))
alert (john)
</script>

I can't seem to get an alert to show me anything. The eventual result is not an alert, but a document.write to post the url contents to various form fields for firstname= and lastname= etc.

I am really having a hard time using the document.write function, and am not sure how to employ it, whether in the same script statement or in a separate script in the body.

Philip M
02-16-2010, 07:16 PM
I am afraid that I do not understand your code. alert (getUrlVars(map[a])) attempts to pass a variable to the function getUrlVars() { but the array map is only created by that function.

document.write statements must be run before the page finishes loading. Any document.write statement that runs after the page finishes loading will create a new page and overwrite all of the content of the current page. So document.write is at best really only useful to write the original content of your page. It cannot be used to update the content of your page after that page has loaded.


It is your responsibility to die() if necessary….. - PHP Manual

Old Pedant
02-16-2010, 08:14 PM
No idea what that JS is supposed to do. Agree w/ Philip that it's just strange.

Here's a straightforward implementation:


<html>
<head>
<script type="text/javascript">
var qs = location.search.substring(1);
var pairs = qs.split(/\&/g);
var qsvalues = [];
for ( var p = 0; p < pairs.length; ++p )
{
var temp = pairs[p].split("=");
qsvalues[temp[0]] = unescape( temp[1] );
}
</script>
</head>
<body>
Your name is <script type="text/javascript">document.write(qsvalues["name"]);</script>
<br/><br/>
Your age is <script type="text/javascript">document.write(qsvalues["age"]);</script>
</body>
</html>

That's expecting a URL of the form

pagename.html?name=bob&age=37

or similar.

You could refine it a bit to use a function to get the query string values, so that if no value was passed it comes back with a blank string instead of "undefined". But that's detail work.

johnrivers
02-16-2010, 11:01 PM
How do I use <script type="text/javascript">document.write(qsvalues["email"]);</script>


in an input statement like: <input name="email" type="hidden" id="email" value="+email+" />

johnrivers
02-16-2010, 11:49 PM
I used the following code, but can't seem to get the email to send for the

<script type="text/javascript">document.write('<input name="fname" type="hidden" id="fname" value="qsvalues[+fname+]"/>'); </script>
<script type="text/javascript">document.write('<input name="lname" type="hidden" id="lname" value="qsvalues[+lname+]"/>'); </script>
<script type="text/javascript">document.write('<input name="phone" type="hidden" id="phone" value="qsvalues[+phone+]"/>'); </script>
<script type="text/javascript">document.write('<input name="email" type="hidden" id="email" value="qsvalues[+email+]"/>'); </script>



I am using FormMail cgi to send an email, and when I remove the lines above, the email sends with no data, but when I put the code in from above, the email doesn't send.

Old Pedant
02-16-2010, 11:59 PM
I would not try to use document.write.

Instead, I'd do this:


<html>
<head>
<script type="text/javascript">
function getQSinfo( )
{
var form = document.theForm; // or whatever the name of your form is
var qs = location.search.substring(1);
var pairs = qs.split(/\&/g);
for ( var p = 0; p < pairs.length; ++p )
{
var temp = pairs[p].split("=");
var fname = temp[0];
var val = unescape( temp[1] );
if ( form.elements[fname] != null ) form.elements[fname].value = val;
}
// and I guess you want to submit it, too?
form.submit();
}
</script>
</head>
<body onload="getQSinfo()">
<form name="theForm" ...>
<input name="fname" type="hidden" />
<input name="lname" type="hidden" />
<input name="phone" type="hidden" />
<input name="email" type="hidden" />
</body>
</html>

Untested, but it's simple enough it should work.

johnrivers
02-17-2010, 12:10 AM
Great job! Now, one small remaining question:

The email portion, that obviously includes an @ symbol, is not coming through. Is there an easy way to fix that?

johnrivers
02-17-2010, 12:12 AM
To be more specific, the fname, lname, and phone are all coming through on the submitted email, but the last variable is not included in the email, and the variable name is not shown, so that part looks like it is truncated.

johnrivers
02-17-2010, 12:15 AM
Now more info:

I took out the @ and it still wasn't included, and I tried putting an & at the end of the string, but still didn't get anything...

Old Pedant
02-17-2010, 12:20 AM
Probably means that the querystring wasn't propery encoded.

The @ symbol is one of many that need to be URL encoded.

Dunno what is generating your querystring, but it's got a bug, methinks.

Old Pedant
02-17-2010, 12:24 AM
I just tried my test page using

test.html?email=joe%40bar.com and that worked properly.

Now, to be fair, it also worked using

test.html?email=joe@bar.com
but now we are into browser dependencies.

Both of those worked properly in both MSIE 7 and FireFox 3.5

Old Pedant
02-17-2010, 12:28 AM
Now more info:

I took out the @ and it still wasn't included, and I tried putting an & at the end of the string, but still didn't get anything...

So show the actual query string that isn't working???

johnrivers
02-17-2010, 12:39 AM
Ok, so I am putting the following as my URL

test.html?fname="John"&lname="Doe"&phone="5559991111"&email="fred@aol.com"

And I am receiving:

------------------
fname: "John"

lname: "Doe"

phone: "5559991111"

submit: Submit

------------------


The from address is fred@aol.com

So I guess that now it is working? I would really like the email to be a field in the text, not the in the from address on the email, but that probably isn't a javascript thing....

johnrivers
02-17-2010, 12:42 AM
Also, I would like to use this form script on multiple forms, so have set the form names to be form1, document.theForm1 and document.theForm2, etc. and in the script, i have change it to be:

<script type="text/javascript">
function getQSinfo( )
{
var form = document.theForm1; // or whatever the name of your form is
var qs = location.search.substring(1);
var pairs = qs.split(/\&/g);
for ( var p = 0; p < pairs.length; ++p )
{
var temp = pairs[p].split("=");
var fname = temp[0];
var val = unescape( temp[1] );
if ( form.elements[fname] != null ) form.elements[fname].value = val;
}
// and I guess you want to submit it, too?
// form.submit();
}

{
var form = document.theForm2; // or whatever the name of your form is
var qs = location.search.substring(1);
var pairs = qs.split(/\&/g);
for ( var p = 0; p < pairs.length; ++p )
{
var temp = pairs[p].split("=");
var fname = temp[0];
var val = unescape( temp[1] );
if ( form.elements[fname] != null ) form.elements[fname].value = val;
}
// and I guess you want to submit it, too?
// form.submit();
}
etc.

Is this correct?

My emails from the first script are fine, but the rest the emails come through blank....

Old Pedant
02-17-2010, 01:05 AM
You are *not* supposed to have quote marks in there.

I'm surprised it works at all with them there.

Hmmm...

But I'm guessing that's not the problem with the email address.

Would you double check that the name in your <form> really matches the name in the querystring???

Old Pedant
02-17-2010, 01:07 AM
I dunno...I can't make it fail the way you described.

I use a URL such as "xxx.html?email=abc@xyz.com&frammiz=zzz&lname=doe" and it put both the email and lname in place. Just ignored the bogus field name.

johnrivers
02-17-2010, 01:20 AM
Here is the script:

<script type="text/javascript">
function getQSinfo( )
{
var form = document.theForm1; // or whatever the name of your form is
var qs = location.search.substring(1);
var pairs = qs.split(/\&/g);
for ( var p = 0; p < pairs.length; ++p )
{
var temp = pairs[p].split("=");
var fname = temp[0];
var val = unescape( temp[1] );
if ( form.elements[fname] != null ) form.elements[fname].value = val;
}
// and I guess you want to submit it, too?
// form.submit();
var form = document.theForm2; // or whatever the name of your form is
var qs = location.search.substring(1);
var pairs = qs.split(/\&/g);
for ( var p = 0; p < pairs.length; ++p )
{
var temp = pairs[p].split("=");
var fname = temp[0];
var val = unescape( temp[1] );
if ( form.elements[fname] != null ) form.elements[fname].value = val;
}
// and I guess you want to submit it, too?
// form.submit();
var form = document.theForm3; // or whatever the name of your form is
var qs = location.search.substring(1);
var pairs = qs.split(/\&/g);
for ( var p = 0; p < pairs.length; ++p )
{
var temp = pairs[p].split("=");
var fname = temp[0];
var val = unescape( temp[1] );
if ( form.elements[fname] != null ) form.elements[fname].value = val;
}
// and I guess you want to submit it, too?
// form.submit();
var form = document.theForm4; // or whatever the name of your form is
var qs = location.search.substring(1);
var pairs = qs.split(/\&/g);
for ( var p = 0; p < pairs.length; ++p )
{
var temp = pairs[p].split("=");
var fname = temp[0];
var val = unescape( temp[1] );
if ( form.elements[fname] != null ) form.elements[fname].value = val;
}
// and I guess you want to submit it, too?
// form.submit();
var form = document.theForm5; // or whatever the name of your form is
var qs = location.search.substring(1);
var pairs = qs.split(/\&/g);
for ( var p = 0; p < pairs.length; ++p )
{
var temp = pairs[p].split("=");
var fname = temp[0];
var val = unescape( temp[1] );
if ( form.elements[fname] != null ) form.elements[fname].value = val;
}
// and I guess you want to submit it, too?
// form.submit();
}



</script>


---------------

Here is a form:

<form action="/cgi-sys/FormMail.cgi" method="post" name="theForm2" target="_self">
<input name="recipient" type="hidden" id="recipient" value="email@123.com" />
<input name="subject" type="hidden" id="subject" value="Subject" />
<input name="redirect" type="hidden" id="redirect" value="https://www.xxx.com" />
<input name="fname" type="hidden" id="fname" />
<input name="lname" type="hidden" id="lname" />
<input name="phone" type="hidden" id="phone" />
<input name="email" type="hidden" id="email" />
<input type="submit" name="Submit" value="Submit" /><br /><br />
</form>

Old Pedant
02-17-2010, 01:23 AM
Oh..ugh...no no no! We only do the split, et al., *ONE TIME*!!!

Back in a bit...

Old Pedant
02-17-2010, 01:32 AM
Works perfectly for me.



<html>
<head>
<script type="text/javascript">
function getQSinfo( )
{
var form = document.theForm2; // or whatever the name of your form is
var qs = location.search.substring(1);
var pairs = qs.split(/\&/g);
for ( var p = 0; p < pairs.length; ++p )
{
var temp = pairs[p].split("=");
var fname = temp[0];
var val = unescape( temp[1] );
if ( form.elements[fname] != null ) form.elements[fname].value = val;
}

// if you uncomment the next line, then the form will auto-submit as soon
// as the page loads...and you can then even get rid of the submit button if you wish
// form.submit();
// if you don't want that, just remove these 4 lines
}
</script>
</head>
<body onload="getQSinfo()">
<form action="/cgi-sys/FormMail.cgi" method="post" name="theForm2" target="_self">
<input name="recipient" type="text" id="recipient" value="email@123.com" />
<input name="subject" type="text" id="subject" value="Subject" />
<input name="redirect" type="text" id="redirect" value="https://www.xxx.com" />
<input name="fname" type="text" />
<input name="lname" type="text" />
<input name="phone" type="text" />
<input name="email" type="text" />
<input type="submit" name="Submit" value="Submit" /><br /><br />
</form>
</body>
</html>

I changed all your "hidden" to "text" just so I can see the values appear. You can change them back.

There's no need for an id= on any of those fields. The id isn't used by the JavaScript and it *can't* be used by the CGI code.

I used that with a variety of query strings. Example:


test.html?lname=doe&email=joe@xyz.com&phone=3334441111&fname=john

Old Pedant
02-17-2010, 01:38 AM
Just realized you might have been confused by the variable "fname" in my JS code.

Sorry. That was supposed to mean "field name". You could just change it to any name you like and it wouldn't matter.

johnrivers
02-17-2010, 06:15 AM
Ok, I saw the example, but I don't understand the comment, "we only split once." In your last example, I saw that you only had theForm2, but I have 5 forms on my site. Did I have the correct format for my script for all 5 forms?

Old Pedant
02-17-2010, 07:40 PM
Five forms ON THE SAME PAGE????

Ahhh...no wonder you did it that way. Wow. What's the purpose of the 5 forms??? You do know you can only submit *ONE* of them??

But you could easily adapt the code:


function getQSinfo( )
{
var qs = location.search.substring(1);
var pairs = qs.split(/\&/g);
for ( var p = 0; p < pairs.length; ++p )
{
var temp = pairs[p].split("=");
var fname = temp[0];
var val = unescape( temp[1] );
if ( document.form1.elements[fname] != null )
document.form1.elements[fname].value = val;
if ( document.form2.elements[fname] != null )
document.form2.elements[fname].value = val;
if ( document.form3.elements[fname] != null )
document.form3.elements[fname].value = val;
if ( document.form4.elements[fname] != null )
document.form4.elements[fname].value = val;
if ( document.form5.elements[fname] != null )
document.form5.elements[fname].value = val;
}

}


If all 5 forms are identical (all have the same field names, then you can simplify that a bit:

function getQSinfo( )
{
var qs = location.search.substring(1);
var pairs = qs.split(/\&/g);
for ( var p = 0; p < pairs.length; ++p )
{
var temp = pairs[p].split("=");
var fname = temp[0];
var val = unescape( temp[1] );
if ( document.form1.elements[fname] != null )
{
document.form1.elements[fname].value =
document.form2.elements[fname].value =
document.form3.elements[fname].value =
document.form4.elements[fname].value =
document.form5.elements[fname].value = val;
}
}

}

johnrivers
02-18-2010, 07:15 AM
The 5 forms are because I am submitting different information to an email and redirecting to different sites on each link. I didn't know a way to accomplish both of those tasks without a form, and I didn't know how to get 5 forms on the same page to work, pulling info from the URL, to pass to the various destination sites and emails.

By the way, you are AWESOME! Thank you for the help!!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum