###前提・実現したいこと
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=の部分を空白に書き換えた。
回答3件
あなたの回答
tips
プレビュー