Solved

Submit form redirect on submit

Posted on 2014-04-30
7
914 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 55

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

 
LVL 55

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 55

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

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Open iframe using jquery dialog box 13 37
How to make a good PHP + MySQL + JS pagination system? 3 31
Wordpress Only run code if on a certain page 11 22
Javascript 2 22
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

856 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