Published 2月 2nd, 2012 by

文字コードの違うサイトへformでの送信で、文字化けの解決

あるwebサイトをリニューアル(正確には別サイトですが・・)制作していたんですが、
そのリニューアルサイトにあるお問い合わせのフォームから、
既存のサイトにあるフォームの確認ページへ飛ばすということになりました。

普通にformのactionで飛ばしていたら、文字化けが起こってしまいました。

調べてみると、
こちらがutf-8で、あちらはShift-jisでした。

それは文字化けするよね、と思いつつ、調べて、なんとか解決することができました。

以下が参考にさせていただいたサイトです。

»ページの文字コードとは違う任意の文字コードをformから送信する方法｜web bibo
一番参考になったサイトがこちらです。
IEでの文字化けの解消方法も参考にさせていただきました。

»文字コードの違うサイト間のPOST送信 LUNARAVE WEBクリエイターの仕事と休息/ウェブリブログ
»JavaScript で複数の文字コードをform から送信する方法

僕が修正した実際のソースは以下になります。

◆formタグ部分

修正前

<form action="url" method="post" name="任意のname">

修正後

<form action="url" 
method="post" name="任意のname" 
accept-charset="Shift-JIS" 
onsubmit="return false;">

◆送信ボタン部分

修正前

<input type="submit" value="登録する">

修正後

<input type="button" value="登録する" 
onclick="org=document.charset; 
document.charset='Shift-JIS'; 
document.任意のname.submit(); 
document.charset=org;">

ちなみに、IEの文字化けとは、
フォームから違うサイトへ行き、ブラウザの戻るボタンかなにかで戻った場合、
文字コードがそのままになってしまい、文字化けしてしまうということです。

僕の場合は以下のように対処しました。
(web biboさんとほぼ同じですｗ)

<script>
function codeChange(){
	var isMSIE = /*@cc_on!@*/false;	//IEかどうかを判断
	if (isMSIE) {
		if(document.charset!="utf-8"){ //utf-8ではなかったら
			document.charset="utf-8"; //utf-8に変更！
			location.reload();//再読み込み
		}
	}
}
</script>

どこかでcodeChange()を呼び出せばOKです。
僕の場合は、bodyのonloadに設定しました。

バグとかの解決