Skip to main content
This topic has been closed for replies.
Correct answer Nancy OShea

This is the code I received for the website calculator:

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="../css/examplespcstyle.css" type="text/css" />
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/jquery.number.min.js"></script>
<script src="../js/simplepricecalc.min.js"></script>
<script>
$(document).ready( function ($) {
$("#quoteform").SimplePriceCalc();
$("#quoteform #submit").click( function (e) {
e.preventDefault();
alert("Form submission has been disabled for demo purposes");
});
});
</script>
</head>
<body>
<div id="main">
<div class="spc-container">
<header>
<img src="spcthumb2.png" />
<ul id="nav">
<li><a href="compproduct.html">Detailed Product Form</a></li>
<li><a href="webestimate.html"> Web Estimate Form</a> </li>
<li><a href="pizzaform.html">Pizza Form</a></li>
<li><a href="pizzamultiform.html">Multi-select Pizza Form</a></li>
</ul>
</header>
<h1 style="color:#17526e; text-transform:uppercase; margin:40px 0;"> Website Estimate Form</h1>
<form id="quoteform" class="fixed-total">
<h2> Product Type </h2>
<select>
<option data-price="0"> Choose a type of website </option>
<option data-price="800" data-label="Basic Website"> Basic Website </option>
<option data-price="1500" data-label="E-Commerce Website"> E-Commerce Website </option>
<option data-price="2000" data-label="Custom Website"> Custom Website </option>
</select>
<br />
<h2> Optional Features </h2>
<h4> Features </h4>
<input type="checkbox" name="feat1" value="100" data-label="Mobile Friendly" >Mobile Friendly
<input type="checkbox" name="feat2" value="200" data-label="SEO Optimized" >SEO Optimized
<input type="checkbox" name="feat3" value="50" data-label="Google Analytics" >Google Analytics
<br />
<h4> WordPress/CMS Based Site? </h4>
<input type="radio" name="css" value="0" data-label="No CMS"> No CMS
<input type="radio" name="css" value="400" data-label="WordPress/CMS Based Site">WordPress/CMS Based Site  <br />
<h4> Other Comments </h4>
<textarea rows="5" cols="40"></textarea>
<br />
<h4> E-mail:</h4>
<input type="email" /> <br />
<button id="submit"> Submit </button>
</form>
</div>
</div>
</body>
</html>

Because you purchased a calculator script and not a form processing script, the form does nothing.

This code is sending up the alert message when submit button is clicked.

<script>

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

    $("#quoteform").SimplePriceCalc();

   

    $("#quoteform #submit").click( function (e) {

    e.preventDefault();

    alert("Form submission has been disabled for demo purposes");

    });

    });

    </script>

Contact Form & PHP Script (3 part tutorial)

Alt-Web Design & Publishing: Responsive Contact Form with Bootstrap 3.2 and PHP (Part 1)

1 reply

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
July 28, 2017

There are a number of jQuery plugins to help you with that, just Google the subject.

A simple and cheap commercial product is here https://codecanyon.net/item/simple-price-calculator/8242357

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
carolyn@10541
carolyn@10541Author
Known Participant
July 29, 2017

I used the product you recommended and it worked well, except that when I try the calculator, I receive the following message.

"Form submission has been disabled for demo purposes"

I am still learning JQuery and sent an email to the company that produces the product you mentioned. I was hoping that you might see something in the code to speed things up.

If anyone has recommendations, I would appreciate them. The code is below.

<div id="main">

<div class="spc-container">

<a href="IMAGES/logoform3.gif"><img src="IMAGES/logoform3.gif" /></a><br />

<h1><p class="text-primary"><strong>Website Estimate Form</strong></p></h1><br />

<h3><p align="center"><a href="CJDesign&ConsultingWebDesignProposal.pdf"><img class="acrobat_file.pdf" src="CJDesign&ConsultingWebDesignProposal.pdf" alt= "CJ Design & Consulting Web Design Proposal.pdf"></a></p></h3><br />

<form id="quoteform" class="fixed-total">

<h2><p class="text-primary"><strong>Product Type</strong></p></h2>

<select>

<option data-price="0"> Choose a type of website </option>

<option data-price="800" data-label="Basic Website"> Basic Website </option>

<option data-price="1500" data-label="E-Commerce Website"> E-Commerce Website </option>

<option data-price="2000" data-label="Custom Website"> Custom Website </option>

</select>

<br />

<h2><p class="text-primary"><strong>Optional Features</strong></p></h2>

<h3><p class="text-primary"><strong><em>Features</em></strong></p></h3>

<input type="checkbox" name="feat1" value="100" data-label="Mobile Friendly"> Mobile Friendly

<input type="checkbox" name="feat2" value="200" data-label="SEO Optimized"> SEO Optimized

<input type="checkbox" name="feat3" value="50" data-label="Google Analytics"> Google Analytics

<br />

<h3><p class="text-primary"><strong><em>WordPress/CMS Based Site?</em></strong></p></h3>

<input type="radio" name="css" value="0" data-label="No CMS"> No CMS

<input type="radio" name="css" value="400" data-label="WordPress/CMS Based Site"> WordPress/CMS Based Site  <br /><br /><br />

<h3><p class="text-primary"><strong>Other Comments</strong></p></h3>

<textarea rows="5" cols="40"></textarea>

<br />

<h4> E-mail:</h4>

<input type="email" /> <br />

<button id="submit"> Submit </button>

</form>

</div>

</div>

</body>

</html>

</div>

</div>

<div class="container">

  <nav class="navbar navbar-default navbar-fixed-top">

    <div class="container-fluid">

      <!-- Brand and toggle get grouped for better mobile display -->

      <div class="navbar-header">

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>

        <a class="navbar-brand" href="#">CJ Design & Consulting</a></div>

      <!-- Collect the nav links, forms, and other content for toggling -->

      <div class="collapse navbar-collapse" id="topFixedNavbar1">

        <ul class="nav navbar-nav">

<li class="active"><a href="home.html">Home</a></li>

<li><a href="about.html">About</a></li>

<li><a href="testimonials.html">Testimonials</a></li>

     <li> <a class="dropdown-toggle" data-toggle="dropdown" href="service.html">Services <span class="caret"></span></a>

          <ul class="dropdown-menu">

          <li><a href="webdesign.html"><strong>Responsive Web Design</strong></a></li>

          <li><a href="whatareresponsivewebsites.html">What Are Responsive Websites

          <li><a href="whyresponsivedesign.html">Why Responsive Design

              <li class="divider"></li>

<li><a href="graphicdesign.html"><strong>Graphic Design</strong>

<li><a href="corporateidentity.html">Corporate Identity

<li><a href="newsletters.html">Newsletters

<li><a href="photoretouching.html">Photo Retouching

<li><a href="digitalphotography.html">Digital Photography

              <li class="divider"></li>

<li><a href="emailmarketing.html"><strong>Email Marketing</strong>

<li><a href="constant contactsolutionsprovider.html">Constant Contact Solutions Partner</a></li>

<li><a href="constant contactpricing.html">Constant Contact Pricing

<li><a href="cjdesignandconsultingemailmarketingpackagesandpricing.html">CJ Design & Consulting Email Marketing Services & Pricing

     <li class="divider"></li>

<li><a href="socialmedia.html"><strong>Social Media</strong></a></li>

</a></li></li></a></li></a></li></a></li></a></li></a></li></a></li></a></li></a></li></ul>

<li><a href="contact.html">Contact</a></li></li></ul>

<!-- ADD SEARCH FORM HERE -->

<form class="navbar-form navbar-right" role="search">

<div class="input-group">

<input type="text" class="form-control" placeholder="Search">

<span class="input-group-btn">

<button type="submit" class="btn btn-default">

<span class="glyphicon glyphicon-search"></span>

</button>

</span>

</div>

</form></div>

</div>


Thank you.

carolyn@10541
carolyn@10541Author
Known Participant
July 30, 2017

www.cjdesignandconsulting.com/webpricingcalculator seems to be offline, hence cannot see it.


Sorry it's http://www.cjdesignandconsulting.com/webpricingcalculator.html

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices