HTMLのボタンを押下し、onclickでJavascriptが実行されない事がある

ショッピングカートのシステムを作っており、個数を選択し、購入するボタンを押した段階でカートのページに遷移するプログラムを作成しております。
HTML内にページを遷移するJavascriptを記載し、ボタンにonclickを記載し、ボタンが押下された際にJavascriptを実行するように記載しましたが、
PCで動作させた際はカートページに遷移するのですが、Iphone×Safariで動作検証した所、ボタンを押下したらページが再読み込みされたような形になり、再度購入するボタンを押下した所カートページに遷移するという事象が発生しています。

HTML
1コード
2<!--遷移先のページに商品情報などを送る為のPHP -->
3<?php
4	include 'html/product.php';
5?>
6
7
8<script>
9function tocart(){
10 location.assign("http://example.co.jp/cart.php");
11}
12</script>
13
14
15<body>
16        <form id="product" action="" method="post" name="product">
17            <input type="hidden" name="product_cart" value="in">
18            <input type="hidden" name="order" id="order" value="0">
19            <input type="hidden" name="code[]" id="code" value="12345">
20            <div class="kosuu">
21                <p>商品個数</p>
22                <select name="kosuu" id="kosuu">
23                    <option value="1">1</option>
24                    <option value="2">2</option>
25　　　　　　　　　　　<option value="3">3</option>
26                </select>
27            </div>
28            <p class="kagiri"><img src="images/gentei.jpg" alt="限定3個まで"></p>
29            <input type="image" src="images/konyu.png"  name="submit2" alt="購入する" class="btn03" value="購入する" onclick="tocart()">
30        </form>
31</body>

読み込んでいるPHPを追加させて頂きました。

PHP
1（product.php）
2if($_POST{'cart_mlt2'}){
3	$ord     = $_POST{'order'};
4	$g_code =  $_POST{'code'};
5	$new_kosu = $_POST{'kosuu'};
6	
7	foreach($code as $value){
8		if($code && $new_kosu){
9			if (isset($_SESSION{'KOSU'}{$value})){
10				$pre_sosu = $_SESSION{'KOSU'}{$value};
11				$new_kosu = $pre_sosu + $new_kosu ;
12			}
13			$_SESSION{'KOSU'}{$value} = $new_kosu;
14		}
15	}
16}
17
18
19

調査したところ、Iphone×Safariでonclickが動作しないという事例で上記HTMLに以下のスタイルを追記しましたが結果は同様でした

html
1コード
2<style>
3.btn03 {
4  cursor: pointer;
5}
6</style>

PCでは発生しておらず、Iphone×Safariで発生しており、時折発生しない事もある為調査に行き詰っております。
知恵をお貸し頂けると幸いです

退会済みユーザー

2021/01/21 03:02

この程度の情報だけでは、htmlの文法チェックくらいしか言及できず、読み込んでるhtmlやjavascriptなどがすべてわからないと、どこでどう影響を与えているのか第三者には判別できませんよ。

m.ts10806

2021/01/21 03:08

ドメインは適当に考えたそれっぽい名前ではなく、例示ドメインを採用してください

uraurabow

2021/01/21 03:29

読み込んでいるPHPとドメイン名を例示ドメインに修正しました

m.ts10806

2021/01/21 03:30

細かいんですが固有名詞は大文字小文字まで正確に書く癖をつけたほうが良いかと。書いたようにしか動かないプログラミングにおいては致命的になり得ます。１例:Iphone

行動規範の内容に同意します

回答1件

<input type="image"> のデフォルト動作は、マウスがクリックされた座標を添えてフォーム送信です。単に画像ボタンとして使うには不適切です。

この場合、location.assign()によるページ遷移要求とフォーム送信によるページ遷移要求(action=""なので自身に遷移)が同時に発生し、どちらかが実行されます。

<input type="button"> <button type="button"> を使ってフォーム送信しないようするか、tocart() でreturn falseしてデフォルト動作をキャンセルしましょう。

投稿2021/01/21 03:07

編集2021/01/21 03:46

int32_t

総合スコア20872

uraurabow

2021/01/21 03:59

回答頂きありがとうございます。 HTMLのtocart()内の記述を以下のように変更しましたが、同じ事象が発生しました。 <script> function tocart(){ location.assign("http://example.co.jp/cart.php"); return false; } また、下記のinput type~の部分をそれぞれinput type="button"、button type="button"に修正する方法も試行しましたが、ボタンが動作しませんでした。 <input type="image" src="images/konyu.png" name="submit2" alt="購入する" class="btn03" value="購入する" onclick="tocart()"> </script> 試行する部分について上記の認識で間違いなかご教示頂けますと幸いです。

int32_t

2021/01/21 04:13

「return false」する場合は「onclick="return tocard()"」にする必要があります。 type="button" が「動作しません」というのはクリックしても何も起きないという意味ですか?

uraurabow

2021/01/21 04:32

回答の程ありがとうございます。「return false」する場合は「onclick="return tocard()"」にする必要があります。 →下記に要に記載し試してみました、 <script> function tocart(){ location.assign("http://example.co.jp/cart.php"); return false; } </script> HTML <input type="image" src="images/konyu.png" name="submit2" alt="購入する" class="btn03" value="購入する" onclick="return tocart()"> 上記のように修正した所クリックする度にページ再読み込みがされるようになりました。 type="button" が「動作しません」というのはクリックしても何も起きないという意味ですか? →はい、input type="image"をinput type="button"に書き換えて動作させてみた所、クリックしても何も起きませんでした。

int32_t

2021/01/21 04:57

何か書き間違いがないかどうかもう一度確認してください。開発者ツールでtocard()の冒頭にブレークポイントを仕掛けて、tocard()が呼ばれているかどうかを確認しましょう。

uraurabow

2021/01/21 06:01

再度、プログラムを確認し、tocart()冒頭にブレークポイントを設置して確認した所、tocart()の呼び出しは実施されていました。しかし、tocartは実施されず、action=""の自身に遷移が実施されるような動作でした。