🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

Q&A

1回答

971閲覧

aタグとformタグのサブミットを同時に発火する方法について

takachantomoya

総合スコア0

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

0グッド

2クリップ

投稿2021/03/14 08:44

編集2021/03/14 09:24

初めまして。
現在自社ECを運営する中で新たに選択している商品とは別に選択肢に応じた異なる商品も同時にカート入れたいと思っています。
PCでは挙動しているのですが、iPhone・iPadなどのiOS端末では挙動せずに非常に困っています。
同時に挙動できないならuserAgentなどで分岐して処理してもいいかなと思っているのですが、そもそもiOSで意図している通りに挙動してくれないため、その方法についてご教示いただければとおもい、質問させていただきました。

いかんせんあまりJSに詳しくないため伝わりづらい内容かと思いますが何卒アドバイスいただけますようご協力のほどよろしくお願いいたします。

前提・実現したいこと

カートシステム(makeshop)にてメインの商品とは別に同時違う商品をカートインさせたい。
PC(WIN)では挙動しているため、iOSで挙動させたい
違う商品とはラッピングの種類でmakeshopの「カゴだけmakeshop」という機能を応用しています。

発生している問題・エラーメッセージ

iOSで挙動しない。
挙動内容は下記の通りになります。

WIN・・・メインの商品+サブの商品(ラッピング)どちらもカートイン
iOS・・・ラッピングしかカートインされない
→preventDefaultが効いてるため?であればPC側の挙動がおかしいということ?

該当のソースコード

HTML

1<div id="send"> 2 <input type="text" data-id="makeshop-item-quantity" value="1" class="item-detail-num"> 3 <div class="makeshop-option-wrap"> 4 <label class="makeshop-option-select-wrap"> 5 <select data-id="makeshop-item-option1" class="makeshop-option-select"> 6 <option value="0" class="makeshop-option-select-item makeshop-option-select-title">--選択してください</option> 7 <option value="1" class="makeshop-option-select-item" >BLACK</option> 89 </select> 10 </label> 11 </div> 12 <div class="makeshop-option-wrap"> 13 <label class="makeshop-option-select-wrap"> 14 <select data-id="makeshop-item-option2" class="makeshop-option-select"> 15 <option value="0" class="makeshop-option-select-item makeshop-option-select-title">--選択してください</option> 16 <option value="1" class="makeshop-option-select-item" >TOP【01】/BOTTOM【00】</option> 1718 </select> 19 </label> 20 </div> 21 22 <form action="https://###.com/api/basket/add.html" method="post" id="wrappingFlg" name="wrapping" class="makeshop-option-wrap"> 23 <label class="makeshop-option-select-wrap"> 24 <select name="brand_info"> 25 <option selected value="string(0)" class="makeshop-option-select-item">ラッピング不要</option> 26 <option value="1,000000000026,1" class="makeshop-option-select-item">ラッピングA</option> 27 <option value="1,000000000025,1" class="makeshop-option-select-item">ラッピングB</option> 28 <option value="1,000000000024,1" class="makeshop-option-select-item">ラッピングC</option> 29 </select> 30 </label> 31 </form> 32 33 34 <a href="#makeshop-item-cart-entry-url:1" id="add_cart">ADD TO CART</a> 35</div>
JavaScript <script> $(document).ready(function ($) { var checkIn = document.getElementById('add_cart'); checkIn.addEventListener( 'click', wrappingFlg, { passive: false} ); function wrappingFlg(e) { e.preventDefault(); $('#wrappingFlg').submit(); return true; } }); </script>

試したこと

aタグによる遷移が正しくないと仮定して、下記の記述を使って強制的に遷移

javaScript var linkUrl = $('#add_cart').attr('href'); function action() { location.href = linkUrl; } setTimeout(action,1000);

補足情報(FW/ツールのバージョンなど)

makeshopの仕様なのかメインの商品のリンクは「#makeshop-item-cart-entry-url:1」となるようです。
またカゴだけmakeshopのほうはformタグで囲ってsubmitさせる方法となり、「https://###.com/api/basket/add.html」にPOSTさせる方法になるようです。

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

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

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

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

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

guest

回答1

0

aタグとformタグのサブミットを同時に発火

もし同じページに両方処理をすることを想定しているのでしたら
競合する処理なのでできないものと理解してください

飛び先が複数あるならどちらかを

  • ajax的な処理にするか
  • ターゲットを設定して別ウィンドウに飛ばす

かでしょう。

投稿2021/03/15 05:16

編集2021/03/16 01:24
yambejp

総合スコア116694

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問