Appending return URL on a form

[mboehler3]

I have a form that generates a price quote when users enter in some personal information. On page 1 is the form and on page 2 is the generated price quote. The price quote equation uses two pieces of information from the form.I am trying pass along the two pieces of information from page 1 to page 2 by appending the return URL in my form code. I believe I need to add an onClick to the two form inputs that need to pass, but I’m not sure how to do this. Can someone please offer some assistance? Any help is appreciated.

[ShadowMage]

Why not just use standard POST and GET? Or are you not using server-side? If that's the case why not do this all on the same page?

[mboehler3]

Why not just use standard POST and GET? Or are you not using server-side? If that's the case why not do this all on the same page?

Yes I am not using server-side, the form action sends the information to a third-party site. I guess I could do all of this on the same page, but in that case the information would still need to pass to output a price quote.However I want to keep the page how it is set up, with the form one one page and the price quote on the second page.

[thescientist]

http://www.boutell.com/newfaq/creating/scriptpass.html#2

[mboehler3]

I've found an example of a script to use on this forum here: Javascript form passing data between pages and am having some trouble getting it to convert onto my page.I've copied the code exactly as is it but renamed two fields I want to pass. Here is what my code looks like:

<script type="text/javascript"><!--function GoToConfirmPage(){var PayrollFrequency = document.getElementById("PayrollFrequency").value;var NumberOfEmployees = document.getElementById("NumberOfEmployees").value;if (PayrollFrequency) {window.location.href = "http://www.mysite.com/quote_results.asp?PayrollFrequency=" + PayrollFrequency +"&NumberOfEmployees=" + NumberOfEmployees;}}//--></script><img src="/images/fpq_form-short-header.gif" /><br /><div class="fpq_form-short">   <script language="JavaScript" src="/quote/form_check.js" type="text/javascript"></script>	<form class="fpq" action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" id="quotesform1" name="quotesform1" onSubmit="return checkquotevalues();">		<input type=hidden name="oid" value="00D600000006sZz">	<input type=hidden name="retURL" value="http://www.mysite.com/quote_results.asp">	<input type=hidden name="lead_source" value="Internet">	<input type=hidden name="recordType" value="012600000009HL1">	<input type=hidden name="00N60000001R01v" value="Marketing Inbound">	<input type=hidden name="00N60000001S2tS" value="<% =fm_refcode %>">	<!--  NOTE: These fields are optional debugging elements.  Please uncomment   -->	<!--  these lines if you wish to test in debug mode.						  -->	<!--  <input type="hidden" name="debug" value=1>							  -->	<!--  <input type="hidden" name="debugEmail"								  -->	<!--  value="mboehler3@mysite.com"> 									  -->		<input name="ReferralCode" type="hidden">	<table cellpadding="0" cellspacing="0" border="0" width="120" class="lmargin35">	<tr>	<td align="left">	<div id="inputWrapper"><input class="bmargin5" type="text" size="15" maxlength="50" id="first_name" name="first_name" value="First Name" tabindex="1" onfocus="if(this.value == 'First Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'First Name';}" /></div>	</td>	<td align="right">	<div id="inputWrapper"><input class="bmargin5" type="text" size="15" maxlength="50" id="last_name" name="last_name" value="Last Name" tabindex="2" onfocus="if(this.value == 'Last Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Last Name';}" /></div>	</td>	</tr>	<tr>	<td align="left">	<div id="inputWrapper"><input class="bmargin5" type="text" size="15" maxlength="50" id="email" name="email" value="Email" tabindex="3" onfocus="if(this.value == 'Email') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Email';}" /></div>	</td>	<td align="right">	<div id="inputWrapper"><input class="bmargin5" type="text" size="15" maxlength="50" id="NumberOfEmployees" name="00N60000001Sbzr" value="# of Employees" tabindex="4" onfocus="if(this.value == '# of Employees') {this.value = '';}" onblur="if (this.value == '') {this.value = '# of Employees';}" /></div>	</td>	</tr>	<tr>	<tr>	<td colspan="2" valign="middle" align="right">	Phone #	<span id="inputWrap" class="lpadding40">	<input type="text" maxlength="10" id="phone" name="phone" value="" tabindex="5" />	</span>	</td>	</tr>	<tr>	<td colspan="2">	What's Your Frequency?	<div id="inputWrap">	<select name="00N60000001R02F" id="PayrollFrequency" tabindex="8" class="width240" />	<option value='0'>Select one</option>	<option value="Weekly">Weekly</option>	<option value="Bi-Weekly">Bi-Weekly</option>	<option value="Semi-Monthly">Semi-Monthly</option>	<option value="Monthly">Monthly</option>	</select></div>	</p>	</td>	</tr>	<tr>	<td colspan="2">	What's Your Current Method?	<div id="inputWrap" class="bpadding5">	<select name="00N60000001R02Z" id="PayrollMethod" tabindex="9" class="width240" />	<option value='0'>Select one</option>	<option value='New Business'>New Business</option>	<option value='In House'>In House</option>	<option value='Not Currently Processing'>Not Currently Processing</option>	<option value='Accountant'>Accountant/Bookkeeper</option>	<option value='Payroll Service'>Payroll Service</option>	<option value='PEO/Leasing Company'>PEO/Leasing Company</option>	<option value='Other'>Other</option>	</select></div>	</p>	</td>	</tr>	<tr>	<td colspan="2"> </td>	</tr>	</table>		<p><input type="image" value="Submit" onClick="GoToConfirmPage();" /></p>		</form><br /></div><img src="/images/fpq_form-short-footer.gif" class="tmarginneg20" />

When I use this code, it correctly passes the two variables in the URL string.However I want to replace the submit code with my own image, so I change

<input type="image" value="Submit" onClick="GoToConfirmPage();" />

to

<input type="image" src="/images/continue.gif" tabindex="10" alt="Get Quote" id="Image1" name="submit2" />

And once I do this, the URL no longer passes the two variables.I've tried playing around with the code but can't find any solution. Is there something you can spot that I'm doing incorrect?

[ShadowMage]

I think you may have forgotten the onclick handler in your input.

[mboehler3]

I think you may have forgotten the onclick handler in your input.

Right, I wasn't paying attention when I copied that code into my post. I have my code set up like:

<input type="image" src="/images/payroll-continue.gif" tabindex="10" alt="Get Instant Quote" id="Image1" name="submit2" onClick="GoToConfirmPage();" />

And, actually, the string is being passed in the URL. But my problem is that my other javascript, /quote/form_check.js, which checks for the proper form information, is not working properly. When you hit submit with no information in the form, up pops the alertbox, however immediately after you hit "OK" the browser sends you onto the next screen. Ideally, I'd like the alertbox to pop up when the user hasn't submitted proper information, but remain on the first page until the user submits the right info. Is there something you can see in the code that's causing this?

[thescientist]

I think its because of the way the conditional is being setup. When you want to submit the form, I would instead change it check the value of the form data, and then if its meets the requirements, go to the desired page and append the correct values to the URL, else you can have it do whatever you want in the case of an error.Essentially it looks like if a form element is empty, it sets a default string value for the input element's value. So if(PayrollFrequency) will always return true.

	<div id="inputWrapper"><input class="bmargin5" type="text" size="15" maxlength="50" id="last_name" name="last_name" value="Last Name" tabindex="2" onfocus="if(this.value == 'Last Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Last Name';}" /></div>

You can see that if you focus (onFocus) on the input, it changes it from "Last Name" to "". If you move away from it (onBlur), and haven't typed anything, it changes it back to "Last Name".Also, (especially) since you are working with forms and the such, you can't use an ID more than once on a page. You can use classes instead.