Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 112
  • Last Modified:

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

0
smfmetro10
Asked:
smfmetro10
  • 4
  • 4
  • 2
  • +2
1 Solution
 
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
Michel PlungjanIT ExpertCommented:
or just

  $("#contactForm").toggle(recipientId == 6|| recipientId==7 || recipientId==8);
0
 
smfmetro10Author Commented:
Awesome! Thanks!
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 4
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now