jQuery：入力したデータをプレビューするためのモーダルウィンドウへのフォームの投稿

jQueryを使用してフォームのモーダルウィンドウ「プレビュー」を表示して保存するフォームを送信する方法を探しています。jQuery：入力したデータをプレビューするためのモーダルウィンドウへのフォームの投稿

これはjavascriptで動作します。フォームはpreview.phpというファイルに投稿され、投稿された情報を繰り返し処理します。スクリプトは現在、新しいウィンドウを開きます。

代わりにjQueryを使用して、プレビュー用のモーダルウィンドウにフォームを投稿します。誰にどのようにこれを行うにはどのような考えを持っていますか？

これは私が現在使用しているものです：

<script language="JavaScript"> 
function preview(form) { 
    form.target='_blank'; 
    form.action='http://example.com/preview.php'; 
    form.submit(); 
} 
</script> 
<input type="button" value="preview" onclick='preview(this.form)'>

出典

2011-01-04 superUntitled

フォームプラグインhttp://jquery.malsup.com/を使用してください。 IDが 'preview'の空のdivを追加します。

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

フォームはpreview.phpファイルに送信され、そのファイルに印刷されたテキストが返されます。

出典

2011-01-04 22:49:52 superUntitled

をあなたがPHPのページにフォームデータを渡したいよ...これを行うには、シリアル化し、フォームとその要素を文字列化し、それらを渡すにはURLに明らかに

のJavaScript/HTML

<form action="javascript:void(0)" onsubmit="preview(this);"> 
    <input name="bodyBgColor" value="#ffffff" /> 
</form> 

<div id="previewDiv" class="modal"></div> 

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

<?php 
    $json = $_REQUEST['j']; 
    $j = json_decode($json, true); 

    // 'bodyBgColor' is the name of the input element you want the value for. 
    $bodyBGColor= $j['bodyBgColor']; 
?> 

<html> 
    <body style="background:#<?php echo $bodyBGColor ?>;"> 
     This is a preview using BGColor: <?php echo $bodyBGColor ?> 
    </body> 
</html>

あなたは、インラインスタイルを使用しないようにしたいが、あなたのアイデアを得ます。

出典

2011-01-04 21:17:53 Dutchie432

dutchie432に感謝しますが、これは$ _POSTの代わりに$ _GETとしてフォームを送信するだけではありませんか？フォームをモーダルウィンドウに投稿したいと思っています。 – superUntitled

'window.open'ビットはそれを新しいウィンドウで開きます。 preview.phpページをプレビュー目的でモーダルdivにロードしようとしている場合は、同じロジックを使用してjsonとurlを計算することができますが、結果のPHPをID「divId」のdivにロードします。。$（ '＃divId'）。load（url）; 'そして、通常どおりにモーダルダイアログを表示します。 – Dutchie432

おかげさまでDutchieとお手伝いしましたが、正しい方向に私を指摘しました。私はjqueryフォームプラグインを使用して、それは私がサーバーにフォームを投稿することができ、PHPファイルにエコーされたものを返します。 – superUntitled

jQuery：入力したデータをプレビューするためのモーダルウィンドウへのフォームの投稿

答えて

関連する問題