Solved

Fancybox appears on successful form submit

Posted on 2013-06-24
8
732 Views
Last Modified: 2013-07-11
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
Comment
Question by:djfenom
  • 5
  • 3
8 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39271292
Either use e.preventDefault() at the beginning or use return false at the end, in your validate function.
0
 

Author Comment

by:djfenom
ID: 39271368
e.preventDefault() submits the form without the fancybox and return false appears to do nothing.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39271430
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
 

Author Comment

by:djfenom
ID: 39271469
Yes, it basically just fires a trigger to open it automatically.
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 58

Expert Comment

by:Gary
ID: 39272007
You seem to have some conflicts with scripts.js and jquery.validate.js and fancybox.
Trying to find it now.
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39272047
In scripts.js you have
$("#frmreg").validate();

frmreg doesn't exist - this breaks the js
0
 

Author Comment

by:djfenom
ID: 39274072
I've taken that line out and it's still the same?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39274834
It works fine for me - I get the fancybox.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
datetime in sql 6 31
two layers of simple javascript validation 2 30
how can i extend ? 2 22
ASP.net Fit 3 divs on screen side by side 3 6
Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

863 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

24 Experts available now in Live!

Get 1:1 Help Now