在弹出框中提交表单数据，并在弹出框中显示结果。

Question

我需要在弹出框中实现一个搜索表单，并在弹出框中显示搜索结果。

我实现了一个弹出框与我的搜索输入字段和提交按钮，但不知道如何检索数据弹出框后，提交表格。

我有以下几点疑问：

1. 如何在弹出框中检索数据，表单检索数据的操作将是什么。
2. 如何在弹出框中显示结果。

谢谢

Answer 1

我不知道这是不是你要找的。但它应该给你一个想法，然后使它适应你的需要。很抱歉没有更详细地解释这一切，我刚刚看到了这篇文章，所以我想在回去工作之前给你一个想法。

表格代码：

<form method="" action="">
<h2>Name</h2><br />
    <input name="name" type="text" size="55" class="required error name"><br />
    <h2>Email </h2><br  />
    </span><input name="email" type="text" size="55" class="required email"/><br />
    <h2>Phone</h2><br />
    <input name="phone" type="text" size="55" class="phone" /> <br />
    <h2>Comments</h2><br />
    <textarea name="comments" rows="15" cols="47" class="comments"></textarea><br />
    <br />
<input type="submit" value="Submit" class="submitBtn" />
</form>

Ajax代码：

$(document).ready(function(){
$('.submitBtn').click(function(e){
    e.preventDefault();
    var name = $('.name').val();
    var email = $('.email').val();
    var phone = $('.phone').val();
    var comments = $('.comments').val();

    var dataObject = {
        name: name,
        email: email,
        phone: phone,
        comments: comments
    }

    $.Ajax({
    url: php/sendmail.php,
    type: 'post',
    dataType: "json",
    contentType: "application/json",
    data: dataObject,
    success: function(data){
             var createdDiv = '<div class="DIVCENT"><p class="dataText">' + data + '</p></div>';
             $('body').append(createdDiv);
        };
    });
});

});

如果你想把电视调到中心。您需要如下所示的CSS。

.DIVCENT{
height: 100px;
width:40%;
margin:auto;
}