?
Solved

Submit form redirect on submit

Posted on 2014-04-30
7
Medium Priority
?
949 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
7 Comments
 
LVL 36

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 58

Accepted Solution

by:
Julian Hansen earned 2000 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 58

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 36

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 58

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

777 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