- ベストアンサー
AjaxMailの使い方について
- AjaxMailを使用して、メールフォームをポップアップ表示したいが方法がわからない。
- AjaxMailはAjaxを活用したフリーPHPメールフォームであり、リンクをクリックするとポップアップでメールフォームが表示される。
- 質問者はメールフォームのスクリプトに対して、リンクのクリックと同時にデータをPOSTで送信したいと思っているが、うまくいっていない。
- scowbee
- お礼率44% (4/9)
- JavaScript
- 回答数7
- ありがとう数23
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
＝＝＝続き＝＝＝ <p><strong>内容</strong><br /> <textarea cols="50" rows="10" name="内容" id="内容"> </textarea> </p> <p><input type="submit" value="確認する"></p> </form> <script type="text/javascript" language="javascript"> function ajax_popup(no){ var form_data,Kanrisya_Mail; switch(no){ case 1: Kanrisya_Mail="hogehoge1@fuga.fuga"; form_data="1"; break; case 2: Kanrisya_Mail="hogehoge2@fuga.fuga"; form_data="2"; break; case 3: Kanrisya_Mail="hogehoge3@fuga.fuga"; form_data="3"; break; default: Kanrisya_Mail=""; form_data=""; break; } document.getElementById("E-mail").value=Kanrisya_Mail; document.getElementById("内容").value=form_data; Lightview.show({href:'#ajaxForm',rel:'inline',title:"送信フォーム", options:{autosize:true,topclose:true}}); document.observe('lightview:opened',function(){ new Spry.Widget.ValidationTextField("checkText1", "none", {validateOn:["change"]}); new Spry.Widget.ValidationTextField("checkText2", "email",{validateOn:["change"]}); }); } function ajaxsend(){ var form_data={"E-mail":document.getElementById("E-mail").value, "内容":document.getElementById("内容").value}; Lightview.show({href:'./ajaxmail/sendmail.php',rel:'ajax', options:{autosize: true,topclose:true,ajax:{parameters:form_data,}} }); } </script> </body> </html>
その他の回答 (6)
- yyr446
- ベストアンサー率65% (870/1330)
一応、test.phpだけですむように、試して見ましたが、lightviewに 限界がありました。どうしても３回目のポップアップで、lightview がエラーを吐いてしまい、最初のフォームのポップアップに戻せません。 このへんで、妥協するしかないかも．．．。 sendmail.phpの // 送信確認画面の表示(する=1, しない=0) $chmail = 0; // 送信後に自動的にジャンプする(する=1, しない=0) // 0にすると、送信終了画面が表示されます。 $jpage = 0; にします。 test.phpは <?php mb_language("japanese"); mb_internal_encoding("UTF-8"); header("Content-Type:text/html;charset=utf-8"); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>PopupForm</title> <link rel="stylesheet" type="text/css" href="css/lightview.css" /> <link rel="stylesheet" href="./ajaxmail/SpryValidationTextField.css" type="text/css" media="all"> <script type="text/javascript" src="js/protoculous-effects-packer.js"></script> <script type="text/javascript" src="js/lightview.js"></script> <script src="./ajaxmail/SpryValidationTextField.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> </script> </head> <body> <?php /* DB読み込み処理？？ */ ?> <ul> <li>物件１<input type="button" value="問い合わせ" onclick="ajax_popup(1);"></li> <li>物件２<input type="button" value="問い合わせ" onclick="ajax_popup(2);"></li> <li>物件３<input type="button" value="問い合わせ" onclick="ajax_popup(3);"></li> </ul> <form style="display:none;" id="ajaxForm" method="POST" action="javascript:ajaxsend()"> <p id="checkText1"> <strong>お名前</strong><br /><input type="text" size="40" name="お名前" id="お名前"> <span class="textfieldRequiredMsg">お名前が未入力です</span> </p> <p id="checkText2"> <strong>E-mail</strong><br /> <input type="text" size="40" name="E-mail" id="E-mail" value=""> <span class="textfieldRequiredMsg">メールアドレスが未入力です</span> <span class="textfieldInvalidFormatMsg">メールアドレスをご記入ください</span> </p> ＝＝＝続く＝＝＝
- yyr446
- ベストアンサー率65% (870/1330)
＜フォームの確認ボタンを押して確認画面表示→送信ボタン→送信確認画面まで全てポップアップ内で遷移して欲しい＞ となると、「ポップアップ内で遷移して欲しい」＝「ページ遷移させない」という 事だから、sample.phpでsendmail.phpにサブミットするのでなくここでもajaxリク エストを使うことになり、ややこしくなります。そもそもsample.phpを介在する 必用はないので、test.phpだけですむようざくっと作り変えた方が楽です。 No.2でちらっと書きましたが、Lightviewのinlineオプション使えば、ページ 内のフォームもポップアップできます。フォームを初期状態で」display:none; にしておいて、ポップアップ時に表示して、sendmail.phpとajaxすればよいかな。
- yyr446
- ベストアンサー率65% (870/1330)
続き <form id="ajaxForm" method="POST" action="./ajaxmail/sendmail.php"> <p id="checkText1"> <strong>お名前</strong><br /><input type="text" size="40" name="お名前" id="お名前"> <span class="textfieldRequiredMsg">お名前が未入力です</span> </p> <p id="checkText2"> <strong>E-mail</strong><br /> <input type="text" size="40" name="E-mail" id="E-mail" value="<?php echo $_POST['Kanrisya_Mail'] ?>"> <span class="textfieldRequiredMsg">メールアドレスが未入力です</span> <span class="textfieldInvalidFormatMsg">メールアドレスをご記入ください</span> </p> <p><strong>内容</strong><br /><textarea cols="50" rows="10" name="内容" id="内容"> <?php echo $_POST['Bukken_ID'] ?> </textarea> </p> <p><input type="submit" value="確認する"></p> </form> </body> </html> ※スクリプトやCSSやPHPのパスは適切にしてください。 ※sendmail.phpのカストマイズもお忘れなく
補足
回答ありがとうございます。早速試しました。 test.phpのボタンをクリックするとフォームがポップアップして、データも同時に受け渡されているのは確認できたのですが、フォーム内の確認ボタンを押すとlightviewのポップアップが解けてしまい画面がtest.phpから遷移して確認画面が表示されてしまいます。 確認画面の送信ボタンを押してSendmail.phpからメールを送信することができましたので惜しいところまできていると思うのですが。。 希望としてはフォームの確認ボタンを押して確認画面表示→送信ボタン→送信確認画面まで全てポップアップ内で遷移して欲しいと思っております。 最初の要望説明が十分でなかったのが悪かったかもしれませんが引き続きご教授お願いできれば幸いです。
- yyr446
- ベストアンサー率65% (870/1330)
続き /* DB読み込み処理？？ */ ?> <ul> <li>物件１<input type="button" value="問い合わせ" onclick="ajax_popup(1);"></li> <li>物件２<input type="button" value="問い合わせ" onclick="ajax_popup(2);"></li> <li>物件３<input type="button" value="問い合わせ" onclick="ajax_popup(3);"></li> </ul> <script type="text/javascript" language="javascript"> function ajax_popup(no){ var form_data; if(no=="1") form_data={"Bukken_ID":1,Kanrisya_Mail:"hogehoge@fuga.fuga"}; if(no=="2") form_data={"Bukken_ID":1,Kanrisya_Mail:"hogehoge@fuga.fuga"}; if(no=="3") form_data={"Bukken_ID":1,Kanrisya_Mail:"hogehoge@fuga.fuga"}; Lightview.show({href:'./sample.php',rel:'ajax', options:{autosize: true,topclose:true, ajax:{ parameters:form_data, onComplete: function(){ new Spry.Widget.ValidationTextField("checkText1", "none", {validateOn:["change"]}); new Spry.Widget.ValidationTextField("checkText2", "email",{validateOn:["change"]}); //$('ajaxForm').observe('submit',function(){}); } } } }); } </script> </body> </html> 次にsample.phpの方 <?php mb_language("japanese"); mb_internal_encoding("UTF-8"); header("Content-Type:text/html;charset=utf-8"); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>Form</title> </head> 続く
- yyr446
- ベストアンサー率65% (870/1330)
質問がだいたい解りました。ajaxmail.phpの呼び方というより、Lightview.jsによる ポップアップの手段と、SpryValidationTextField.jsによる事前チェックするのが肝ですね。 サンプルだとLightviewがiframeになっているからやりずらい気がします。Lightviewは ajax呼び出しも出来るから、ご希望のようにするにはajaxオプションを使いましょう。 （※inlineオプション使えば、sample.phpに別投げしなくても、test.phpのみでもでき るけれど、ごきぼうどおりのやり方でサンプル作ってみました） まず、test.phpの方 （回答投稿文字数オーバーになるので続きます） <?php mb_language("japanese"); mb_internal_encoding("UTF-8"); header("Content-Type:text/html;charset=utf-8"); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>PopupForm</title> <link rel="stylesheet" type="text/css" href="css/lightview.css" /> <script type="text/javascript" src="js/protoculous-effects-packer.js"></script> <script type="text/javascript" src="js/lightview.js"></script> <link rel="stylesheet" href="./ajaxmail/SpryValidationTextField.css" type="text/css" media="all"> <script src="./ajaxmail/SpryValidationTextField.js" type="text/javascript"></script> </head> <body> <?php /* DB読み込み処理？？ */ 続く.....
お礼
早速のご回答ありがとうございました。途中の回答No3がサイト都合で見れないため回答頂いた内容については試せておりませんが取り急ぎお礼申し上げます。
- yyr446
- ベストアンサー率65% (870/1330)
恐れ入りますが、質問の文面からなされたい事がさっぱり汲み取れません。 －リンクをクリックしたら同じページにあるメールフォームをポップアップしたいのですか？ －リンクをクリックしたらメールフォームをポップアップせずに送信したいのですか？ その場合、メールの宛先とか本文はどうするのですか？
補足
回答ありがとうございます。わかりづらく失礼しました。うまく説明できるか不安ですが。 やりたい事は以下になります。 物件検索サイトを構築したい。ＤＢからのデータを検索結果画面で表示させる画面（test.php）があるとします。このページに検索結果として表示された個々の物件毎に”問合せ”ボタンがあり、ユーザが問合せをしたい場合にボタンをクリックするとAjaxmailのメールフォームがポップアップ（sample.php）し、サイトのユーザが質問内容や自分の連絡先をフォームに入力して送信するような形を取ろうとしております。その際ユーザが個々の物件を特定する情報（物件IDや物件を管理している管理者のメールの宛先情報等）をいちいち入力することなく各物件の管理者がどの物件の問合せか特定出来る様にする目的で送りたいと思っております。 その方法として画面1でDBより取得した物件IDおよびメールアドレス等の変数情報をPOSTで画面2のフォームに送り込み、そのままユーザには見せない形で管理者にメールできるように出来ないかと考えております。 流れとして １）test.phpでDBより管理者メールアドレスと物件ID情報を取得 ２）test.phpの画面上のボタンを押すとメールフォームが立ち上がる（sample.php）。その際に同時に物件IDとメールアレス情報をsample.phpにPOST ３）sample.phpのメールフォームにユーザが入力し"submit"すると２）でPOSTされた情報と併せてsample.phpに連携したsendmail.jsのスクリプトがメールを送る という動きを想定してます。 １）および３）についてはテストスクリプトでうまく動作できたのですが、２）の動作の部分でつまずいているという次第です。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
ありがとうございます。むむむ。当方初心者なのでsample.phpを介在しないでとなるとハードルが高そうです。。そもそもsample.phpとsendmail.php間の動きも良くわかってないしまつなので。Lightviewのinlineオプションについても検索してみましたがなかなかわかり良い情報も無く。挫折しそうです。勝手なお願いばかりで恐縮なのですがサンプルソースでヒントを頂けると大変ありがたいですが如何でしょう。自分でも引き続き勉強してみますがお手つきの時で結構ですのでご検討を。