Question

我与输入字段和选择元素进行了ajax联系，但它没有给出应该的结果。

HTML表单代码（名称作为输入，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 with any name

时，

结果

Name : anyone - Iphone : [object HTMLSelectElement]

[object HTMLSelectElement] 这是错误 似乎选择元素不起作用而没有传递其值选择

所以任何想法？〜谢谢

Answer 1

我稍微修改了你的代码，我所做的是在你的表单上附加一个提交处理程序，阻止默认操作，这是重要的部分。我序列化了表单的内容。试试这个并告诉我这是如何工作的。我通常会提交像这样的ajaxified表格。虽然我不确定这是不是一个好习惯，但你应该尝试一下。

   $(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()
                }
            });
        });
    });

Answer 2

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

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

对于你正在做的事情，

$.post会更优雅......

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

与select元素的ajax联系表单错误

2 个答案: