Solved

Submit form redirect on submit

Posted on 2014-04-30
7
859 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 51

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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 51

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 51

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 your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
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 …

744 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now