Question

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

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

我有一些问题如下： -

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

由于

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

});

如果你想让div居中。你需要一些像下面这样的CSS。

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

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

1 个答案: