选择元素的ajax联系人表单错误

Question

我已经从输入字段和选择元素的ajax联系，它没有给出应有的结果。

HTML 表单代码（名称作为输入，苹果手机作为选择元素）

 <div id="contact_form">
    <form name="contact" method="post" action="">Name
        <input type="text" name="name" id="name" />Iphone
        <select name="iphone" id="iphone">
            <option value="Iphone 4" selected>Iphone 4</option>
            <option value="Iphone 4S">Iphone 4S</option>
            <option value="5">Iphone 5</option>
        </select>
        <input type="submit" name="submit" class="button" id="submit_btn" value="Send"
        />
    </form>
</div>

JS代码

   $(function () {
       $('.error').hide();
       var dataString = 'name=' + name + '&iphone=' + iphone;
       $.ajax({
           type: "POST",
           url: "send.php",
           data: dataString,
           success: function () {
               $('#contact_form').html("<div id='message'></div>");
               $('#message').html("<h2>Contact Form Submitted!</h2>")
                   .append("<p>We will be in touch soon.</p>")
                   .hide()
           }
       });
       return false;
   });

发送.php）代码

<?PHP
$name = $_POST['name'];
$iphone = $_POST['iphone'];

$email="[e-mail]";
$from="[e-mail]";

$subject="Contact Email";
$headers = "Content-type: text/html; charset=windows-1256\r\n";
$headers .= "From: $from\r\n";

$mailtext="name : $name - Iphone : $iphone";

mail($email,$subject,$mailtext,$headers);
?>

当我使用来自任何人的姓名时的结果

Name : anyone - Iphone : [object HTMLSelectElement]

[object HTMLSelectElement]这是一个错误，select元素似乎不工作，没有传递其选定的值

所以任何想法？~谢谢

Answer 1

确保你得到的iPhone价值如下：

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

$. post会更优雅…

$.post("send.php", { name: name, iphone: iphone },
   function(data) {
     alert("Data Loaded: " + data);
   });

Answer 2

我对你的代码做了一点修改，我做的是在你的表单上附加一个提交处理程序，阻止默认操作，这是最重要的部分。我序列化表单的内容。试试这个，告诉我这是怎么回事。我通常像这样提交我的Ajax化表单。虽然我不确定这是不是一个好的练习，但是你应该试试。

   $(function () {

        $('.error').hide();
        $('form[name=contact]').submit(function(e){
            e.preventDefault();
            var form_data = $(this).serialize();        
            $.ajax({
                type: "POST",
                url: "send.php",
                data: form_data,
                success: function () {
                    $('#contact_form').html("<div id='message'></div>");
                    $('#message').html("<h2>Contact Form Submitted!</h2>")
                        .append("<p>We will be in touch soon.</p>")
                        .hide()
                }
            });
        });
    });