Solved

Submit form redirect on submit

Posted on 2014-04-30
7
904 Views
Last Modified: 2014-05-04
I have a submit form working where once submitted the customer is redirected to another page. That's using this script...

 jQuery(function($){
	
		
	 $('#container_w2ContactForm2').w2ContactForm({
    noSpamControl: true,
	 attachmentFile: false,   //Specifie if No Spam Control is activate (true / false)
    submitSuccess: submitSuccessForm //Callback for success submit
});

//callback function for form validation
function submitSuccessForm (form) {
    var container = form.container;
    $('form', container).fadeOut(1000);
    var delay = 2000;
        setTimeout(function(){
        window.location = "yourcard.php";
    },delay);
}
		
	

    });  

Open in new window



What I need to do is redirect a customer to different pages depending on the value slected from the 'which' option. I have found this script on the net which should achieve that...

	   jQuery(function($){
	
		
	 $('#container_w2ContactForm2').w2ContactForm({
    noSpamControl: true,
	 attachmentFile: false,   //Specifie if No Spam Control is activate (true / false)
    submitSuccess: submitSuccessForm //Callback for success submit
});

//callback function for form validation
function() {
$("input[name$='which']").click(function() {
    var value = $(this).val();
    if (value == 'Diesel and Petrol') {
        window.location.assign("http://www.bwoc.co.uk/fuelcard.php?id=Fastfuel");
    }
    else if (value == 'Carbon Capturing') {
        window.location.assign("http://www.bwoc.co.uk/fuelcard.php?id=Green%20Card");
    }
    else if (value == 'Card Security') {
        window.location.assign("http://www.bwoc.co.uk/fuelcard.php?id=Diesel%20control");
    }
});};	
	

    });

Open in new window



I just can't seem to mix the two together so on form submission the customer redirects?

Hope someone can help!
0
Comment
Question by:BrighteyesDesign
  • 3
  • 2
  • 2
7 Comments
 
LVL 35

Expert Comment

by:Kimputer
ID: 40031661
It should look something like this:

 jQuery(function($){
	
		
	 $('#container_w2ContactForm2').w2ContactForm({
    noSpamControl: true,
	 attachmentFile: false,   //Specifie if No Spam Control is activate (true / false)
    submitSuccess: submitSuccessForm //Callback for success submit
});

//callback function for form validation
function submitSuccessForm (form) {

	var value = $(input[name$='which']).val();
    if (value == 'Diesel and Petrol') {
        url="http://www.bwoc.co.uk/fuelcard.php?id=Fastfuel";
    }
    else if (value == 'Carbon Capturing') {
        url="http://www.bwoc.co.uk/fuelcard.php?id=Green%20Card";
    }
    else if (value == 'Card Security') {
        url="http://www.bwoc.co.uk/fuelcard.php?id=Diesel%20control";
    }
	
	
    var container = form.container;
    $('form', container).fadeOut(1000);
    var delay = 2000;
        setTimeout(function(){
        window.location = url;
    },delay);
}
		
	

    });  

Open in new window

0
 
LVL 54

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 40031853
What does your "which" option look like
value slected from the 'which' option
From your comment it sounds like a <select> but the example uses an input?

<!doctype html>
<html>
<head>
<title>5</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
// Setup a list of urls with matching keys
// Keys are the possible values with spaces changed to underscores

var urls = {
  Diesel_and_Petrol : 'http://www.bwoc.co.uk/fuelcard.php?id=Fastfuel',
  Carbon_Capturing : 'http://www.bwoc.co.uk/fuelcard.php?id=Green%20Card',
  Card_Security : 'http://www.bwoc.co.uk/fuelcard.php?id=Diesel%20control'
};

 jQuery(function($){
  $('#container_w2ContactForm2').w2ContactForm({
      noSpamControl: true,
      attachmentFile: false,   //Specifie if No Spam Control is activate (true / false)
      submitSuccess: submitSuccessForm //Callback for success submit
});

function submitSuccessForm (form) {
  // change to assignment from control
  // var value = $(input[name$='which']).val();
  var which = 'Diesel and Petrol';
  var url = '';
  // Change spaces to underscores so they will match our keys
  which = which.replace(/\s/g, '_');

  // Search for matching key and return url
  for(var k in urls) {
    if (which == k) {
      url = urls[k];
      break;
    }
  }

  var delay = 2000;
        setTimeout(function(){
        window.location = url;
    },delay);
}
</script>
</head>
<body>

</body>
</html>

Open in new window

0
 

Author Comment

by:BrighteyesDesign
ID: 40032855
Ah yes, well spotted, should i  just change input to select?

Also, Kimputer your script almost seems to work but once the form is submitted it just stays on the same page and doesn't redirect...you can see it in action here: http://www.bwoc.co.uk/whichcard-1.php

With your example julian it seems there might be a missing bracket or semicolon in the code perhaps? and errors  http://www.bwoc.co.uk/whichcard-2.php
Screen-Shot-2014-04-30-at-19.15..png
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 54

Expert Comment

by:Julian Hansen
ID: 40032988
Yes there is a missing bracket and brace closing the JQuery
jQuery(function($){
  $('#container_w2ContactForm2').w2ContactForm({
      noSpamControl: true,
      attachmentFile: false,   //Specifie if No Spam Control is activate (true / false)
      submitSuccess: submitSuccessForm //Callback for success submit
  }); // THIS WAS MISSING
});

Open in new window

No particular reason to change to a select - radio's are fine - it just wasn't clear from your question which one you were using.
What I did notice is that only one of your radio's has a name - so the five buttons (excluding fixed price) are in their own group and Fixed Price (which has a name) is in its own group
0
 
LVL 35

Expert Comment

by:Kimputer
ID: 40033393
Because I didn't have your code before about "which", I just guessed you gave me the correct code already. But it seems it's not:

 jQuery(function($){
	
		
	 $('#container_w2ContactForm2').w2ContactForm({
    noSpamControl: true,
	 attachmentFile: false,   //Specifie if No Spam Control is activate (true / false)
    submitSuccess: submitSuccessForm //Callback for success submit
});

//callback function for form validation
function submitSuccessForm (form) {

	
	var myRadio = $('input[name=which]');	
	var value = myRadio.filter(':checked').val();
		
    if (value == 'Diesel_and_Petrol') {
        url="http://www.bwoc.co.uk/fuelcard.php?id=Fastfuel";
    }
    else if (value == 'Carbon Capturing') {
        url="http://www.bwoc.co.uk/fuelcard.php?id=Green%20Card";
    }
    else if (value == 'Card Security') {
        url="http://www.bwoc.co.uk/fuelcard.php?id=Diesel%20control";
    }
	
	
    var container = form.container;
    $('form', container).fadeOut(1000);
    var delay = 2000;
        setTimeout(function(){
        window.location = url;
    },delay);
}
		
	

    });  

Open in new window


Notice the use (or lack thereof) of underscore in the values, it's not by my choice, it's according to your source code.
0
 

Author Comment

by:BrighteyesDesign
ID: 40040979
HI, I've just relaised it's not actually working but I think I know why....It'a basically always taking the value 'Diesel and Petrol' regardless of the form value selected. It's because   "var which = 'Diesel and Petrol';"

How do I get var which to take the value of the 'which' value from the form? Which will be either Diesel_and_Petrol, Carbon_Capturing, Card_Security, Fixed_Price, Rebate or Supermarkets.


<script type="text/javascript">
// Setup a list of urls with matching keys
// Keys are the possible values with spaces changed to underscores

var urls = {
  Diesel_and_Petrol : 'http://www.bwoc.co.uk/fuelcard.php?id=Fastfuel',
  Carbon_Capturing : 'http://www.bwoc.co.uk/fuelcard.php?id=Green%20Card',
  Card_Security : 'http://www.bwoc.co.uk/fuelcard.php?id=Diesel%20control',
   Fixed_Price : 'http://bwoc.co.uk/fuelcard.php?id=Esso%20Commercial',
  Rebate : 'http://bwoc.co.uk/fuelcard.php?id=Diesel%20Loyalty',
  Supermarkets : 'http://bwoc.co.uk/fuelcard.php?id=UK%20Fuels'
};

 jQuery(function($){
  $('#container_w2ContactForm2').w2ContactForm({
      noSpamControl: true,
      attachmentFile: false,   //Specifie if No Spam Control is activate (true / false)
      submitSuccess: submitSuccessForm //Callback for success submit
});
});

function submitSuccessForm (form) {
  // change to assignment from control
  // var value = $(input[name$='which']).val();
  var which = 'Diesel and Petrol';
  var url = '';
  // Change spaces to underscores so they will match our keys
  which = which.replace(/\s/g, '_');

  // Search for matching key and return url
  for(var k in urls) {
    if (which == k) {
      url = urls[k];
      break;
    }
  }

  var delay = 2000;
        setTimeout(function(){
        window.location = url;
    },delay);
}
</script>

Open in new window

0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 40041435
Try this - change lines 24 and 25 to

var which = $(input[name$='which']).val();
//  var which = 'Diesel and Petrol';
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

822 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question