将jQuery生成的值传递给PHP Mail

Question

This seems simple, but I can't find a solution. I created an HTML form that uses a little bit of jQuery to generate a value (total price) based on user selections in dropdown menus. I'm trying to get that generated value to show up in the email that is being sent via PHP Mail. All other values from my form are showing up, but I can't seem to get that value at all. I'm using the POST method.

Here's the HTML (this is just a small portion showing the part I need. This displays the value to the screen, based on what the user chooses in the drop down menu):

<form name="quote" id="price-quote" action="mail.php" method="post">    
  <label class="control-label" for="carpet_cleaning">Bedrooms</label><br>
    <select class="form-control-1" id="carpet_cleaning" name ="bedrooms_selection">
         <option value="0">0</option>
         <option value="1">1</option>
         <option value="2">2</option>
    </select>

<!--displays the total price to the screen-->
 <div class="total-price">
    <h2>Total Price: <span id="output1" name="total_price"></h2>
 </div>
</form>

jQuery

<script>
$("#carpet_cleaning").change(function (){
  var bedrooms = $("#carpet_cleaning").val();
  var total = (bedrooms * 10);
  var totalPrice = "$" + total;
  $("#output1").text(totalPrice).fadeIn();
});
</script>

Super simple JS Fiddle for a better visual https://jsfiddle.net/b7tyx7uk/

So here's the PHP code I have that will send the email

<?php 
if (!empty($_POST['bedrooms_selection'])){
  $services[]=' Bedrooms: '.$_POST['bedrooms_selection'];
}
$totalPrice = $_POST['total_price'];
 if($services){
 $email_subject = "Price Quote";
 $to = "[e-mail]";
 $email_body="Services Needed: 
" .implode("
",$services) . "

Total Price: $totalPrice";
 $headers = "From: [e-mail]";
 mail($to, $email_subject, $email_body, $headers);
 header("Location: http://example.com");
}
?>

It's working with all user inputs (not displayed in this post), but I can't display the total price that is generated from the jQuery. Am I overlooking something? I thought I could just give it a name and then use that name to create a new variable in the PHP, but it's not pulling that value at all. Thanks for any help!

Answer 1

Forms don't send the contents of DIVs to the server, only the values of inputs. Add a hidden input.

<form name="quote" id="price-quote" action="mail.php" method="post">    
  <label class="control-label" for="carpet_cleaning">Bedrooms</label><br>
    <select class="form-control-1" id="carpet_cleaning" name ="bedrooms_selection">
         <option value="0">0</option>
         <option value="1">1</option>
         <option value="2">2</option>
    </select>

<!--displays the total price to the screen-->
 <div class="total-price">
    <h2>Total Price: <span id="output1" name="total_price"></h2>
 </div>
 <input type="hidden" id="total_price">
</form>

<script>
$("#carpet_cleaning").change(function (){
  var bedrooms = $("#carpet_cleaning").val();
  var total = (bedrooms * 10);
  var totalPrice = "$" + total;
  $("#output1").text(totalPrice).fadeIn();
  $("#total_price").val(totalPrice);
});
</script>

That said, you probably should calculate the price on the server. Otherwise, the user could manipulate the price using the browser console.