キタジマタカシ 
- 2011/12/13
- いろいろな要素を柔軟にPostできるように修正しました。
jquery.previewButton.jsをダウンロード
デモページ
ソースとか、使い方とか
ウィンドウを生成し、フォームを複製、複製したフォームから生成したウィンドウにPostする仕組みです。
引数
| url | プレビュー用ページのurl |
|---|---|
| post | Postするデータのキーとタイプのハッシュ。
※checkboxの場合は、キー名の後に自動的に[]が付加されるので注意！ |
入力フォームページ
...省略...
<!-- jQueryと、jquery.previewButton.jsを読み込みます。 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/jquery.previewButton.js"></script>
<!-- input#previewButtonを押したときに/path/to/preview.phpにデータをPost。 -->
<script type="text/javascript">
(function($){
$('input#previewButton').previewButton({
'url' : '/path/to/preview.php',
'post' : {
'title' : 'text',
'content' : 'textarea'
}
});
})(jQuery);
</script>
...省略...
<form method="post" action="./">
<input type="text" name="title" size="60" />
<textarea name="content" cols="50" rows="5"></textarea>
<input type="button" name="previewButton" id="previewButton" value="プレビュー" />
</form>
...省略...
プレビューページ
プレビュー用のページではPostデータを表示するコードを記述してください。例えば以下のような感じで…。
<?php if ( !empty( $_POST['title'] ) ) : ?> <h1><?php echo htmlspecialchars( $_POST['title'], ENT_QUOTES, 'utf-8' ); ?></h1> <?php endif; ?> <?php if ( !empty( $_POST['content'] ) ) : ?> <?php echo $_POST['content']; ?> <?php endif; ?>
