ウォッチ
http://www.ajaxmail.jp/のAjaxmailを使用いたしております。リンクをクリックするとメールフォームがポップアップで表示されるのですが、このフォームのスクリプトに対して最初のリンクのクリックと同時にPOSTでデータを送りたいと思っておりますがうまく行きません。
ソースは以下
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>AjaxMail：Ajaxを活用したフリーPHPメールフォーム</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>
</head>
<body>
<div style="margin:200px">
<form name="form1" action="http://xxxx.com/ajaxmail-utf-8/ajaxmail/sample.p … method="post">
<input type="hidden" name="str" value="xxxx@xxxx.xx.xx">
</form>
<a href='JavaScript:document.form1.submit()' rel='iframe' title='送信フォームタイトル :: 送信フォーム説明文 :: width: 750, height: 600' class='lightview'>text1</a>
</form>
フォームをポップアップさせるJavaScriptとPOSTを制御するJavaScriptとの組み合わせの仕方がよくわかりません。
恐れ入りますがどなたかご教授頂けると幸いです
No.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>
-
-
- 0
- 件
-
No.6
- 回答日時：
一応、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.dt …
<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>
＝＝＝続く＝＝＝
-
-
- 0
- 件
-
No.5
- 回答日時：
＜フォームの確認ボタンを押して確認画面表示→送信ボタン→送信確認画面まで全てポップアップ内で遷移して欲しい＞
となると、「ポップアップ内で遷移して欲しい」＝「ページ遷移させない」という
事だから、sample.phpでsendmail.phpにサブミットするのでなくここでもajaxリク
エストを使うことになり、ややこしくなります。そもそもsample.phpを介在する
必用はないので、test.phpだけですむようざくっと作り変えた方が楽です。
No.2でちらっと書きましたが、Lightviewのinlineオプション使えば、ページ
内のフォームもポップアップできます。フォームを初期状態で」display:none;
にしておいて、ポップアップ時に表示して、sendmail.phpとajaxすればよいかな。
-
-
- 0
- 件
-
ありがとうございます。むむむ。当方初心者なのでsample.phpを介在しないでとなるとハードルが高そうです。。そもそもsample.phpとsendmail.php間の動きも良くわかってないしまつなので。Lightviewのinlineオプションについても検索してみましたがなかなかわかり良い情報も無く。挫折しそうです。勝手なお願いばかりで恐縮なのですがサンプルソースでヒントを頂けると大変ありがたいですが如何でしょう。自分でも引き続き勉強してみますがお手つきの時で結構ですのでご検討を。
No.4
- 回答日時：
続き
<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からメールを送信することができましたので惜しいところまできていると思うのですが。。
希望としてはフォームの確認ボタンを押して確認画面表示→送信ボタン→送信確認画面まで全てポップアップ内で遷移して欲しいと思っております。
最初の要望説明が十分でなかったのが悪かったかもしれませんが引き続きご教授お願いできれば幸いです。
-
-
- 0
- 件
-
No.3
- 回答日時：
続き
/*
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.dt …
<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>
続く
-
-
- 0
- 件
-
No.2
- 回答日時：
質問がだいたい解りました。
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.dt …
<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読み込み処理？？
*/
続く.....
-
-
- 0
- 件
-
早速のご回答ありがとうございました。途中の回答No3がサイト都合で見れないため回答頂いた内容については試せておりませんが取り急ぎお礼申し上げます。
No.1
- 回答日時：
恐れ入りますが、質問の文面からなされたい事がさっぱり汲み取れません。
－リンクをクリックしたら同じページにあるメールフォームをポップアップしたいのですか？
－リンクをクリックしたらメールフォームをポップアップせずに送信したいのですか？
その場合、メールの宛先とか本文はどうするのですか？
この回答への補足
回答ありがとうございます。わかりづらく失礼しました。うまく説明できるか不安ですが。
やりたい事は以下になります。
物件検索サイトを構築したい。ＤＢからのデータを検索結果画面で表示させる画面（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のスクリプトがメールを送る
という動きを想定してます。
１）および３）についてはテストスクリプトでうまく動作できたのですが、２）の動作の部分でつまずいているという次第です。
-
-
- 0
- 件
-
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- PHP PHPのエラーの解消法について教えて下さい。 1 2023/02/06 10:48
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
時間表示のタグ
-
計算結果がおかしい
-
どちらかひとつのテキストボッ...
-
プルダウンで選択された値を別...
-
テキストエリアの制限字数以上...
-
tabindexの取得
-
TextBoxに半角数字以外を入れた...
-
IE上のカーソル位置に文字列を...
-
大文字か小文字かを判断する方法
-
フォームの内容でリンク先URLの...
-
GetElementByIdがうまく取得で...
-
input要素のtype属性を変えたい
-
フォーカスが外れた時の入力チ...
-
javascriptのちょっとした動作...
-
VBSからjavascript
-
マイナスなら赤字で表示したい...
-
ページ間で変数を保持したい
-
return trueとreturn falseの用...
-
ボタン2回押しを無効にしたい
-
<JavaScript>tableタグを入力不...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
TextBoxに半角数字以外を入れた...
-
HTMLファイル同士での値渡し
-
ページ間で変数を保持したい
-
マイナスなら赤字で表示したい...
-
プルダウンで選択された値を別...
-
HTMLとJavaScriptで作った表示...
-
テキストエリアに履歴を残したい
-
フォームの内容でリンク先URLの...
-
tabindexの取得
-
テキストボックスに入力した色...
-
VBscriptの配列変数をJavascrip...
-
GetElementByIdがうまく取得で...
-
javascriptのちょっとした動作...
-
どちらかひとつのテキストボッ...
-
VBScriptでpingを実行(ブラウザ...
-
大文字か小文字かを判断する方法
-
jQueryのdatepickerの日付が選...
-
フォーカスが外れた時の入力チ...
-
JavaScriptからphp関数の呼び出し
-
フォーカス設定について教えて...
おすすめ情報
