The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> display success message after form submit form
jackg
post Aug 14 2017, 01:39 PM
Post #1





Group: Members
Posts: 1
Joined: 14-August 17
Member No.: 26,478



I have a contact form and once I submit the success message doesn't display. I am fairly new to HTML I might have a small problem


Site: http://test.workerscompvirginia.com/retailquote.html


here is the code:


<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="SemiColonWeb" />

<!-- Stylesheets
============================================= -->
<link href="http://fonts.googleapis.com/css? family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:40
0italic" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="css/dark.css" type="text/css" />
<link rel="stylesheet" href="css/font-icons.css" type="text/css" />
<link rel="stylesheet" href="css/animate.css" type="text/css" />
<link rel="stylesheet" href="css/magnific-popup.css" type="text/css" />

<link rel="stylesheet" href="css/responsive.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

<!-- External JavaScripts
============================================= -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>

<!-- Document Title
============================================= -->
<title>Get A Quote</title>
<link rel="icon" type="image/jpg" href="images/Pagetitleicon.jpg">

<!-- Google Analytics
============================================= -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-50148816-2', 'auto');
ga('send', 'pageview');

</script>


</head>

<body class="stretched">

<!-- Document Wrapper
============================================= -->
<div id="wrapper" class="clearfix">

<header id="header" class="full-header">

<div id="header-wrap">

<div class="container clearfix">

<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>

<!-- Logo
============================================= -->
<div id="logo">
<a href="index.html" class="standard-logo" data-dark-logo="images/logo-dark.png"><img src="images/blilogo.png" alt="BLI Logo"></a>

</div><!-- #logo end -->

<!-- Primary Navigation
============================================= -->
<nav id="primary-menu">

<ul>
<li><a href="index.html"><div>HOME</div></a></li>

<li><a href="#"><div>866-789-5396</div></a></li>

</ul>

<!-- Top Search
============================================= -->

</nav><!-- #primary-menu end -->

</div>

</div>

</header><!-- #header end -->

<!-- Page Title
============================================= -->
<section id="page-title">

<a class="button button-full center right topmargin footer-stick">
<div class="container clearfix"></div>
Workers’ Compensation Insurance Quote – Retail</a>
<div class="clearfix"></div>

</section>



<!-- Content
============================================= -->

<div class="container clearfix">

<div class="content-wrap">

<div class="container clearfix">

<div class="heading-block center">


<div id="contact-form-result" data-notify-type="success" data-notify-msg="<i class=icon-ok-sign></i> Message Sent Successfully!"></div>

<form class="nobottommargin" id="template-contactform" name="template-contactform" action="include/retail.php" method="post">

<div class="form-process"></div>

<div class="col_one_third">
<label for="template-contactform-company">Company Name <small>*</small></label>
<input type="text" id="template-contactform-company" name="template-contactform-company" value="" class="sm-form-control required" />
</div>

<div class="col_one_third">
<label for="template-contactform-name">Contact Name <small>*</small></label>
<input type="text" id="template-contactform-name" name="template-contactform-name" value="" class="required sm-form-control" />
</div>

<div class="col_one_third col_last">
<label for="template-contactform-email">Email <small>*</small></label>
<input type="email" id="template-contactform-email" name="template-contactform-email" value="" class="required email sm-form-control" />
</div>

<div class="clear"></div>

<div class="col_one_third">
<label for="template-contactform-address">Address <small>*</small></label>
<input type="text" id="template-contactform-address" name="template-contactform-address" value="" class="required sm-form-control" />
</div>

<div class="col_one_third">
<label for="template-contactform-city">City/State/Zip <small>*</small></label>
<input type="text" id="template-contactform-city" name="template-contactform-city" value="" class="required sm-form-control" />
</div>


<div class="col_one_third col_last">
<label for="template-contactform-phone">Phone Number <small>*</small></label>
<input type="text" id="template-contactform-phone" name="template-contactform-phone" class="sm-form-control">
</div>

<div class="clear"></div>

<div class="col_one_third">
<label for="template-contactform-federal">Federal ID Number <small>*</small></label>
<input type="text" id="template-contactform-federal" name="template-contactform-federal" value="" class="required sm-form-control" />
</div>

<div class="col_one_third">
<label for="template-contactform-employees">Number of Employees <small>*</small></label>
<input type="text" id="template-contactform-employees" name="template-contactform-employees" value="" class="required sm-form-control" />
</div>

<div class="col_one_third col_last">
<label for="template-contactform-payroll">Estimated Annual Payroll <small>*</small></label>
<input type="text" id="template-contactform-payroll" name="template-contactform-payroll" class="sm-form-control">
</div>

<div class="clear"></div>

<div class="col_one_third">
<label for="template-contactform-coverage">Do you have coverage? <small>*</small></label>
<select id="template-contactform-coverage" name="template-contactform-coverage" class="sm-form-control required">
<option value="--"></option>
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</div>

<div class="col_one_third">
<label for="template-contactform-expiration">If "Yes" Expiration Date?</label>
<input type="text" id="template-contactform-expiration" name="template-contactform-expiration" class="sm-form-control" />
</div>

<div class="col_one_third col_last">
<label for="template-contactform-needpolicy">When do you need the policy?</label>
<input type="text" id="template-contactform-needpolicy" name="template-contactform-needpolicy" class="sm-form-control">
</div>

<div class="clear"></div>

<div class="col_full">
<label for="template-contactform-late">How late are you open?</label>
<input type="text" id="template-contactform-late" name="template-contactform-late" class="sm-form-control" />
</div>

<div class="clear"></div>

<div class="col_full">
<label for="template-contactform-sell">What products does your store sell? Be as specific as possible</label>
<textarea class="required sm-form-control" id="template-contactform-sell" name="template-contactform-sell" rows="4" cols="30"></textarea>
</div>

<div class="clear"></div>

<div class="col_full">
<label for="template-contactform-message">Anything else we should know?</label>
<textarea class="required sm-form-control" id="template-contactform-message" name="template-contactform-message" rows="4" cols="30"></textarea>
</div>

<div class="col_full hidden">
<input type="text" id="template-contactform-botcheck" name="template-contactform-botcheck" value="" class="sm-form-control" />
</div>

<div class="col_full">
<button class="button button-3d nomargin" type="submit" id="template-contactform-submit" name="template-contactform-submit" value="submit">Get a Quote</button>
</div>

</form>

<script type="text/javascript">

$("#template-contactform").validate({
submitHandler: function(form) {
$('.form-process').fadeIn();
$(form).ajaxSubmit({
target: '#contact-form-result',
success: function() {
$('.form-process').fadeOut();
$(form).find('.sm-form-control').val('');
$('#contact-form-result').attr('data-notify-msg', $('#contact-form-result').html()).html('');
SEMICOLON.widget.notifications($('#contact-form-result'));
}
});
}
});

</script>

</div><!-- .postcontent end -->
<script type="text/javascript">

jQuery(document).ready(function($) {

var ocPortfolio = $("#oc-portfolio");

ocPortfolio.owlCarousel({
margin: 1,
autoplay: true,
autoplayHoverPause: true,
dots: false,
nav: true,
navText : ['<i class="icon-angle-left"></i>','<i class="icon-angle-right"></i>'],
responsive:{
0:{ items:1 },
600:{ items:2 },
1000:{ items:3 },
1200:{ items:4 }
}
});

});

</script>

</div>


<script type="text/javascript">

jQuery(document).ready(function($) {

var ocClients = $("#oc-clients");

ocClients.owlCarousel({
margin: 30,
loop: true,
nav: false,
autoplay: true,
dots: false,
autoplayHoverPause: true,
responsive:{
0:{ items:2 },
480:{ items:3 },
768:{ items:4 },
992:{ items:5 },
1200:{ items:6 }
}
});

});

</script>

</div>

</div>

<!-- #content end -->


<!-- Footer
============================================= -->
<footer id="footer" class="dark">
<div class="container">


<!-- Copyrights
============================================= -->
<div id="copyrights">

<div class="container clearfix">

<div class="col_half">
Copyrights &copy; 2015 BLI Inc. All Rights Reserved.<br>
<div class="copyright-links"><a href="#">Terms of Use</a> / <a href="#">Privacy Policy</a></div>
</div>

<div class="col_half col_last tright">
<div class="fright clearfix">
<a href="https://www.facebook.com/blipayroll?fref=ts" class="social-icon si-small si-borderless si-facebook">
<i class="icon-facebook"></i>
<i class="icon-facebook"></i>
</a>

<a href="twitter.com/bli_inc" class="social-icon si-small si-borderless si-twitter">
<i class="icon-twitter"></i>
<i class="icon-twitter"></i>
</a>

<a href="#" class="social-icon si-small si-borderless si-linkedin">
<i class="icon-linkedin"></i>
<i class="icon-linkedin"></i>
</a>
</div>

<div class="clear"></div>

</div>

</div>

</div><!-- #copyrights end -->

</footer><!-- #footer end -->

<!-- #wrapper end -->
<!-- #wrapper end -->

<!-- Go To Top
============================================= -->
<div id="gotoTop" class="icon-angle-up"></div>

<!-- Footer Scripts
============================================= -->
<script type="text/javascript" src="js/functions.js"></script>

</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 14 2017, 02:18 PM
Post #2


.
********

Group: WDG Moderators
Posts: 7,627
Joined: 10-August 06
Member No.: 7



Am I correct that the form submits using Ajax, and that the confirmation message is meant to be displayed on the actual form page? If so it's likely an issue with the jQuery/Javascript, not the HTML.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 14 2017, 06:00 PM
Post #3


.
********

Group: WDG Moderators
Posts: 7,627
Joined: 10-August 06
Member No.: 7



I should add that in an ordinary form (where Ajax is not used), the confirmation message should be created by the form handling in retail.php. Does the URL change from

CODE
http://test.workerscompvirginia.com/retailquote.html

to

CODE
http://test.workerscompvirginia.com/include/retail.php

when you submit the form? If yes, Ajax is probably not used.

If you could post the script in retail.php as well maybe it becomes clear...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 20th September 2017 - 06:49 PM