?
Solved

Submit form redirect on submit

Posted on 2014-04-30
7
Medium Priority
?
959 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 59

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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 59

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 59

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

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

650 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