Как получить запрос-селектор рассчитанных данных из HTML и отправить их в php? - PullRequest
Новая
       13

Как получить запрос-селектор рассчитанных данных из HTML и отправить их в php?

0 голосов
/ 11 января 2019

Я взглянул на этот калькулятор цен на вакансии, который нашел на Codepen , и заставил его работать точно так, как показано на ручке, но я хотел сделать еще один шаг вперед. Я хотел связать это с phpmailer, но проблема, с которой я столкнулся, заключается в том, что скрипт селектора запросов не вычисляется, и я не уверен, почему. Пожалуйста, дайте мне знать, если вы можете мне помочь.

Пожалуйста, извините за беспорядок, когда я работаю над веб-потоком, но я размещаю свой сайт на Siteground. На данный момент HTML-форма выглядит следующим образом: 

<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 &amp; Development">Design &amp; 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>

Вот только файл php. * Из соображений безопасности я "отключил" электронные письма и пароли. 

<?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);
  }

?>

Вот моя версия сценария выбора запроса: 

           <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>
        ";
...