onclickイベントが反応しない

Question

こんにちは。
現在作成しているサイトでPHPで出力した後のHTMLソースコードですが、ローカルでは問題なく動いていたのですが、さくらのクラウドのサーバーにアップした同データのソースで下記の現象が起きました。
理論上は間違いはないかなぁとは思っているのですが、どうにも原因がわからずじまいになってしまいました。

【機能内容】
aタグの箇所をクリックすると、hiddenで隠してあるformをsubmitする機能

【現象】
・サーバーでのみクリックしても何も反応しない ←これがいちばんの重要な問題
・サーバーで生成したソースコードのうち、inputのtype="hidden"部分だけがなぜか自動で要素の一番後ろに生成されている(PHP生成する段階では一番後ろにはない。これに関してはさらに謎)

<!--ローカル環境-->
<div class="st_list-item list-item-container" modifier="chevron">
	<a href="#" onclick="document.changesite.submit()">
		<div class="notice_img">
			<img src="site_icon_1.png" alt="site_icon">
		</div>
		<div class="notice_date">2017-01-20 15:14:22</div>
		<div class="notice_title">
			<span style="color:black;">アイテム名 : 〇〇</span>
		</div>
		<div class="notice_content">期限を超過した為、この取引は自動完了されました。</div>
	</a>
</div>

<form action="ローカルホストアドレス＋phpファイルパス" method="POST" name="changesite" id="changesite" type="submit">
	<input name="redirect_to" type="hidden" value="アイテムページ">
	<input name="a" type="hidden" value="login">
	<input name="access_token" id="access_token" type="hidden" value="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.">
	<input name="log" id="log" type="hidden" value="09000000000">
	<input name="rememberme" type="hidden" id="rememberme" value="forever">
</form>



<!--サーバー環境-->
<div class="st_list-item list-item-container" modifier="chevron">
	<a href="#" onclick="document.changesite.submit()">
		<div class="notice_img">
			<img src="site_icon_1.png" alt="site_icon">
		</div>
		<div class="notice_date">2017-01-20 15:14:22</div>
		<div class="notice_title">
			<span style="color:black;">アイテム名 : 〇〇</span>
		</div>
		<div class="notice_content">期限を超過した為、この取引は自動完了されました。</div>
	</a>
</div>

<form action="サーバーアドレス＋phpファイルパス" method="POST" name="changesite" id="changesite" type="submit">
	<input name="redirect_to" value="アイテムページ" type="hidden">
	<input name="a" value="login" type="hidden">
	<input name="access_token" id="access_token" value="yJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9." type="hidden">
	<input name="log" id="log" value="09000000000" type="hidden">
	<input name="rememberme" id="rememberme" value="forever" type="hidden">
</form>

一応ファイルパスなどのURL関係は間違ってはいませんでした。
デバッグもして見ましたが、aタグにクリックしてもやはり反応自体していませんでした。

ローカルと同じファイルである以上環境依存の問題かなぁと思っていますが、なんとか解決したいと思っております。
お力添えをいただければ幸いです。

【更新】
もしかしたらと思いましてaタグの方をこのように修正しました。

<!--修正前-->
<a href="#" onclick="document.changesite.submit()">

<!--修正後-->
<a href="" onclick="document.changesite.submit()；return false;">

その場合、なぜかreturn falseにしているのに、formではなくaタグの方が反応してしまい、自身のページへ遷移してしまうことがわかりました。

Comments

[kei344]

エラーは出ていませんか？デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error

[omusoba-san]

FireFoxのデベロッパーツールをいつも使用しておりますが、webコンソールで見ても、特にエラー表記はありませんでした。aタグを押下しても、その後のPOST送信も行われていません。

Answer 1

ローカルとリモートの<a>タグのEvent Listenersを比べてみてはいかがでしょうか。（開発者ツールから確認できます）なんのアクションもないとなるとsubmitとかclickとかのEventに差分がでてそう。

Comments

[Neko_doshi]

あ、あと、気になったんですが。
プロパティの並び順もformはぜんぜん違うんですがリモートとローカルは同期ちゃんと取れているのでしょうか。
あとはaccess_tokenのvalueが若干違う（先頭にeがついているかいないか）んですがこれは関係ないですか？

Answer 2

サーバーで生成したソースコードのうち、inputのtype="hidden"部分だけがなぜか自動で要素の一番後ろに生成されている(PHP生成する段階では一番後ろにはない。これに関してはさらに謎)

Firefoxで Ctrl+U（ブラウザで「ページのソースを表示」）でソースを表示するとHTMLの構文エラーが赤文字で出ます。デベロッパーツールでの表示はブラウザによって解釈された後のHTMLが表示されているため、「順番が変わる」ことがあります。

タグの閉じ忘れや不完全なタグ名、ダブルコーテーションの閉じ忘れなど、そういったことでHTMLが崩れている可能性はありませんか？

Comments

[omusoba-san]

今までFireFoxでしたが、一応ブラウザを念のためSafariに変えたところ、ログが出て原因はわかりました。
原因としてはフォームのnameが一緒に読み込んでいたPHPファイルのフォームと重なってしまったことが原因だったようです。
なので完全に一意なもので出力することで解消されました。
他のブラウザのデバックモード自体は触っていなかったのでいい機会になりました。

Answer 3

formのactionはフルパスで書かれているのでしょうか。もし可能であれば、相対パスに変えてみるとか。
あ、ちなみに検証に使用しているブラウザーは何を使われていますか？

Answer 4

Aタグにする必要が無ければ

<div onclick="document.changesite.submit()"> </div> でいいのでは

Answer 5

ブラウザ付属の開発ツール(F12)でデバッグするのが確実だと思います

追記

たとえばfunction化して以下のように確認してみるとか

<a href="" onclick="return click_func();">test</a>
<script>
function click_func(){
console.log('test');
//document.changesite.submit()；
return false;
}
</script>

上記確認できたらsubmitのコメントアウトを外してください

Comments

[omusoba-san]

デバッグをして見てエラーがないか確認しましたが、それらしいエラーが確認できませんでした....。

[yambejp]

とりあえず追記しました。地道にデバッグしてください。
サービス側でなんらかのスクリプトが自動で挿入されていたりとか
考えられなくもないですが、可能性は低いかと
ブラウザのセキュリティレベルの違いかもしれませんね？
ローカルへの接続に対するセキュリティは低いですが、
インターネットへは高めになっていると思いますので・・・

Answer 6

一時的にでもいいのでwebサイトのアドレスをご教示いただけるとスムーズにデバッグが可能かと思いますがいかがでしょうか？

Comments

[omusoba-san]

すみません、本来であれば公開したいのですが、業務の関係上サイトアドレスを表示させることは難しくなります(守秘義務の関係上、valueの値などの影響のないところは編集しています)。