jQuery：将表单发布到模态窗口以预览输入的数据

我正在寻找一种方法来使用jQuery允许用户在提交要保存的表单之前查看表单的模式窗口“预览”。

我使用javascript工作，表单被发布到名为preview.php的文件中，该文件遍历发布的信息。 该脚本当前打开一个新窗口。

我想使用jQuery将表单发布到模态窗口进行预览。 有没有人对如何做到这一点有任何想法？

这就是我目前使用的：

 function preview(form) { form.target='_blank'; form.action='http://example.com/preview.php'; form.submit(); }   

Answer 1

只需使用http://jquery.malsup.com/表单插件即可。 添加id为’preview’的空div。

 $(document).ready(function() { $('#form').ajaxForm({ target: '#preview', url: 'http://example.com/preview.php' }); }); 

表单将发布到preview.php文件并返回该文件中打印的任何文本。

Answer 2

您需要将表单数据传递给PHP页面…为此，请对表单及其元素进行序列化和字符串化，并将其传递到URL中。

JavaScript / HTML

 
  
 
 $.fn.serializeObject = function(){ var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; function preview(form) { var json = JSON.stringify( $(form).serializeObject() ); var url ='/preview.php?j=' + encodeURIComponent(json); $('#previewDiv').load(url); return(false); } 

preview.php

    This is a preview using BGColor:    

显然你想避免使用内联样式，但你明白了。