wintensivetech
asked on
Form javascript does not redirect to our URL on submission
I have a webpage with the following form on it:
Here is the javascript file that works with it:
The problem is that when the form is filled out it does not redirect the user to our webpage as noted in this line:
But instead the form disappears and shows a little box with the thanks you text as controlled byt his code from the javascript:
The form does properly post to our CRM servlet as in the form action at the beginning of the form which is absolutely necessary, however we also need it to redirect to the URL of our webpage instead of the behavior it does now - just showing the thank you text.
Does anyone know why the javascript code is overriding the retURL command in the form? Is there anyway to modify it so that the form posts correctly to our CRM servlet but also redirects the user to the webpage in the retURL command?
Thanks in advance for any suggestions. Cheers!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Here's Why!</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/custom.js"> </script>
<script src="js/tabs.js" type="text/javascript" charset="utf-8"></script>
<script src="js/tipsy.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#form").val();
});
</script>
<script type='text/javascript'>
$(function() {
$('#example-1').tipsy({gravity: 'n'});
$('#north').tipsy({gravity: 'n'});
$('#south').tipsy({gravity: 's'});
$('#east').tipsy({gravity: 'e'});
$('#west').tipsy({gravity: 'w'});
$('#auto-gravity').tipsy({gravity: $.fn.tipsy.autoNS});
$('.fade').tipsy({fade: true});
$('#example-custom-attribute').tipsy({title: 'id'});
$('#example-callback').tipsy({title: function() { return this.getAttribute('original-title').toUpperCase(); } });
$('#example-fallback').tipsy({fallback: "?" });
$('#example-html').tipsy({html: true });
});
</script>
</head>
<body>
<!-- START OF CONTACT WRAPPER -->
<form action="https://www.ourcrm.com/servlet/servlet.WebToLead?encoding=UTF-8" enctype="application/x-www-form-urlencoded" method="post" id="contact_form">
<input name="oid" type="hidden" value="00D00000000hakj" />
<input name="retURL" type="hidden" value="http://www.webpage.com/index.php/thank-you-case-study/" />
<ul>
<li>
<label>Company <span class="required">required</span></label>
<input type="text" name="company" id="company" />
</li>
<li>
<label>First Name <span class="required">required</span></label>
<input type="text" name="first_name" id="first_name" />
</li>
<li>
<label>Last Name <span class="required">required</span></label>
<input type="text" name="last_name" id="last_name" />
</li>
<li>
<label>Email <span class="required">required</span></label>
<input type="text" name="email" id="email" class="requiredField email" />
</li>
<select id="00N00000006osMe" title="Request Type" name="00N00000006osMe"> <option selected="selected" value=" AB_Case Study">-- AB_Case Study --</option></select>
<li class="button"><input name="submit" type="submit" value="" />
</li>
<li><h6>We hate SPAM as much as you do. Your contact information will NEVER be shared with anyone and will ONLY be used to send you the information requested.<h6></li>
</ul>
</form>
<!-- END OF CONTACT WRAPPER -->Here is the javascript file that works with it:
/***************************************************
FORM VALIDATION JAVASCRIPT
***************************************************/
$(document).ready(function() {
$('form#contact_form').submit(function() {
$('form#contact_form .error').remove();
var hasError = false;
$('.requiredField').each(function() {
if(jQuery.trim($(this).val()) == '') {
var labelText = $(this).prev('label').text();
$(this).parent().append('<span class="error">You forgot to enter your '+labelText+'.</span>');
$(this).addClass('inputError');
hasError = true;
} else if($(this).hasClass('email')) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test(jQuery.trim($(this).val()))) {
var labelText = $(this).prev('label').text();
$(this).parent().append('<span class="error">You entered an invalid '+labelText+'.</span>');
$(this).addClass('inputError');
hasError = true;
}
}
});
if(!hasError) {
$('form#contact_form input.submit').fadeOut('normal', function() {
$(this).parent().append('');
});
var formInput = $(this).serialize();
$.post($(this).attr('action'),formInput, function(data){
$('form#contact_form').slideUp("fast", function() {
$(this).before('<p class="success">Thanks! Your email was successfully sent. We will contact you as soon as possible.</p>');
});
});
}
return false;
});
});The problem is that when the form is filled out it does not redirect the user to our webpage as noted in this line:
<input name="retURL" type="hidden" value="http://www.webpage.com/index.php/thank-you-case-study/" />But instead the form disappears and shows a little box with the thanks you text as controlled byt his code from the javascript:
$(this).before('<p class="success">Thanks! Your email was successfully sent. We will contact you as soon as possible.</p>');
});The form does properly post to our CRM servlet as in the form action at the beginning of the form which is absolutely necessary, however we also need it to redirect to the URL of our webpage instead of the behavior it does now - just showing the thank you text.
Does anyone know why the javascript code is overriding the retURL command in the form? Is there anyway to modify it so that the form posts correctly to our CRM servlet but also redirects the user to the webpage in the retURL command?
Thanks in advance for any suggestions. Cheers!
ASKER
I appreciate your help. Since I am clueless about javascript, perhaps you could post the actual code I would need. Thanks!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
by the way, since i cannot test your site's info, then maybe you need to also change the order of your "hidden" fields like
first the retURL field and then the oid
not sure, but you're posting the data to the
https://www.ourcrm.com/servlet/servlet.WebToLead?encoding=UTF-8
sending this values... i don't know if that's what you need to send in that order:
retURL=http%3A%2F%2Fwww.webpage.com%2Findex.php%2Fthank-you-case-study%2F&oid=00D00000000hakj&company=myCompany&first_name=myName&last_name=myLastNam&email=myEmail%40myHost.net&00N00000006osMe=+AB_Case+Study
first the retURL field and then the oid
not sure, but you're posting the data to the
https://www.ourcrm.com/servlet/servlet.WebToLead?encoding=UTF-8
sending this values... i don't know if that's what you need to send in that order:
retURL=http%3A%2F%2Fwww.webpage.com%2Findex.php%2Fthank-you-case-study%2F&oid=00D00000000hakj&company=myCompany&first_name=myName&last_name=myLastNam&email=myEmail%40myHost.net&00N00000006osMe=+AB_Case+Study
ASKER
baretre:
looks like we have a winner!!!
All I did was change "return false;" to just "return;"
I did not have to change the order of things as you mentioned.
The form submits to the CRM which handles the form and creates the autoresponse as needed (so I assume the form data was transmitted as well), then it forwards me to the retURL as needed.
I need to test it a few more times and check tomorrow that the form data is posting properly, and then I will award points. Again, I assume the data fields are transmitting since the CRM does provide the autorespond email as it should, but I just need to check with an admin tomorrow. Thanks for your help!!
looks like we have a winner!!!
All I did was change "return false;" to just "return;"
I did not have to change the order of things as you mentioned.
The form submits to the CRM which handles the form and creates the autoresponse as needed (so I assume the form data was transmitted as well), then it forwards me to the retURL as needed.
I need to test it a few more times and check tomorrow that the form data is posting properly, and then I will award points. Again, I assume the data fields are transmitting since the CRM does provide the autorespond email as it should, but I just need to check with an admin tomorrow. Thanks for your help!!
try setting that value before $.post($(this).attr('actio