質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

89.97%

別ウインドウでアラートを表示させたい（もしくはページリロードされないで注意文を表示させたい）

受付中

回答 0

投稿 ・編集

  • 評価
  • クリップ 0
  • VIEW 164
taktak777

taktak777

score 0

前提・実現したいこと

商品ページ内に２つカゴボタンを設置しています。
どちらのカゴも、セレクトボックスで何も選択されていない状態で
カゴボタンを押した時、別ウインドウでアラートを表示させたいです。
もしくは、ページリロードされないで注意文を表示させたい。

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

ECCUBEの商品ページのカスタマイズを行っております。
既存のカゴを複製して、２つ目を設置するところまでは出来ました。

既存のカゴの場合、セレクトボックスで何も選択せずにカゴボタンを押すと、
「カラーを選択してください」とアラートが表示されるのですが
複製したカゴボタンの場合にうまくアラートが表示されません。

■既存カゴの挙動
window.alertでアラート表示。

■複製したカゴの挙動
ページが一度リロードされてから、
別ウインドウではなくページ内に注意文が表示。

該当のソースコード

<!DOCTYPE HTML>
<html lang="ja" class="LC_Page_Products_Detail">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0" />
<meta name="format-detection" content="telephone=no">
<script src="/user_data/packages/sphone/js/jquery-1.7.min.js"></script>
<script src="/user_data/packages/sphone/js/jquery.mobile/jquery.mobile-1.0.1.min.js"></script>
<title>商品詳細ページ</title>
<script type="text/javascript">//<![CDATA[
    classCategories = {"__unselected":{"__unselected":{"name":"\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044","product_class_id":"16585","product_type":"1"}},"18":{"#":{"classcategory_id2":"","name":"\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044"},"#0":{"classcategory_id2":"0","name":"","stock_find":true,"price01":"21,240","price02":"14,980","point":"0","product_code":"miy-ar-tv01-db--","product_class_id":"16585","product_type":"1"}},"28":{"#":{"classcategory_id2":"","name":"\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044"},"#0":{"classcategory_id2":"0","name":"","stock_find":true,"price01":"21,240","price02":"14,980","point":"0","product_code":"miy-ar-tv01-lbr--","product_class_id":"16022","product_type":"1"}},"44":{"#":{"classcategory_id2":"","name":"\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044"},"#0":{"classcategory_id2":"0","name":"","stock_find":true,"price01":"21,240","price02":"14,980","point":"0","product_code":"miy-ar-tv01-wh--","product_class_id":"13011","product_type":"1"}}};function lnOnLoad(){fnSetClassCategories(document.form1, ""); }
    $(function(){
        lnOnLoad();
    });
//]]></script>
</head>
<body>


<script src="/js/products.js"></script>
<script>//<![CDATA[
    // 規格2に選択肢を割り当てる。
    function fnSetClassCategories(form, classcat_id2_selected) {
        var $form = $(form);
        var product_id = $form.find('input[name=product_id]').val();
        var $sele1 = $form.find('select[name=classcategory_id1]');
        var $sele2 = $form.find('select[name=classcategory_id2]');
        setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
    }
//]]></script>


<!-- ***************** 通常カゴボタン ***************** -->

<form name="form1" id="form1" method="post" action="/products/detail.php">
<input type="hidden" name="transactionid" value="6d2cf4aa2aff0db30b9f3a73d9bcd5b040ab9c8c" />
<input type="hidden" name="mode" value="cart" />
<input type="hidden" name="product_id" value="3709" />
<input type="hidden" name="product_class_id" value="16585" id="product_class_id" />
<input type="hidden" name="favorite_product_id" value="" />

<div>
<!--▼買い物かご-->
<div class="cart_area">
    <dl id="cart_color">
    <!--▼規格1-->
        <dt>カラー</dt>
        <dd>
        <select name="classcategory_id1" style="" data-mini="true">
            <optgroup label="">
            <option label="選択してください" value="__unselected">選択してください</option>
            <option label="ダークブラウン" value="18">ダークブラウン</option>
            <option label="ライトブラウン" value="28">ライトブラウン</option>
            <option label="ホワイト" value="44">ホワイト</option>
            </optgroup>
        </select>
    </dd>
    <!--▲規格1-->
    </dl>
    <dl id="cart_quantity">
        <dt>数量</dt>
        <dd>
            <input type="number" name="quantity" class="quantitybox" value="1" max="9" style="" />
        </dd>
    </dl>
</div>

<div class="cartin_btn">
    <!--★カートに入れる★-->
    <div id="cartbtn_default">
        <a rel="external" href="javascript:;" id="btn-cartin" class="btn cartbtn_default">買い物カゴに入れる</a>
    </div>
    <div class="attention" id="cartbtn_dynamic"></div>
</div>
<!--▲買い物かご-->
</div>
</form>


<!-- ***************** //通常カゴボタン ***************** -->


<!-- ***************** フローティング化カゴボタン ***************** -->
<form name="form2" id="form2" method="post" action="?">
<input type="hidden" name="transactionid" value="6d2cf4aa2aff0db30b9f3a73d9bcd5b040ab9c8c" />
<input type="hidden" name="mode" value="cart" />
<input type="hidden" name="product_id" value="3709" />
<input type="hidden" name="product_class_id" value="16585" id="product_class_id" />
<input type="hidden" name="favorite_product_id" value="" />
<input type="hidden" name="quantity" value="1" />
<div id="floatingCartWrap">
<!--▼買い物かご-->
    <div class="cart_area">
        <dl id="cart_color">
        <!--▼規格1-->
        <dd>
        <select name="classcategory_id1" style="" data-mini="true">
            <optgroup label="">
            <option label="選択してください" value="__unselected">選択してください</option>
            <option label="ダークブラウン" value="18">ダークブラウン</option>
            <option label="ライトブラウン" value="28">ライトブラウン</option>
            <option label="ホワイト" value="44">ホワイト</option>
            </optgroup>
        </select>
        </dd>
        <!--▲規格1-->
        </dl>
    </div>

    <div class="cartin_btn">
        <!--★カートに入れる★-->
        <div id="cartbtn_default">
            <a rel="external" href="javascript:void(document.form2.submit())" id="btn-cartin" class="btn cartbtn_default">カゴに入れる</a>
        </div>
        <div class="attention" id="cartbtn_dynamic"></div>
    </div>
<!--▲買い物かご-->
</div>
</form>
<!-- ***************** //フローティング化カゴボタン ***************** -->


<!--通常カゴボタン 選択なし時のアラート表示-->
<script>
$(function(){
  $('#btn-cartin').click(function(){
        if ($('select[name=classcategory_id1]').val() == '__unselected') {
      window.alert('カラーを選択してください。');
      return;
    }
    $('form#form1').submit();
  });
});
</script>



</body>
</html>

試したこと

既存アラート部分のスクリプトを複製し、
・#form → #form2
・#btn-cartin → #btn-cartin2
・該当html部分のIDも#btn-cartin → #btn-cartin2
としましたがうまくいきませんでした。 

  $('#btn-cartin2').click(function(){
    <!--{if $tpl_classcat_find1}-->
    if ($('select[name=classcategory_id1]').val() == '__unselected') {
      window.alert('<!--{$tpl_class_name1|h}-->を選択してください。');
      return;
    }
    <!--{/if}-->

    <!--{if $tpl_classcat_find2}-->
    if ($('select[name=classcategory_id2]').val() == '__unselected') {
      window.alert('<!--{$tpl_class_name2|h}-->を選択してください。');
      return;
    }
    <!--{/if}-->

    $('form#form2').submit();
  });

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

ECCUBE　2.12.2 
PHP     5.4.16

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

more_vert3 件の質問への追記・修正依頼

質問への追記・修正の依頼

  • yambejp

    yambejp

    2019/09/20 10:12

    ソースはHTMLとして提示ください
    回答者の環境によっては現在正しいとされる挙動も再現できません

    キャンセル

  • m.ts10806

    m.ts10806

    2019/09/20 11:05

    セレクトの中身見るだけならPHPは関係ないような

    キャンセル

  • taktak777

    taktak777

    2019/09/20 17:45

    >yambejp
    ECCUBE独自タグ等をHTMLに変更して再登録いたしました。

    キャンセル

まだ回答がついていません

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

  • ただいまの回答率 89.97%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る

  • トップ
  • PHPに関する質問
  • 別ウインドウでアラートを表示させたい（もしくはページリロードされないで注意文を表示させたい）