使用选择元素的Ajax联系人表单错误

ajax contact form error with select element

本文关键字：联系人 表单 错误 Ajax 选择 元素      更新时间：2023-09-26

我有ajax联系人从输入字段和选择元素，它没有给出结果，因为它应该。

HTML表单代码(name作为输入，iphone作为选择元素)

 <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 (send.php)代码 
<?PHP
$name = $_POST['name'];
$iphone = $_POST['iphone'];
$email="my@mail.com";
$from="anyone@mail.com";
$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);
?>

的结果当我使用任何名字

的from
Name : anyone - Iphone : [object HTMLSelectElement]

[object HTMLSelectElement] 这是错误似乎select元素不工作，没有传递其值selected

有什么想法吗?~谢谢

我已经修改了你的代码一点点，我所做的是附加一个提交处理程序的形式，防止默认的行动，这是重要的部分。我序列化你表单的内容。试试这个，然后告诉我这是怎么回事。我通常这样提交我的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()
                }
            });
        });
    });

确保你得到的iPhone值是这样的:

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

$.post对于你正在做的事情会更优雅…

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