[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 753
  • Last Modified:

Fancybox appears on successful form submit

I have a form on my website which if all the correct fields are filled out and the credit card type is selected should open up a fancybox, but for some reason it's not working.

My site is here - http://www.urlgone.com/d391ad/

This is my form validation script:

$("#form1").validate(
	{
		errorLabelContainer: $(".errors"),
		rules: {
			totalSum: {
				required: true,
				min: 1,
				number: true
			}
		},
		invalidHandler: function(form, validator){ 
		$.scrollTo( '#form1', "slow");
     }, 
	  submitHandler: function(form) {
		  if ($("#credit").attr("checked")) {
			var tot = $("#totalSum").val();
			var charge = ((tot / 100) * 2.75).toFixed(2);
			$(".cc-tot").html('£' + (+tot + +charge));
			$("#trigger").fancybox({
				closeClick  : false,
				helpers     : { 
				overlay		: {closeClick: false}
				}
			}).trigger('click');
		  } else {
			form.submit();
		  }
		},
     focusInvalid:false
	});

Open in new window


Can anyone please help?

Thanks,

Chris
0
djfenom
Asked:
djfenom
  • 5
  • 3
1 Solution
 
GaryCommented:
Either use e.preventDefault() at the beginning or use return false at the end, in your validate function.
0
 
djfenomAuthor Commented:
e.preventDefault() submits the form without the fancybox and return false appears to do nothing.
0
 
GaryCommented:
Ok
Your fancybox is just?
<a id="trigger" href="#cc-warning"></a>

I'm not familiar with appending a trigger to the fancybox, normal usage is just
      $("#trigger").fancybox({
            // effects etc
      });
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
djfenomAuthor Commented:
Yes, it basically just fires a trigger to open it automatically.
0
 
GaryCommented:
You seem to have some conflicts with scripts.js and jquery.validate.js and fancybox.
Trying to find it now.
0
 
GaryCommented:
In scripts.js you have
$("#frmreg").validate();

frmreg doesn't exist - this breaks the js
0
 
djfenomAuthor Commented:
I've taken that line out and it's still the same?
0
 
GaryCommented:
It works fine for me - I get the fancybox.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now