提交表单（jquery）并在彩盒中显示结果

Question

我有一个想要提交的表单，该表单正在发布到 php 脚本来处理表单数据。

我需要做的是点击提交后有一个彩色框弹出窗口，其中包含 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 false;
     });

更新：这需要在 iframe 中返回 build_action.php 特别包含了这些结果的 css 和 js。

Answer 1

本文将帮助您解决问题

http://www.php4every1.com/tutorials/ jquery-ajax-教程/

$(document).ready(function(){
$('#submit').click(function() {

    $('#waiting').show(500);
    $('#demoForm').hide(0);
    $('#message').hide(0);

    $.ajax({
        type : 'POST',
        url : 'post.php',
        dataType : 'json',
        data: {
            email : $('#email').val()
        },
        success : function(data){
            $('#waiting').hide(500);
            $('#message').removeClass().addClass((data.error === true) ? 'error' : 'success')
                .text(data.msg).show(500);
            if (data.error === true)
                $('#demoForm').show(500);
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            $('#waiting').hide(500);
            $('#message').removeClass().addClass('error')
                .text('There was an error.').show(500);
            $('#demoForm').show(500);
            }
        });

        return false;
    });
});



< ?php
sleep(3);

if (empty($_POST['email'])) {
    $return['error'] = true;
    $return['msg'] = 'You did not enter you email.';
}
else {
    $return['error'] = false;
    $return['msg'] = 'You\'ve entered: ' . $_POST['email'] . '.';
}

echo json_encode($return);

Answer 2

您将需要了解使用 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>

您可以有一个 PHP 代码 (doAddition.php)，它可能会执行两个数字的相加

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

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

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

您可以使用 jQuery 来检测提交代码，然后将数据发送到 PHP 页面并以 JSON 形式返回结果：

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

    });
});

Answer 3

这是简单的、未经测试的代码，但它会给你一个很好的起点，这样你就可以详细说明你想要的内容：

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

Answer 4

这就是我最终让它发挥作用的方式：

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