We help IT Professionals succeed at work.

Form javascript does not redirect to our URL on submission

I have a webpage with the following form on it:

<!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 -->

Open in new window


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;

	});
});

Open in new window


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/" />

Open in new window


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>');
					});

Open in new window

     

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!





Comment
Watch Question

Commented:
you're not setting the 'action' for the form to the value on your hidden input field "retURL"
try setting that value before $.post($(this).attr('action'),formInput, function(data){

Author

Commented:
I appreciate your help. Since I am clueless about javascript, perhaps you could post the actual code I would need. Thanks!
Commented:
sorry, i didn't see this instruction you have there

var formInput = $(this).serialize();

so, try just by changing the return false; for a simple return; like:

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;

Commented:
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

Author

Commented:
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!!