I took a look at this job pricing calculator I found on Codepen and I made it work exactly how it's shown on the pen but I wanted to take it one step further. I wanted to tie this in with phpmailer but the issue I am having is that the query selector script is not calculating and I'm not sure as to why. Please let me know if you can help me.
Please excuse the messyness as I design on webflow but I host my site with Siteground. At the moment the HTML form looks like this below:
<div class="contact-form-block prcing-pg w-form">
<div class="pricing-price-title estimate-header">Instant estimate in<br>real time!</div>
<div class="color-pricing-title quote-title">Fill out the form below to receive your quote</div>
<form id="wf-form-quote-form" name="wf-form-quote-form" data-name="quote form" method="post" action="https://xd-new.xternaldesigns.ca/quote-mailer.php"><label for="job-3" class="field-label-2">type of job:</label><select id="job-3" name="job" data-name="job" required="" class="job-dropdown darkfield w-select"><option value="">Select one...</option><option value="Design">Design</option><option value="Design & Development">Design & Development</option></select><label for="pages-3" class="field-label-2"># of pages:</label><select id="pages-3" name="pages" data-name="pages" required="" class="pages-dropdown darkfield w-select"><option value="">Select one...</option><option value="1">1</option><option value="2-5">2-5</option><option value="6-9">6-9</option><option value="10+">10+</option></select><label for="budget-3" class="field-label-2">Budget:</label><select id="budget-3" name="budget" data-name="budget" required="" class="budget-dropdown darkfield w-select"><option value="">Select one...</option><option value="$500-$1000">$500-$1000</option><option value="$1000-$2500">$1000-$2500</option><option value="$2500-$5000">$2500-$5000</option><option value="$5000+">$5000+</option></select><label for="eta-2" class="field-label-2">time frame:</label><select id="eta-2" name="eta" data-name="eta" required="" class="timeframe-dropdown darkfield w-select"><option value="">Select one...</option><option value="1 Week">1 Week</option><option value="2-5 Weeks">2-5 Weeks</option><option value="6-9 Weeks">6-9 Weeks</option><option value="10+ Weeks">10+ Weeks</option></select><label for="name-2" class="field-label-2">contact information:</label><input type="text" class="dark-field w-input" maxlength="256" name="name" data-name="name" placeholder="Name" id="name-2" required=""><input type="email" class="email-field dark-field w-input" maxlength="256" name="email" data-name="email" placeholder="Email" id="email-3" required="">
<div class="w-embed"><input type="hidden" name="return" value="quote-form-success.html"></div><input name="submit" type="submit" value="Submit" data-wait="Please wait..." id="submit" class="btn btn-red w-button"></form>
Here is just the php file *For security reasons I've "blanked" out emails and passwords.
<?php
if(!isset($_POST['submit']))
{
//This page should not be accessed directly. Need to submit the form.
echo "error; you need to submit the form!";
exit;
}
//print_r($_POST);
//exit;
$name = $_POST['name'];
$email = $_POST['email'];
$return = $_POST['return'];
//$message = $_POST['message'];
$message = '';
foreach ($_POST as $key => $value) {
switch ($key) {
case "price":
$price .= '<strong>Price:</strong> '.$value.'<br />';
break;
case "job":
$message .= '<strong>Type of job:</strong> '.$value.'<br />';
break;
case "pages":
$message .= '<strong># of pages:</strong> '.$value.'<br />';
break;
case "budget":
$message .= '<strong>Budget:</strong> '.$value.'<br />';
break;
case "eta":
$message .= '<strong>Time frame:</strong> '.$value.'<br />';
break;
default:
break;
}
}
//$recaptcha = $_POST['g-recaptcha-response']
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
require __DIR__.'/include/phpmailer/src/PHPMailer.php';
require __DIR__.'/include/phpmailer/src/Exception.php';
require __DIR__.'/include/phpmailer/src/SMTP.php';
$mail = new PHPMailer(true);
try {
//$mail->SMTPDebug = 2; // Enable verbose debug output
$mail->isSMTP(); // Set mailer to use SMTP
$mail->Host = 'blank'; // Specify main and backup SMTP servers
$mail->SMTPAuth = true; // Enable SMTP authentication
$mail->Username = 'blank'; // SMTP username
$mail->Password = 'blank'; // SMTP password
$mail->SMTPSecure = 'ssl'; // Enable TLS encryption, `ssl` also accepted
$mail->Port = 465;
//Recipients
$mail->setFrom('blank', 'Quote form - Xternal Designs');
$mail->addAddress('blank', 'Me'); // Add a recipient
$mail->addReplyTo($email, $name);
//$mail->addCC('cc@example.com');
//$mail->addBCC('bcc@example.com');
//Content
$mail->isHTML(true); // Set email format to HTML
$mail->Subject = 'New quote submission';
ob_start();
switch ($return) {
case "newsletter-form-success.html":
include __DIR__.'/quote-template.php';
break;
default:
include __DIR__.'/quote-template.php';
}
$mail->Body = ob_get_contents();
ob_end_clean();
//$mail->AltBody = '';
if ($mail->send()) {
//done. redirect to thank-you page.
header('Location: ' . $return);
}
} catch (Exception $e) {
echo 'Message could not be sent. Mailer Error: ', $mail->ErrorInfo;
}
$mail->clearAddresses();
echo "Message has been sent";
$mail = new PHPMailer();
$mail->setFrom('blank', 'Xternal Designs');
// below we want to set the email address we will be sending our email to.
$mail->AddAddress($email);
$mail->addReplyTo('blank', 'Xternal Designs');
// set word wrap to 50 characters
$mail->WordWrap = 50;
// set email format to HTML
$mail->IsHTML(true);
$mail->Subject = "Your website estimate";
//$message = "Thanks for joining...";
$mail->Body = ob_start();
switch ($return) {
case "quote-form-success.html":
include __DIR__.'/customer-quote-template.php';
break;
default:
include __DIR__.'/customer-quote-template.php';
}
$mail->Body = ob_get_contents();
ob_end_clean();
if ($mail->send()) {
//done. redirect to thank-you page.
header('Location: ' . $return);
}
?>
Here is my version of the query-selector script:
<script>
const jobDropdown = document.querySelector(".job-dropdown");
const pagesDropdown = document.querySelector(".pages-dropdown");
const budgetDropdown = document.querySelector(".budget-dropdown");
const timeframeDropdown = document.querySelector(".timeframe-dropdown");
const price = document.querySelector(".price");
const pages = document.querySelector(".pages");
const work = document.querySelector(".work");
const budget = document.querySelector(".budget");
const eta = document.querySelector(".eta");
const submit = document.getElementById("submit");
submit.addEventListener('click', function(){
//Hourly Rate x Estimated time of 4 hours per page
if (pagesDropdown.options[pagesDropdown.selectedIndex].text == "1") {
answer = 30 * 6;
page = "1";
} else if (pagesDropdown.options[pagesDropdown.selectedIndex].text == "2-5") {
answer = 30 * 30;
page = "2-5";
} else if (pagesDropdown.options[pagesDropdown.selectedIndex].text == "6-9") {
answer = 30 * 54;
page = "6-9";
} else if (pagesDropdown.options[pagesDropdown.selectedIndex].text == "10+") {
answer = 30 * 60;
page = "10+";
} else {
answer = 30 * 70;
}
//Multiply depending on type of work
if (jobDropdown.options[jobDropdown.selectedIndex].text == "Design") {
answer = answer * 1;
item = "Design";
} else if (jobDropdown.options[jobDropdown.selectedIndex].text == "Design & Development") {
answer = answer * 2;
item = "Design & Development";
} else
answer = answer;
//Multiply price depending on timeframe
if (timeframeDropdown.options[timeframeDropdown.selectedIndex].text == "1 Week") {
answer = answer * 3;
time = "1 Week";
} else if (timeframeDropdown.options[timeframeDropdown.selectedIndex].text == "2-5 Weeks") {
answer = answer * 2;
time = "2-5 Weeks";
} else if (timeframeDropdown.options[timeframeDropdown.selectedIndex].text == "6-9 Weeks") {
answer = answer * 1.8;
time = "6-9 Weeks";
} else if (timeframeDropdown.options[timeframeDropdown.selectedIndex].text == "10+ Weeks") {
answer = answer * 1.5;
time = "10+ Weeks";
} else {
answer = answer;
}
//Budget
if (budgetDropdown.options[budgetDropdown.selectedIndex].text == "$500-$1000") {
number = "$500-$1000";
} else if (budgetDropdown.options[budgetDropdown.selectedIndex].text == "$1000-$2500") {
number = "$1000-$2500";
} else if (budgetDropdown.options[budgetDropdown.selectedIndex].text == "$2500-$5000") {
number = "$2500-$5000";
} else if (budgetDropdown.options[budgetDropdown.selectedIndex].text == "$5000+") {
number = "$5000+";
}
//If budget is lower than price, take $50 off
if (budgetDropdown.options[budgetDropdown.selectedIndex].value < answer) {
answer = answer - 50;
}
price.innerHTML = "$" + answer;
pages.innerHTML = page;
work.innerHTML = item;
eta.innerHTML = time;
budget.innerHTML = number;
});
</script>
";
