提交表单（jquery）并在colorbox中显示结果 [英] Submit form (jquery) and show results in colorbox

问题描述

我有一个表单，我希望提交，它发布到一个PHP脚本来处理表单数据。

我需要做的是在点击提交后

可以这样做吗？

这是我的我一直在尝试：

$ $ $ $ $＃buildForm。click（function（）{// #buildForm is button ID
var data = $（'＃test-buildForm'）; //＃test-buildForm is form ID

$（＃buildForm）。colorbox（{
href ：build_action.php，
iframe：true，
innerWidth：640，
innerHeight：360，
data：data
}）;
return假;
}）;

更新：这需要在iframe中返回，因为
build_action.php为这些结果提供了特定的css和js。

解决方案

是简单的，未经测试的代码，但它会给你一个很好的起点，所以你可以详细说明你的请求：

 << ; form action =/ path / to / script.phpid =formIDmethod =post> 
<！ - 表单内容放在这里 - > 
< input type =submitname =dovalue =Submit/> 
< / form> 
 
< script type =text / javascript> 
 $（function（）{
 $（＃formID）。submit（function（）{
 $ .post（$（this）.attr（action），$（ this）.serialize（），function（data）{
 $ .colorbox（{html：data}）; 
}，
'html'）; 
 return false; 
}）; 
}）; 
< / script> 
  

I have a form that I wish to submit which is posting to a php script to deal with the form data.

What I need to do is after hitting submit have a colorbox popup with the php results in it.

Can this be done?

This is what i've been trying:

$("#buildForm").click(function () { // #buildForm is button ID
    var data = $('#test-buildForm'); // #test-buildForm is form ID

    $("#buildForm").colorbox({
        href:"build_action.php", 
        iframe:true, 
        innerWidth:640, 
        innerHeight:360,
        data: data
    });
    return false;
     });

UPDATE: This would need to be returned in an iframe as the build_action.php has specific included css and js for those results.

解决方案

This is simple, untested code but it'll give you a good jumping off point so you can elaborate however much you please:

<form action="/path/to/script.php" id="formID" method="post">
  <!-- form stuff goes here -->
  <input type="submit" name="do" value="Submit" />
</form> 

<script type="text/javascript">
$(function() { 
    $("#formID").submit(function() {
        $.post($(this).attr("action"), $(this).serialize(), function(data) {
            $.colorbox({html:data});
        },
        'html');
        return false;
    });
});
</script>

这篇关于提交表单（jquery）并在colorbox中显示结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！