Conflicting JS with Popup contact Form
Question
I am trying to implement a popup contact form on a HTML site, and I'm running into a js conflict. I'm stuck with how to get everything on the site to work, because removing some of the js calls causes certain functionality to stop working. I'm sure for this community of experts, my error is probably evident and simple; nonetheless I could really use some help figuring it out. I've included my code below.
Thanks in advance!
<!DOCTYPE html>
<html lang="en"><!--<![endif]-->
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Basic -->
<title>iMAR Affiliate</title>
<meta content="DSA79" name="author" />
<meta content="responsive, html5 template, one page, landing, startup, business, company, corporate, creative" name="keywords" />
<meta content="iMAR Affiliate" name="description" /><!-- Mobile Specific Metas -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport" /><!-- Libs CSS -->
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/flexslider.css" rel="stylesheet" />
<link href="css/owl.carousel.css" rel="stylesheet" /><!-- On Scroll Animations -->
<link href="css/animate.css" rel="stylesheet" /><!-- Template CSS -->
<link href="css/style.css" rel="stylesheet" /><!-- Responsive CSS -->
<link href="css/responsive.css" rel="stylesheet" /><!-- Image Slider -->
<link href="js-image-slider.css" rel="stylesheet" type="text/css" /><!-- Google Fonts -->
<link href="http://fonts.googleapis.com/css?family=Lato:400,900italic,900,700italic,400italic,300italic,300,100italic,100" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="html5ModalContact.css">
<script type="text/javascript" src="jquery.html5ModalContact.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$().html5ModalContact({
// Popup Config
method: "post",
action: "process_form.php",
shadow: "#FFFFFF",
opacity: 70,
advanced_close: false,
// Fields Enabled
firstn_on: true,
lastn_on: false,
email_on: true,
subject_on: true,
phone_on: false,
// Field Labels
firstn_label: 'Your First Name',
lastn_label: 'Your Last Name',
email_label: 'Your Email Address',
subject_label: 'Message Subject',
phone_label: 'Your Phone Number',
message_label: 'Message',
submit_label: 'Submit',
close_label: 'Close',
// Other
subject_values: 'General,Technical,Feedback,Comments,Help and Support'
});
});
</script>
</head>
<body><!-- HEADER
============================================= -->
<header id="header">
<div class="navbar navbar-fixed-top">
<div class="container"><!-- Logo & Responsive Menu -->
<div class="navbar-header"><button class="navbar-toggle" data-target="#navigation-menu" data-toggle="collapse" id="nav-toggle" type="button"><span class="sr-only">Toggle navigation</span></button><a class="navbar-brand" href="#top-page-banner"><img alt="logo" role="banner" src="img/iMAR2014Logo.png" /></a></div>
<!-- /.navbar-header --><!-- Navigation -->
<nav class="collapse navbar-collapse" id="navigation-menu" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li><a class="selected-nav" href="#intro" id="GoToHome">Home</a></li>
<li><a href="#about-1" id="GoToAbout">About</a></li>
<li><a href="" id="">Brochure</a></li>
<li><a href="#features" id="GoToFeatures">Benefits</a></li>
<li><a href="#faq" id="GoToFaq">FAQ</a></li>
<li><a href="#clients" id="GoToClients">Clients</a></li>
<li><a href="http://50.87.154.1/~imarf/contact.html" id="GoToHome">Contact Us</a></li>
</ul>
</nav>
<!-- /.navbar-collapse --></div>
<!-- /.container --></div>
<!-- /.navbar --></header>
<!-- END HEADER --><!-- CONTENT WRAPPER
============================================= -->
<div id="content-wrapper"><!-- ABOUT-1
============================================= -->
<footer id="footer">
<div class="container">
<div class="row"><!-- Footer Navigation -->
<div class="col-sm-6 col-md-4" id="footer_nav">
<ul class="footer-nav clearfix">
<li><a href="http://50.87.154.1/~imarf/contact.html">Contact</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
</ul>
<div id="footer_copy">
<p>© iMAR Entertainment Inc. 2007-2014</p>
</div>
</div>
<!-- End Footer Navigation --><
<div class="col-md-4">
<div class="col-sm-12" id="newsletter_form">
<div class="clearfix">
<form action="newsletter.php" class="subscribe-form pull-right" id="subscribe-form" method="post"><input class="subscribe-input" name="email" placeholder="Enter your e-mail address..." type="email" /><button class="subscribe-submit" type="submit">Subscribe</button></form>
</div>
<p class="pull-right" id="newsletter-paragraph">Join our newsletter subscription, be always informed</p>
</div>
</div>
<!-- End Newsletter Form --></div>
<!-- End row --></div>
<!-- End container --></footer>
<!-- END FOOTER --></div>
<!-- END CONTENT WRAPPER --><!-- EXTERNAL SCRIPTS
============================================= --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script src="js/bootstrap.min.js" type="text/javascript"></script><script src="js/retina.js" type="text/javascript"></script><script src="js/modernizr.custom.js" type="text/javascript"></script><script src="js/jquery.easing.js" type="text/javascript"></script><script src="js/jquery.parallax-1.1.3.js" type="text/javascript"></script><script src="js/jquery.validate.min.js" type="text/javascript"></script><script defer src="js/jquery.flexslider.js" type="text/javascript"></script><script src="js/jquery.accordion.source.js" type="text/javascript"></script><script src="js/owl.carousel.js" type="text/javascript"></script><script src="js/waypoints.min.js" type="text/javascript"></script><script src="js/animations.js" type="text/javascript"></script><script src="js/custom.js" type="text/javascript"></script><!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]--><!-- Google Analytics: Change UA-XXXXX-X to be your site's ID. Go to http://www.google.com/analytics/ for more information. --><!--
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
--></body>
</html>
1 answers
solution1
2 ACCPTED 2014-06-12 23:37:49
You are probably loading a jQuery extension before you are loading jQuery.
Change the order of your script tags to
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.html5ModalContact.js"></script>
Then the Can't find variable jQuery & TypeError: undefined is not a function (evaluating '$().html5ModalContact') error should be gone.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
wordpress contact form 7 and custom jQuery conflicting
Contact form 7 validation error in popup
Angular JS contact form
Javascript Jquery Popup Contact Form - Auto Loading
Submit popup contact form without redirecting
how to show contact form 7 messages in popup?
How to show a contact form on popup in html
Simple contact form success popup on same page
Foundation contact form js not working
PHP/JS Contact Form - Validation
Related Tags