jquery 将所选选项发送到电子邮件

Question

我已经让这个表格按照我需要的方式工作，除了在颜色部分，我在提交表格时收到的电子邮件中没有显示任何选择的选项。它只是空白。任何帮助都会很棒...... 我在 js 行上尝试了许多不同的变体： var color = $("#color option:selected").text();从这里阅读其他问题，我也尝试过：

$color = $_POST['color'][0]; 
$color = $_POST['color'][1];
$color = $_POST['color'][2]; 
$color = $_POST['color'][3];

$(document).ready(function() {
  $("#submit").click(function() {
    var name = $("#name").val();
    var email = $("#email").val();
    var color = $("#color option:selected").text();
    var favorite_color = $("#favorite_color").val();
    var friend_referral = ($('#friend_referral').is(':checked')) ? $('#friend_referral').val() : false;
    var search_engine = ($('#search_engine').is(':checked')) ? $('#search_engine').val() : false;
    var biz_card = ($('#biz_card').is(':checked')) ? $('#biz_card').val() : false;
    var website = ($('#website').is(':checked')) ? $('#website').val() : false;
    $("#returnmessage").empty(); // To empty previous error/success message.
    // Checking for blank fields.
    if (name === '' || email === '') {
      alert("Please Fill Required Fields");
    } else {
      // Returns successful data submission message when the entered information is stored in database.
      $.post("test_form.php", {
        name: name,
        email: email,
        color: color,
        favorite_color: favorite_color,
        friend_referral: friend_referral,
        search_engine: search_engine,
        biz_card: biz_card,
        website: website
      }, function(data) {
        $("#returnmessage").append(data); // Append returned message to message paragraph.
        if (data == "Your form has been received, We will contact you soon.") {
          $("#catalog_form")[0].reset(); // To reset form fields on success.
        }
      });
    }
  });
}); < /script>

<form id="catalog_form">
  <label for="name">Name: <span>*</span>
  </label>
  <br>
  <input type="text" id="name" />
  <br>
  <label for="email">Email: <span>*</span>
  </label>
  <br>
  <input type="email" id="email" />

  <fieldset>
    <legend>Color</legend>
    <select name="color">
      <option value="">Select One</option>
      <option value="red">Red</option>
      <option value="orange">Orange</option>
      <option value="green">Green</option>
    </select>
    <label>My favorite Color is:</label>
    <input type="text" id="favorite_color" />

  </fieldset>

  <fieldset>
    <legend>How Did You Find Our Website?</legend>
    <input type="checkbox" value="true" id="friend_referral" />
    <label for="friend_referral">Friend Referral</label>
    <br>
    <input type="checkbox" value="true" id="search_engine" />
    <label for="search_engine">Search Engine (like Google or Yahoo!)</label>
    <br>
    <input type="checkbox" value="true" id="biz_card" />
    <label for="biz_card">Business Card</label>
    <br>
    <input type="checkbox" value="true" id="website" />
    <label for="website">Web Site Link</label>

  </fieldset>


  <input type="button" id="submit" value="Send" />
  <br>
  <p id="returnmessage"></p>
</form>

<?php
// Fetching Values from URL.
$name = $_POST['name'];
$email = $_POST['email'];
$color = $_POST['color'];  
$favorite_color = $_POST['favorite_color'];
$friend_referral = $_POST['friend_referral'];
$search_engine = $_POST['search_engine'];
$biz_card = $_POST['biz_card'];
$website = $_POST['website'];

$email = filter_var($email, FILTER_SANITIZE_EMAIL); // Sanitizing E-mail.
// After sanitization Validation is performed
if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
$subject = $name;
// To send HTML mail, the Content-type header must be set.
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From:' . $email. "\r\n"; // Sender's Email
$headers .= 'Cc:' . $email. "\r\n"; // Carbon copy to Sender
$template = '<div style="padding:50px; color:white;">Hello ' . $name . ',<br/>'
. '<br/>Thank you for contacting us!<br/><br/>'
. 'Name:' . $name . '<br/>'
. 'Email:' . $email . '<br/>'
. 'Color:' . $color . '<br/>'
. 'favorite_color:' . $favorite_color . '<br/>'
. 'friend_referral:' . $friend_referral . '<br/>'
. 'search_engine:' . $search_engine . '<br/>'
. 'biz_card:' . $biz_card . '<br/>'
. 'website:' . $website . '<br/><br>'
. 'This is a Contact Confirmation mail.'
. '<br/>'
. 'We will contact you as soon as possible .</div>';
$sendmessage = "<div style=\"background-color:#333; color:white;\">" . $template . "</div>";
// Message lines should not exceed 70 characters (PHP rule), so wrap it.
$sendmessage = wordwrap($sendmessage, 70);
// Send mail by PHP Mail Function.
mail("justin@rabbiddesign.com", $subject, $sendmessage, $headers);
echo "Your form has been received, We will contact you soon.";
} else {
echo "<span>* invalid email *</span>";
}
?>

Answer 1

您正在使用select或：

var color = $("#color option:selected").text();

which selects by ID but the select does not have this id, solve the color problem by adding the ID "color":

<select name="color" id="color">

更新原答案：

我还注意到您正在使用 .text()，这意味着当您没有 select 颜色时，您将通过 Select one 而不是 ""。将最后的 selector 更改为：

var color = $("#color option:selected").val();

我相信也可以简单地调用：

var color = $("#color").val();

但我不喜欢这个选项，因为我喜欢区分文本输入 .val() 和 select .val() - 个人喜好，你可以做你喜欢的事

Answer 2

您必须通过您使用的 ID 引用 select 标签，即 #color id，因此您的代码可能会受到以下影响： select 标签的代码：

<fieldset>
    <legend>Color</legend>
    <select name="color" id="color">
      <option value="">Select One</option>
      <option value="red">Red</option>
      <option value="orange">Orange</option>
      <option value="green">Green</option>
    </select>
    <label>My favorite Color is:</label>
    <input type="text" id="favorite_color" />
  </fieldset>

因此，您可以通过 javascript 中的以下说明获取 selected 值：

var color = $("#color option:selected").val();
//Or
var color = $("#color").val();
//Or
var color = $('select[name="color"]').val(); // without reference id

jquery 将所选选项发送到电子邮件

jquery send selected option to email

javascript

php

html-select