wordpressを利用したサイトを構築しております。
inputタグを利用し、ページ遷移せずにphpを呼び出す方法を模索しております。
使い方の想定は、次のとおりです。
・ボタンを押したらモーダルポップアップウインドウにラジオボタンのみの簡易フォームが現れる
・送信ボタンを押したら画面遷移せずに、モーダルポップアップウインドウ内にphpを呼び出す
次のように構築を試みました。
・モーダルポップアップは問題なく機能していますので、「modal」というポップアップ内に、下記の簡易フォームを表示します
html
1<div id="rpt" class="modal"> 2<div style="margin : 9px 0px 9px 0px"> 3<b>報告の詳細をご入力下さい</b> 4</div> 5 6<div style="margin : 0px 0px 16px 6px"> 7<form action="http://xxxx/wp-content/themes/twentytwelve-child/send.php" method="post"> 8<input type="radio" name="rpt" value="不快スパム">不快な内容、またはスパムです<br> 9<input type="radio" name="rpt" value="写真に問題">写真の使用に関して問題があります<br> 10<input type="radio" name="rpt" value="不適">記事として不適切です<br> 11</div> 12<p><input type="submit" value="この記事を報告する"></p> 13</form> 14</div>
次に送信ボタンを押した時に表示するsend.phpを下記の通り作成します。
php
1<meta charset="utf-8"> 2 3<?php 4 5mb_language("Japanese"); 6mb_internal_encoding("UTF-8"); 7 8$radio = $_REQUEST["rpt"]; 9 10if (!mb_send_mail("support@keyblogs.net", "記事の報告",$radio, "From:報告")) { 11 exit("恐れいりますが、もう一度お試し下さい"); 12} 13?> 14 15<p> 16 ご協力ありがとうございます。<br> 17 報告を送信しました。運営の参考にさせて頂きます。<br> 18</p>
上記の構造だと機能はしますが画面が遷移してしまい、使い勝手がよくありません。
次のようなAjaxによる制御を試みましたが、挙動は上記と同じく画面が遷移してしまい、うまく参りません。
jQuery
1<script type="text/javascript"> 2jQuery('#rpt').click(function() 3{ 4jQuery.ajax({ 5url: http://xxxx/wp-content/themes/twentytwelve-child/send.php, 6type:'POST', 7data: 8{ 9email: アドレス, 10message: message 11}, 12success: function(msg) 13{ 14alert('報告の送信が完了しました。'); 15} 16}); 17} 18</script>
送信ボタンを押したら画面遷移せずに、モーダルポップアップウインドウ内にphpを呼び出す、という動作をさせるには、どのように構築するのが適当でしょうか?
お知恵をお貸し頂けますと幸いです。
よろしくお願い致します。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/05/19 02:33