質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

4774閲覧

FormをSubmitした時の値の送信先を2つ設定したい

cont

総合スコア13

Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/08/08 10:23

編集2016/08/09 13:57

###前提・実現したいこと
FormのPOST先を2つ設定したいので、0pxのiframeに内容をserializeしようとしてます。
iframeでPOSTしようとしているのはPOST先の制限です。
index.phpのフォームを入れてもらうとcheck.php(確認ページ)に遷移するので、そちらにjavascript入れて確認後の送信と同時にformの方のPOSTとiframeで外部ドメインに値の挿入をしたいです。
http://help.pardot.com/customer/ja/portal/articles/2125981-form-handlers-advanced-topics
を参考にiframeでの値の送信を考えてます。

###発生している問題・エラーメッセージ
WindowsのFirefox(ver.48)でのみフォームの送り先(example.com)に値が渡ってません。
form-checkerのPOSTの方は問題なく動作しています。iframe用のUrlの生成までは確認出来ています。
Chrome、IEでは正常に値が渡ることを確認済みです。

###該当のソースコード

javascript

1$(function(){ 2 var FormHandlerURL = 'http://example.com/hoge/hoge'; 3 var url = FormHandlerURL + '?' + $('#form').serialize(); 4 $('body').append('<div>'+Url+'</div>'); 5 $('body').append('<iframe id="form-handler" height="0" width="0" style="position:absolute; left:-100000px; top:-100000px" src="javascript:false;"></iframe>'); 6 $('#form_checker').on('submit', function(e){ 7 $('#form-handler').attr('src',url); 8 }); 9 });

html

1 <form id="form" style="display:none;"> 2 <?php ConfDisp();?> 3</form>

php

1 function ConfDisp(){ 2 global $inputs; 3 foreach( $inputs as $key => $value){ 4 $_SESSION[$key] = zeromail_regtag_replace($_SESSION, $key); 5 if($key == "name"){ 6 list($family, $first) = explode(" ",$_SESSION[$key]); 7 echo convert_encode('<input type="hidden" id="family" name="family" value="'.$family.'" >'); 8 echo convert_encode('<input type="hidden" id="first" name="first" value="'.$first.'" >'); 9 } 10 elseif ($key == "address") { 11 $fulladdress = preg_split("/( | |)/",$_SESSION[$key]); 12 echo convert_encode('<input type="hidden" id="zip" name="zip" value="'.$fulladdress[0].'" >'); 13 echo convert_encode('<input type="hidden" id="address1" name="address1" value="'.$fulladdress[1].'" >'); 14 echo convert_encode('<input type="hidden" id="address2" name="address2" value="'.$fulladdress[2].'" >'); 15 } 16 else{ 17 echo convert_encode('<input type="hidden" id="'.$key.'" name="'.$key.'" value="'.$_SESSION[$key].'" >'); 18 } 19 } 20}

このPHPは名前と住所のデータが一緒になってしまっていたのを無理矢理分離する為のものです。

html

1 <form action="mail.php" method="post" id="form_checker"> 2 <fieldset> 3 <legend>Contact details</legend> 4 <dl> 5 <?php Conf();?> 6 </dl> 7 <div class="btn2"><?php Button();?></div> 8 </fieldset> 9 <input type="hidden" name="page" value="<?php echo "$page"; ?>" /> 10 </form> 11 <form id="form" style="display:none;"> 12 <?php ConfDisp();?> 13 </form> 14 </div>

Confの中身はConfDispで整形前のフォームの送信データです。既存のデータの流れを変更しない為にこの様な処理をしています。formの中身をserializeしてform-checkerのPOSTと同時にiframeで値を送りたいです。

###試したこと
console.log(url)を$('#form_checker').on('submit', function(e)の前にぶち込むと値が正常に返って来てます。

###追記
スクリプトを下記の様に書き換えても同じ結果だった。

javascript

1$(function(){ 2 var FormHandlerURL = 'http://example.com/hoge/hoge'; 3 var url = FormHandlerURL + '?' + $('#form').serialize(); 4 $('body').append('<div>'+Url+'</div>'); 5 $('body').append('<iframe id="form-handler" height="0" width="0" style="position:absolute; left:-100000px; top:-100000px" src="javascript:false;"></iframe>'); 6 7 $('.btn2').on('click', function(e){ 8 9 var iframe = function(callback){ 10 $('#form-handler').attr('src', Url); 11 callback(); 12 }; 13 var formPost = function(){ 14 $('#form_checker').attr('action', 'mail.php'); 15 $('#form_checker').submit(); 16 }; 17 iframe(formPost); 18 }); 19 });

btn2はformのsubmitボタン。また、上記と同時にform action=の部分を空白に書き換えた。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/08/08 11:45

例示用ドメインはご自身で所有されていない限りexample.comを利用してください。
yambejp

2016/08/09 01:37

$('body').append('<div>'+Url+'</div>');のUrlが事前に宣言されてませんね
kunai

2016/08/09 01:45

「うまく動作しない」と言うのがどういう状況なのか「値が"POSTで"渡ってこない」のか、「値が"GETでも"空で送信される」のか、「そもそも$_POSTも$_GETも何も入っていない(キーもない)」のか、そのあたりもう少し明確に書いていただけると助かります。 また、コードの中で「#form-checker」や「#form-handler」などでてきますが、コードの中にはそれらがないため、いまいち全体の処理が不明です。
guest

回答3

0

結局iframeのsrcが更新される前にsubmitされてるんじゃないですかねぇ?
場合によってはiframeのreadyStateをチェックしたり
onbeforesubmitなどで対応できるかもしれませんね

投稿2016/08/09 02:49

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cont

2016/08/09 13:37

preventDefaultでactionを止めたらiframe側の処理が走ったので、ご指摘の通りsrcの書き換えの前にform actionの方が発火しているみたいですね。 正確な所はiframe内のパケットのやり取りが開発者コンソールで拾えておらず、今の所わかってない状態ですが。 コールバックを使ってiframe srcの書き換え→mail.phpへのPOSTっていう方向に書き換えましたが、やはり同じくfirefoxでのみ動作がしないです。(コードは追記の方を参照)
guest

0

なぜ2箇所にPOSTしたいなんて要件がでるのかわからないのですが、ページ遷移先は1箇所なのですよね?
であれば、イレギュラーなやり方ではなく、片方のPOSTはPHPからさせるとか、設計変更したほうが問題がなくて良い気がします。

投稿2016/08/09 13:50

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cont

2016/08/10 07:53

そうですね。やむを得ない事情がありまして、本来であればそうしたいのですが PHPの方は極力触らずコード書くにしても追加だけに留めておきたいのです。(このシステムの全容を把握していない為) 新たに別システムに情報を投げたいけど、現状のコードはこちらで管理していないので極力触りたくないって状況でして。
guest

0

ベストアンサー

追記のコードは、コールバック部分がロードを待っていないので、正しく動かないと思います。

JavaScript

1$( function() { 2 var FormHandlerURL = 'https://teratail.com/questions/43710'; 3 var url = FormHandlerURL + '#' + $( '#form' ).serialize(); 4 5 $( '.btn2' ).on( 'click', function() { 6 var iframe = function( callback ) { 7 $('body').append( '<div>' + url + '</div>' ); 8 var $iframe = $( '<iframe id="form-handler" height="150" width="300" src="javascript:false;"></iframe>' ).attr( 'src', url ).load( callback ); 9 $( 'body' ).append( $iframe ); 10 }; 11 var formPost = function() { 12 $( '#form' ).attr( 'action', 'https://example.com/mail.php' ); 13 $( '#form' ).submit(); 14 }; 15 iframe( formPost ); 16 } ); 17} ); 18```**動くサンプル:**[https://jsfiddle.net/84ek4cow/1/](https://jsfiddle.net/84ek4cow/1/)

投稿2016/08/09 19:45

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cont

2016/08/16 04:06

どうにかなりました。ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問