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

我有一个我希望提交的表单，它发布到一个php脚本来处理表单数据。提交表单（jquery）并在colorbox中显示结果

我需要做的是点击提交后有一个带有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; 
    });

UPDATE：这需要在一个iframe中返回的 build_action.php已经为这些成果包括特定CSS和JS。

来源

2011-10-12 Cybercampbell

当然，这是可以做到。你卡在哪里？你是否提供了一些代码？ –

请您澄清一下彩盒是什么，就像在对话框中一样？ – Luke

@Coulton是一个广受欢迎的jQuery插件的灯箱克隆 –

这是简单的，未经测试的代码，但它会给你一个很好的起跳点，因此您可以阐述但多少你请：

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

来源

2011-10-12 08:31:00 Jeff

我可以在iframe中使用它吗？ – Cybercampbell

另外..什么是现在它的PHP端，它是序列化的。 – Cybercampbell

您需要编写一些PHP代码来处理表单提交并打印出想要在colorbox中显示的HTML。在我的例子中，这将发生在“/path/to/script.php” – Jeff

本文将帮助你的问题

http://www.php4every1.com/tutorials/jquery-ajax-tutorial/

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

来源

2011-10-12 08:34:04 Buddhi

您需要看使用您的颜色框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(); 

    }); 
});

来源

2011-10-12 08:39:33 Luke

这将需要在iframe中返回，因为script.php具有特定的包含css和js的结果。 – Cybercampbell

难道你不能只给两个页面访问JavaScript和CSS？ – Luke

这是我最终得到它的工作：

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

来源

2015-08-17 15:06:43

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

回答

相关问题