how do you show a form based on a URL parameter

Hi,

I am trying to show a form based on a URL parameter.  For example if the URL has "?recipientId=6", then the contact info form should show.. Right now it only works if you actually click on the "contact us by email" link.

Thanks for the help!

 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
	$(document).ready(function() {
	
		$("div a").click(function() {

			$("#ForMembers,#Coverage,#GenInfo").removeClass("active");
			$("#ForMembers a,#Coverage a,#GenInfo a").removeClass("active");
			$(this).closest("div a").addClass("active");

			var v = $(this).attr("id");

			$("#recipientId").val(v);

	
			lhash = $(this).attr("href").substring(1);

			if(lhash==""){
				lhash="6"
			}
	
			$("a[href='#"+lhash+"']").closest("div").addClass("active");

			$('.label_copy').hide();
			$('#div'+lhash).show();

			if($("#recipientId").val()==6 || $(" #recipientId").val()==7 || $("#recipientId").val()==8) {
				$("#contactForm").show();
			}
			else {
				$("#contactForm").hide ();
			}	
			

			$('.hide').click(function () {
				$('.label_copy').hide();
			});

		});

		url = window.location.search.substring(1);
		urlvars = url.split('&');
		var recipID = '6';

		for (i = 0; i < urlvars.length; i++){  
			param = urlvars[i].split('=');  

			if (param[0] == "recipientId"){  
				$("#recipientId").val(param[1]) 
				recipID = param[1];
			}  
		}
		if (recipID !== '') {
			$("#div" + recipID).show();
			$("#" + recipID).addClass("active");
			$("#" + recipID).parent("div").addClass("active");
		}
	});
</script>

<style>
	a.active { 
		color:black;
	}
	.link.active { 
		color:black;
	}
	
	.ForMembers a {
		font-size:12px;
		font-family:Georgia, "Times New Roman", Times, serif;
	}

	.MemCovInfo.active {
		background-color:#CCC;
		width:685px;
	}

	.MemCovInfo {
		background-color:#417DBE;
		margin: 0px 0px 0px 0px;
		padding: 10px 15px 0px 5px;
		width:180px;
		height:95px;
		margin-top:-20px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		text-align:left;
	} 
	
	.MemCovInfo a {
		color:#FFF;
		font-family:Georgia, "Times New Roman", Times, serif;
		font-size: 20px;
		cursor:pointer;
	}

	.MemCovInfo a:hover {
		color:#000;
	}

	.MemCovInfo a.active {
		color:#000;
	}

	.MemCovInfo:hover {
		background-color:#CCC;
		color:#000;
		cursor:pointer;
	}
	
	.show.active {
		color:#000;
	}

	#ForMembers {
		background-color:#417DBE;
		margin: 0px 0px 0px 0px;
		padding: 10px 15px 0px 5px;
		width:180px;
		height:95px;
		margin-top:-20px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		text-align:left;
	} 
	
	#ForMembers a {
		color:#FFF;
		font-family:Georgia, "Times New Roman", Times, serif;
		font-size: 20px;
		cursor:pointer;
	}

	#ForMembers a:hover {
		color:#000;
	}

	#ForMembers a.active {
		color:#000;
	}

	#ForMembers.active {
		background-color:#CCC;
		color:#000;
	}
	
	#ForMembers:hover {
		background-color:#CCC;
		color:#000;
		cursor:pointer;
	}
	
	#Coverage {
		background-color:#417DBE;
		margin: 0px 0px 0px 0px;
		padding: 10px 15px 0px 5px;
		width:200px;
		height:95px;	
		margin-left:205px;
		margin-top:-105px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		text-align:left;	
	}

	#Coverage:hover {
	background-color:#CCC;
	cursor:pointer;
	}

	#Coverage a  {	
		font-family:Georgia, "Times New Roman", Times, serif;
		font-size:20px;
		color:#FFF;
	}
	
	#Coverage a.active {
		color:#000;
	}

	#Coverage.active {
		background-color:#CCC;
	}

	#Coverage a:hover  {
		color:#000;
	}	

	#GenInfo {
		background-color:#417DBE;
		margin: 0px 0px 0px 0px;
		padding: 10px 15px 0px 5px;
		width:190px;
		height:95px;
		font-size:14px;
		margin-left:430px;
		margin-top:-105px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		text-align:left;	
	}
	
	#GenInfo:hover {
		background-color:#CCC;
		cursor:pointer;
	}	
	#GenInfo a  {
		color:#FFF;
		font-family:Georgia, "Times New Roman", Times, serif;
		font-size:20px;
	}

	#GenInfo a.active {
		color:#000;
	}

	#GenInfo.active {
		background-color:#CCC;
	}

	#GenInfo a:hover {
		color:#000;
	}

	#contactForm {
		display:none;
	}
	
	.label_copy {
		display:none;
	}
</style>



<div id="ForMembers" class="MemCovInfo" style="margin-top:40px;" >
	
		<span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">Members</span><br/>
	
		<a id="1" href="#1" target="_self" class="link show" style="font-size:12px;">Report</a><br/>
		<a id="7" href="#7" target="_self" class="link show" style="font-size:12px;">Member </a><br/>
		<a id="8" href="#8" target="_self" class="link show" style="font-size:12px;">Patient </a>

	</div>

	<div id="Coverage" class="MemCovInfo">
	
		<span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">Coverage</span><br/>

		<a id="3" href="#3" target="_self" class="link show" style="font-size:12px;">Get a Quote</a><br/>
		<a id="4" href="#4" target="_self" class="link show" style="font-size:12px;">Apply for Coverage</a><br/>
		<a id="5" href="#5" target="_self" class="link show" style="font-size:12px;">Find an Agent</a>
	
	</div>
	
	<div id="GenInfo" class="MemCovInfo">

		<span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">General Information</span><br/>
	
		<a id="6" href="#6" target="_self" class="link show" style="font-size:12px;">Contact us by email</a>
	
	</div>

	<div id="div1" class="label_copy">
		<h2>claim info</h2>
	</div>

	<div id="div7" class="label_copy">
		<h2>member info</h2>
	</div>

	<div id="div8" class="label_copy">
		<h2>Patient info</h2>
	</div>

	<div id="div3" class="label_copy">
		<h2>Quote info</h2>
	</div>

	<div id="div4" class="label_copy">
		<h2>Coverage info</h2>
	</div>

	<div id="div5" class="label_copy">
		<h2>Agent info</h2>
	</div>

	<div id="div6" class="label_copy">
		<h2>contact info</h2>
	</div>

	<form id="contactForm" name="contactForm" method="post" encType="multipart/form-data" />

        <input type="hidden" value="<!--$ssServerRelativeSiteRoot-->ContactUs/Form/index.htm?formSubmitted=1" name="RedirectUrl" />
        <input type="hidden" id="recipientId" name="recipientId" value="" />

  		<!-- Subject -->
    	<div style="margin-bottom:10px;">

			<label for="emailSubject">Subject:</label><br />
			<input class="text" maxlength="80" size="40" type="text" name="emailSubject" id="emailSubject" />

        </div>

        <!-- Email -->
		<div style="margin-bottom:10px;">

			<label for="emailAddress">E-mail:</label><br />
			<input class="text" size="30" type="text" name="emailAddress" id="emailAddress" maxlength="50" />

        </div> 

        <!-- Message -->
		<div style="margin-bottom:10px;">

			<label for="txt_Message">Message:</label><br />
			<textarea id="txt_Message" name="txt_Message" rows="4" wrap="virtual" cols="42" maxlength="400"></textarea>

        </div>
        
	</form>

Open in new window

smfmetro10Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kyle AbrahamsSenior .Net DeveloperCommented:
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var recipientId = getParameterByName('recipientId');

Open in new window


then somewhere in the code:

if (recipientid == 1)
  window.Location = something;
else if (recipientid == 2)
  window.Location = something_else;
...
0
smfmetro10Author Commented:
Thanks for the reply... I don't exactly know what you mean when you say "somewhere in the code" and what would the "something" be..

Why wouldn't this work?

if($("#recipientId").val()==6 || $(" #recipientId").val()==7 || $("#recipientId").val()==8) {
                        $("#contactForm").show();
                  }
                  else {
                        $("#contactForm").hide ();
                  }

Thanks for the help!
0
Ray PaseurCommented:
Please take a moment to understand the roles of the various technologies involved in the WWW.  This article gives some of the background.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/A_11271-Understanding-Client-Server-Protocols-and-Web-Applications.html

A client makes a request, then a server makes a response.  Let's say the client request is a browser visiting a URL containing the URL arguments with "?recipientId=6."  That information will be presented to the server.  In response to the request, the server will create a document, consisting of HTML, CSS and JavaScript and the server will send the document to the browser, then the server disconnects and waits for the next request.

If the server gets "?recipientId=6," the server is quite able to be smart enough to know it needs to provide a "contact us by email" link in the HTML document.  This is typically how such a thing is done -- no JavaScript is used to process URL parameters because no JavaScript is needed.

Do you have a server-side scripting language like PHP or Python?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Kyle AbrahamsSenior .Net DeveloperCommented:
do you have recipientID as a text field?  If all you're trying to do is to show or hide the contact form:
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
//read it right from query string.
var recipientId = getParameterByName('recipientId');

Open in new window


if(recipientId==6 || recipientId==7 || recipientId==8) {
                        $("#contactForm").show();
                  }
                  else {
                        $("#contactForm").hide ();
                  }
0
smfmetro10Author Commented:
hmm.. I cant get that to work.  Here is what I'm talking about.

http://thelocalized.com/doctorscompany/contact_page/div.html?recipientId=6

As the page loads the contact form should show (but it doesn't) but, if you click on the "Contact us by email" link then it shows up.
0
Kyle AbrahamsSenior .Net DeveloperCommented:
you're looking for the #6 after the value.
Instead of

$("#recipientId").val()==6

use

recipientId == 6
0
Jim RiddlesPrepress/OMS SpecialistCommented:
@smfmetro10

Your if function to check the recipientId and open or close the form is wrapped inside of your click function.  It only fires when the user clicks the div.
0
smfmetro10Author Commented:
replacing it with:

if ("recipientId" == 6|| "recipientId"==7 || "recipientId"==8) {
                        $("#contactForm").show();
                  }
                  else {
                        $("#contactForm").hide ();
                  }

Doesn't work either
0
Jim RiddlesPrepress/OMS SpecialistCommented:
In addition, I would alter the line that binds the click and prevent the default action with the next line.

		$("div a").click(function(e) {

			e.preventDefault();

Open in new window


Take a look at your URL in the address bar after you click the link, right now.  It appends the recipientId after a #.  The above code prevents that.
0
Kyle AbrahamsSenior .Net DeveloperCommented:
The recipientID is a var declared in the code, not a string:

if (recipientId == 6|| recipientId==7 || recipientId==8) {
                        $("#contactForm").show();
                  }
                  else {
                        $("#contactForm").hide ();
                  }
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Michel PlungjanIT ExpertCommented:
or just

  $("#contactForm").toggle(recipientId == 6|| recipientId==7 || recipientId==8);
0
smfmetro10Author Commented:
Awesome! Thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.