Php 提交表单（jquery）并在颜色框中显示结果

我有一个表单，我想提交它是张贴到php脚本处理表单数据

我需要做的是在点击submit之后，有一个带有php结果的colorbox弹出窗口

这能做到吗

这就是我一直在尝试的：

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

---

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

---

这是一个简单的、未经测试的代码，但它将为您提供一个很好的起点，以便您可以详细说明您想要的内容：

<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>

$（函数（）{
$（“#formID”）.submit（函数（）{
$.post（$（this.attr（“操作”），$（this.serialize（），函数（数据）{
$.colorbox（{html:data}）；
},
"html";；
返回false；
});
});

本文将帮助您解决此问题

$（文档）.ready（函数（）{
$（“#提交”）。单击（函数（）{
元("等待").show(500);；
$（'#demoForm'）。隐藏（0）；
$（“#消息”）.hide（0）；
$.ajax({
键入：“POST”，
url:'post.php'，
数据类型：“json”，
数据：{
电子邮件：$（'#email'）.val（）
},
成功：功能（数据）{
$（'等待'）.hide（500）；
$（'#message'）.removeClass（）.addClass（（data.error==true）？'error'：'success'）
.text（data.msg）.show（500）；
如果（data.error==true）
$（'demoForm'）。show（500）；
},
错误：函数（XMLHttpRequest、textStatus、errorshown）{
$（'等待'）.hide（500）；
$（'#message'）.removeClass（）.addClass（'error'））
.text（“出现错误”）。show（500）；
$（'demoForm'）。show（500）；
}
});
返回false；
});
});
<？php
睡眠（3）；
如果（空（$_POST['email']））{
$return['error']=true；
$return['msg']='您没有输入电子邮件'；
}
否则{
$return['error']=false；
$return['msg']=“您已经输入：”。$\u POST['email']；
}
echo json_编码（$return）；

您需要了解使用colorbox jQuery插件的确切方法。但这里有一个基本的（未经测试的）代码示例，我刚刚编写了这个示例，希望能帮助您顺利完成任务

如果希望使用jQuery提交表单，假设您有以下表单和div来保存对话框数据：

<form id="myForm">
<input type="text" name="num1" />
<input type="text" name="num2" />
<input type="submit" name="formSubmit" />
</form>
<div style="display: hidden" id="dialogData"></div>

---

这就是我最终让它工作的原因：

<div id="formwrapper">
  <form method="post" action="http://wherever" target="response">
    # form stuff
  </form>

  <iframe id="response" name="response" style="display: none;"></iframe>
</div>

<script>
function hideresponseiframe() {
  $('#formwrapper #response').hide();
}

$('form').submit(
  function (event) {
    $('#formwrapper #response').show();
    $.colorbox(
      {
        inline: true,
        href: "#response",
        open: true,
        onComplete: function() {
          hideresponseiframe()
        },
        onClosed: function() {
          hideresponseiframe()
        }
      }
    );
    return true;
  }
);

</script>

#表格材料
函数hideresponseiframe（）{
$（'#formwrapper#response'）.hide（）；
}
$（'form'）。提交(
功能（事件）{
$（'#formwrapper#response'）.show（）；
$彩色盒(
{
是的，
href:“回复”，
开放：是的，
onComplete:function（）{
hideresponseiframe（）
},
onClosed:function（）{
hideresponseiframe（）
}
}
);
返回true；
}
);

当然，这是可以做到的。你被困在哪里？你能提供一些代码吗？你能澄清什么是对话框中的颜色框吗？@Coulton是LightboxJQuery插件的一个流行克隆我能把它放在iframe中吗？还有。。现在php已经序列化了，需要编写一些php代码来处理表单提交，并打印出希望显示在colorbox中的HTML结果。在我的示例中，这将发生在“/path/to/script.php”中，谢谢。。。把它放在iframe里怎么样？它发布到的脚本与表单页面无关。你是什么意思？使用iframe而不是colorbox？或者在颜色框中使用iframe而不是

html:data

选项？另外，“它发布到的脚本独立于表单页面。”这需要在iframe中返回，因为script.php已经为这些结果包含了特定的css和js。您不能让这两个页面都访问javascript和css吗？

<?php
// Do the addition
$addition = $_POST['num1'] + $_POST['num2'];

$result = array("result" => $addition);

// Output as json
echo json_encode($result);
?>

$('form#myForm').submit( function() {

    // Form has been submitted, send data from form and get result

    // Get data from form
    var formData = $('form#myForm').serialize();

    $.getJSON( 'doAddition.php', formData, function(resultJSON) {

          // Put the result inside the dialog case
          $("#dialogData").html(resultJSON.result);

          // Show the dialog
          $("#dialogData").dialog();

    });
});

<div id="formwrapper">
  <form method="post" action="http://wherever" target="response">
    # form stuff
  </form>

  <iframe id="response" name="response" style="display: none;"></iframe>
</div>

<script>
function hideresponseiframe() {
  $('#formwrapper #response').hide();
}

$('form').submit(
  function (event) {
    $('#formwrapper #response').show();
    $.colorbox(
      {
        inline: true,
        href: "#response",
        open: true,
        onComplete: function() {
          hideresponseiframe()
        },
        onClosed: function() {
          hideresponseiframe()
        }
      }
    );
    return true;
  }
);

</script>