We help IT Professionals succeed at work.

accept name-value pair from query string using javascript for unsubscribe link on email campaign

Can someone please advise how to do the following;

It is for an unsubscribe link in an email campaign containing a "SPECIAL STRING" .
I need to create a form to accept a name value pair. The name-value pairs will be passed as part of the message’s unsubscribe link’s query string.

The name-value pairs must be passed back to the ESP server when calling the Unsubscribe Servlet.

I need to use javascript for this.
as follows;

<form method=”POST” action=”URL”>
<input type=”hidden” name=”YES” value=”Remove Me”>
<input type=”hidden” name=”_ri_” value=”SPECIAL STRING”
</form>
Comment
Watch Question

Author

Commented:
(I have removed the action url)
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
Where do you need to use the javascript and for what?  Where are you putting the form?  Is it in an email message?

You need to use a different editor for your code.  The 'right quotes' in you code will not work in HTML, only standard single and double quotes are acceptable.  If you're using Word, get another editor, there are many available.

Author

Commented:
thanks for the heads up about the quotes... you're right thanks.

here is the process;

The email footer is hosted on the ESP server.
When we release an email campaign the ESP appends a special string at the end of the unsubscribe link.
The unsubscribe link is to a hosted form on our servers.
When the customer clicks the unsubscribe link on the email, they are brought to our form.
Two name value pairs will also be passed as part of the message’s unsubscribe link’s query string.
The name-value pairs must be passed back to the ESP server from hosted form on our server.
The format is given in the code slot above.

The javascript is required to take the STRING from the query string and place it in;

<input type=”hidden” name=”_ri_” value=”SPECIAL STRING” />

to be submitted.

Author

Commented:
ESP = Email Service Provider who are a SAAS solution where we run our email campaigns.
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
Here's the best I could come up with.  Always seem to have use 'getElementById' and not name which means adding an id="" to the element.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>JS Query</title>
<script type="text/javascript">
<!--
function replaceDoc()
  {
  window.location.replace("JS-qstring.html?qq=New%20String")
  }

// -->
</script>
</head>
<body>
<h1>JS Query</h1>
<a href="JS-qstring.html">Reload</a>
<fieldset>
<form name="frm1" method="POST" action="JS-qstring.html">
<input type="text" value="This is the form." />
<input type="hidden" name="YES" value="Remove Me">
<input type="text" id="rri" name="_ri_" value="SPECIAL STRING">
</form>
</fieldset>

<script type="text/javascript">
<!--
var nuri;
var nnnuri;

nnnuri = location.search;
if(nnnuri.substr(0,1) == "?") {
nuri = nnnuri.substr(1);
nuri = nuri.split("=");
nuri[1] = decodeURIComponent(nuri[1]);
// document.frm1.elements["_ri_"].value = nuri;
document.getElementById("rri").value = nuri[1];
} 

document.write(nnnuri);
// -->
</script>
<br />

<input type="button" value="Replace SPECIAL STRING" onclick="replaceDoc()" />

</body>
</html>

Open in new window

Author

Commented:
Hi,

Thanks for the code. Can you please explain it for me?
I appreciate it.

thanks,
Justin
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
The replaceDoc() function and the button are just for testing.  The javascript below the form checks to see if a query string was passed with the URL.  If it was, then the name=value pair is split at the '=' and the value is URL decoded in case there was an encoded char in the string like in the example.  Then the decoded string is set as the value of the element with the id="rri" which also has the name="_ri_".  The document.write is just to display things for testing.

Your final version needs a submit button also for the form.

Author

Commented:
But I get a file not found for JS-qstring.html...

Author

Commented:
if I click reload or the button
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
"JS-qstring.html" was the name of the demo file.  If you save it under that name or change the action to the file name you're using, it will work.  In your final product, you'll have to substitute the name of the real page it has to post to in the action for the form.

Author

Commented:
I know I just realised.... thanks its working now

Can you advise... what is the purpose of the text input fields
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
Just to see what was going on.  To see hidden fields, you have to 'view source' which is an extra step.  You can set it back to hidden when you're happy with it.

Author

Commented:
I think I have not explained it properly...

value="SPECIAL STRING", the value should not be the string "SPECIAL STRING". It should be what has come in on the query string after clicking the unsubscribe link on the email.

For example, they click <URL to the unsubscribe form>?SPECIAL STRING

The special string could be anything. Maybe I should have a variable there for example

value=SPECIAL_STRING

Author

Commented:
I need the SPECIAL_STRING taken from the query string and submitted to the ESP server via the form
Fixer of Problems
Most Valuable Expert 2014
Commented:
If you look at what I've done, that's exactly what is happening except that I used javascript to demo it.  Here's a modified version that uses a link with a query string with a slightly different value.  (The first Reload link reloads the page without a query string to essentially reset the page).  Feel free to play around with it until you understand it.  I've done it all on one page so it would be a self-contained demo.  The link to the page can be anywhere in the world like in an email.  If you have this demo on a server that you can link to, you can send yourself an email with a link to it followed by any query string you want and it should show up in the box.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>JS Query</title>
<script type="text/javascript">
<!--
function replaceDoc()
  {
  window.location.replace("JS-qstring.html?qq=New%20String")
  }

// -->
</script>
</head>
<body>
<h1>JS Query</h1>

<a href="JS-qstring.html">Reload JS-qstring.html</a>&nbsp;&nbsp;-&nbsp;&nbsp;<a href="JS-qstring.html?qq=AnotherNew%20String">JS-qstring.html?qq=AnotherNew%20String</a>

<fieldset>
<form name="frm1" method="POST" action="JS-qstring.html">
<input type="text" value="This is the form." />
<input type="hidden" name="YES" value="Remove Me">
<input type="text" id="rri" name="_ri_" value="SPECIAL STRING">
</form>
</fieldset>

<script type="text/javascript">
<!--
var nuri;
var nnnuri;

nnnuri = location.search;
if(nnnuri.substr(0,1) == "?") {
nuri = nnnuri.substr(1);
nuri = nuri.split("=");
nuri[1] = decodeURIComponent(nuri[1]);
// document.frm1.elements["_ri_"].value = nuri;
document.getElementById("rri").value = nuri[1];
} 

document.write(nnnuri);
// -->
</script>
<br />

<input type="button" value="Replace SPECIAL STRING" onclick="replaceDoc()" />

</body>
</html>

Open in new window

Author

Commented:
aha.... I see what you are doing now!!

Excellent. You are an expert.

Thanks so much for your help.