如何使用h2标签的内容作为电子邮件的主题 - How to use contents of h2 tag as subject of email?

我希望我的主题根据按下的特定按钮而改变。每个按钮表示不同的顺序选择，并更改h2标记的值。我想这个h2标签的内容是我的电子邮件在PHP的主题。我该怎么做呢?

// JavaScript Document
// Validating Empty Field
//function check_empty() {
//if (document.getElementById('name').value == "" || document.getElementById('email').value == "") {
//alert("Please fill out all fields.");
//} else {
//	alert("Order Successful!");
//}
//}
//Function To Display Popup
function div_show1() {
  document.getElementById("ordertype").innerHTML = "$400 Website Order";
  document.getElementById('abc').style.display = "block";
}
function div_show2() {
  document.getElementById("ordertype").innerHTML = "$500 Website Order";
  document.getElementById('abc').style.display = "block";
}
function div_show3() {
    document.getElementById("ordertype").innerHTML = "$700 Website Order";
    document.getElementById('abc').style.display = "block";
  }
  //Function to Hide Popup
function div_hide() {
  document.getElementById('abc').style.display = "none";
}

@charset "utf-8";
/* CSS Document */
#abc {
  width: 100%;
  height: 100%;
  opacity: 0.97;
  top: 0;
  left: 0;
  display: none;
  position: fixed;
  background-color: #313131;
  overflow: auto;
  z-index: 9999999;
}
img#close {
  position: absolute;
  right: -14px;
  top: -14px;
  cursor: pointer;
}
div#popupContact {
  position: absolute;
  left: 50%;
  top: 17%;
  margin-left: -202px;
  font-family: coolfont;
}
form {
  max-width: 300px;
  min-width: 250px;
  padding: 20px 50px;
  border: 2px solid gray;
  border-radius: 10px;
  font-family: coolfont;
  background-color: #fff;
}
#moveupwards {
  margin-top: -20px;
}
p {
  margin-top: 30px;
}
h2 {
  background-color: #FEFFED;
  padding: 20px 35px;
  margin: -10px -50px;
  text-align: center;
  border-radius: 10px 10px 0 0;
  font-family: info;
}
hr {
  margin: 10px -50px;
  border: 0;
  border-top: 1px solid #ccc;
}
input[type=text] {
  width: 82%;
  padding: 10px;
  margin-top: 30px;
  border: 1px solid #ccc;
  padding-right: 40px;
  font-size: 16px;
  font-family: coolfont;
}
input[type=email] {
  width: 82%;
  padding: 10px;
  margin-top: 30px;
  border: 1px solid #ccc;
  padding-right: 40px;
  font-size: 16px;
  font-family: coolfont;
}
textarea {
  width: 82%;
  height: 95px;
  padding: 10px;
  resize: none;
  margin-top: 30px;
  border: 1px solid #ccc;
  padding-right: 40px;
  font-size: 16px;
  font-family: coolfont;
  margin-bottom: 30px;
}
#submit {
  text-decoration: none;
  width: 100%;
  text-align: center;
  display: block;
  background-color: #FFBC00;
  color: #fff;
  border: 1px solid #FFCB00;
  padding: 10px 0;
  font-size: 20px;
  cursor: pointer;
  border-radius: 5px;
}
@media only screen and (max-width: 457px) {
  form {
    max-width: 200px;
    min-width: 150px;
    padding: 10px 50px;
    margin-left: 50px;
  }
  input[type=text] {
    padding-right: 30px;
  }
  textarea {
    padding-right: 30px;
  }
}
@media only screen and (max-width: 365px) {
  form {
    max-width: 140px;
    min-width: 90px;
    padding: 10px 50px;
    margin-left: 80px;
  }
  input[type=text] {
    padding-right: 10px;
  }
  textarea {
    padding-right: 10px;
  }
}

<a class="button" id="popup" onclick="div_show1()">ORDER NOW</a>
<a class="button" id="popup" onclick="div_show2()">ORDER NOW</a>
<a class="button" id="popup" onclick="div_show3()">ORDER NOW</a>
<div id="abc">
  <!-- Popup Div Starts Here -->
  <div id="popupContact">
    <!-- Contact Us Form -->
    <form action="form.php" id="form" method="post" name="form" enctype="multipart/form-data">
      <img id="close" src="images/redcross.png" width="50" onclick="div_hide()">
      <h2 id="ordertype" name="ordertype" type="text">#</h2>
      <hr>
      <div id="moveupwards">
        <input id="name" name="name" required="required" placeholder="Name" type="text">
        <input id="email" name="email" required="required" placeholder="Email" type="email">
        <textarea id="message" name="message" placeholder="Comments/Questions"></textarea>
        <input id="submit" name="submit" class="submit" type="submit" value="Order">
      </div>
    </form>
  </div>
  <!-- Popup Div Ends Here -->
</div>

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: -';
$to = 'example@gmail.com';
$subject = $_GET['ordertype'];
$body = "From: ".$name.
"'r'n E-Mail: ".$email.
"'r'n Message: 'r'n".$message;
if ($_POST['submit']) {
  if (mail($to, $subject, $body, $from)) {
    echo '<script>
            alert("Order has been placed. We will be in touch with you shortly.");	location.href="#";
      </script>';
  } else {
    echo '<p>Something went wrong, go back and try again!</p>';
  }
}
?>

正如@chris85所提到的，在提交表单时不发布<h2>元素。
你可能想看看HTML表单指南@ MDN。

我建议用<h2>的内容填充一个隐藏的<input>。
如下所示:

function set_value() {
  var title = document.getElementById("ordertitle"),
      type = document.getElementById("ordertype");
  title.innerHTML = type.value = "$400 Website Order";
}
function show_hidden() {
  // for demonstration purposes
  var type = document.getElementById("ordertype");
  type.type="text";
}
document.getElementById("set_value").addEventListener('click',set_value);
document.getElementById("show_hidden").addEventListener('click',show_hidden);

<form action="form.php" method="post" enctype="application/x-www-form-urlencoded">
  <input type="hidden" name="ordertype" id="ordertype" />
  <h2 id="ordertitle"></h2>
  <button id="set_value" >Set Value</button>
  <button id="show_hidden">Show Hidden Input</button>
</form>

另外，由于您已经将表单设置为method="post"，因此您将希望从$_POST数组而不是$_GET中检索值:

$subject = $_POST['ordertype'];

参考，参见The Post Method