smfmetro10
asked on
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!
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>
ASKER
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!
Why wouldn't this work?
if($("#recipientId").val()
$("#contactForm").show();
}
else {
$("#contactForm").hide ();
}
Thanks for the help!
Please take a moment to understand the roles of the various technologies involved in the WWW. This article gives some of the background.
https://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?
https://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?
do you have recipientID as a text field? If all you're trying to do is to show or hide the contact form:
if(recipientId==6 || recipientId==7 || recipientId==8) {
$("#contactForm").show();
}
else {
$("#contactForm").hide ();
}
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');
if(recipientId==6 || recipientId==7 || recipientId==8) {
$("#contactForm").show();
}
else {
$("#contactForm").hide ();
}
ASKER
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.
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.
you're looking for the #6 after the value.
Instead of
$("#recipientId").val()==6
use
recipientId == 6
Instead of
$("#recipientId").val()==6
use
recipientId == 6
@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.
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.
ASKER
replacing it with:
if ("recipientId" == 6|| "recipientId"==7 || "recipientId"==8) {
$("#contactForm").show();
}
else {
$("#contactForm").hide ();
}
Doesn't work either
if ("recipientId" == 6|| "recipientId"==7 || "recipientId"==8) {
$("#contactForm").show();
}
else {
$("#contactForm").hide ();
}
Doesn't work either
In addition, I would alter the line that binds the click and prevent the default action with the next line.
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.
$("div a").click(function(e) {
e.preventDefault();
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
or just
$("#contactForm").toggle(r ecipientId == 6|| recipientId==7 || recipientId==8);
$("#contactForm").toggle(r
ASKER
Awesome! Thanks!
Open in new window
then somewhere in the code:
if (recipientid == 1)
window.Location = something;
else if (recipientid == 2)
window.Location = something_else;
...