将jQuery生成的值传递给PHP Mail

时间:2017-04-17 18:24:34

标签: javascript php jquery html email

这看似简单,但我找不到解决方案。我创建了一个HTML表单,它使用一点点jQuery根据下拉菜单中的用户选择生成一个值(总价)。我正在尝试将生成的值显示在通过PHP Mail发送的电子邮件中。我的表单中的所有其他值都显示出来,但我似乎根本无法获得该值。我正在使用POST方法。

这是HTML(这只是显示我需要的部分的一小部分。这会根据用户在下拉菜单中选择的内容显示屏幕的值):

<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>

超级简单的JS小提琴,以获得更好的视觉效果https://jsfiddle.net/b7tyx7uk/

所以这里是我发送电子邮件的PHP代码

<?php 
if (!empty($_POST['bedrooms_selection'])){
  $services[]=' Bedrooms: '.$_POST['bedrooms_selection'];
}
$totalPrice = $_POST['total_price'];
 if($services){
 $email_subject = "Price Quote";
 $to = "jondoe@example.com";
 $email_body="Services Needed: \n" .implode("\n",$services) . "\n\nTotal Price: $totalPrice";
 $headers = "From: janedoe@example.com";
 mail($to, $email_subject, $email_body, $headers);
 header("Location: http://example.com");
}
?>

它正在处理所有用户输入(此帖子中未显示),但我无法显示从jQuery生成的总价格。我忽略了什么吗?我以为我可以给它一个名字,然后使用该名称在PHP中创建一个新变量,但它根本没有提取该值。谢谢你的帮助!

1 个答案:

答案 0 :(得分:1)

表单不会将DIV的内容发送到服务器,只发送输入的值。添加隐藏的输入。

<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>

那就是说,您可能应该计算服务器上的价格。否则,用户可以使用浏览器控制台操纵价格。