表格内的jquery花式框预览

时间:2014-01-31 07:09:36

标签: php jquery

我使用jquery花式框来预览mysql中的数据。

我使用了http://www.picssel.com/playground/jquery/postPreview_15jan13.html示例。

我想传递" id = 1"到grid.php

当我通过外面时,我能够看到预览,因为预览在

表单值1无法传递给grid.php页面。

我怎样才能实现这个目标?

以下是代码:

!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Jose Francisco Diaz / picssel.com" />
<title>POST preview</title>
<link rel="stylesheet" type="text/css" href="fancybox2.1.4/jquery.fancybox.css" />
<style type="text/css">
 a {outline: 0 none; text-decoration: none;}
 a img {border: 0 none;}
 #wrap { width: 800px;  margin: 20px auto; font-family: arial, sans-serif; font-size: 14px;}
 .preview2 {width: 80px; padding: 5px; background: #ededed; display: block; line-height: 16px; text-decoration: none; text-align: center; border: solid 1px #ccc;}
 label {display: block}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="fancybox2.1.4/jquery.fancybox.js"></script>
<script>
/* <![CDATA[ */
$(document).ready(function () {
  $('.preview2').on("click", function (e) {
    e.preventDefault();
    $.ajax({
      type: "POST",
      cache: false,
      url: this.href, // preview.php
      data: $("#postp").serializeArray(),
      success: function (data) {
        // on success, post (preview) returned data in fancybox
        $.fancybox(data, {
            // fancybox API options
          fitToView: false,
          width: 905,
          height: 505,
          autoSize: false,
          closeClick: false,
          openEffect: 'none',
          closeEffect: 'none'
        }); // fancybox
      } // success
    }); // ajax
  }); // on
}); // ready
/* ]]> */
</script>
</head>
<form id="postp" method="post" action="">
        <p>
            <label for="login_name">data:
 </label>
            <input type="text" id="login_name" name="login_name" size="30" /><a class="preview2" href="grid.php" id="preview2">Preview</a>
        </p>

        <p>
            <input type="submit" value="submit" />
        </p>
    </form>

1 个答案:

答案 0 :(得分:0)

表单ID丢失。输入值