新着情報

株式会社アースリンク > 開発者ブログ > intra-mart > 【備忘録:研修課題(intra-mart)】ボタンの無効化:disabledの使用

【備忘録:研修課題(intra-mart)】ボタンの無効化:disabledの使用

 

こんにちは!おにぎりちゃんですよ\(^o^)/
今回もよろしくお願いします\(^o^)/!!
 
 
さて今回はボタンの無効化について書いていこうと思います。
l_080
 
投稿の即時反映の記事の中で商品詳細画面での必要な処理について書いたのですが、
その中のひとつにレビューの表示がありました。
 
レビューの表示の要件として見た人がGOODボタン・BADボタンでレビューの評価ができなければなりませんでした。
 
評価ができなければいけないということは、ボタンを押した後テーブル内の数値を更新するようにしてあげれば良いですよね。
 

var sqlGood = "UPDATE product_review SET good = good + 1 WHERE user_id = (ユーザID) AND product_id = (商品ID) " ;
var resGood = tdb.execute(sqlGood);

 

var sqlBad = "UPDATE product_review SET bad = bad + 1 WHERE user_id = (ユーザID) AND product_id = (商品ID) " ;
var resBad = tdb.execute(sqlBad);

 
上記のようにSQLのUPDATE関数を使用すれば、レビューの数を追加してあげることができますねcheeky

 
 
しかし、これだけでは何回もレビュー評価ができてしまいますね……
 
 
ここで登場するのがdisabled属性です。
 
 
ボタンや入力フォーム等をユーザが操作できないように無効化することができます。
disabledはhtml内で使用される要素になるので、下記のように書いてあげます。
 

<imart type="submit" name="good" value="" disabled />
<imart type="submit" name="bad" value="" disabled />

 
これでボタンの無効化ができました!!!!!わーい(*´▽`*)!
 
しかし、ここでまた問題が起こることに気が付きましたでしょうか…
 
 
 
これではページを開いた時点でボタンが押せなくなっていないかsurprise!?
 
 
 
これではレビューの評価ができるという要件を満たすことができていません。
では、どうすればボタンを押した後に無効化することができるのでしょうか。
 
調べてみたところ、disabledは属性値をboolean型で指定することにより無効有効を切り替えることができるそう。
つまり!trueである場合は無効、falseである場合は有効とすることができるわけです。
 
今回の研修課題の中ではどちらかボタンを押したときだけtrueになるようにフラグを立てて判別させるようにしました。
 

goodDisabledFlg = false;
badDisabledFlg = false;
if( goodボタン押下時 || badボタン押下時 ){
 goodDisabledFlg = true;
 badDisabledFlg = true;
}

 
あとはHTMLのIMARTタグ内のdisabled属性値に変数名を指定してあげればOKですyes(^o^)
 

<imart type="submit" name="good" value="" disabled=goodDisabledFlg />
<imart type="submit" name="bad" value="" disabled=badDisabledFlg />

 
こうすればボタンが押されるまではdisabled=falseとなるのでボタンは有効なままページを開くことができ、
GOODボタン・BADボタンどちらかが押されたときに両方無効にすることが可能となります。
 
 
 
しかしここでまた違う問題が発生してしまうのですが、それについては次回書いていきたいと思います!
 
 
 

2017年08月18日(金)

テレマーケティングシステムsakuraトライアル

コールセンターシステム sakuraCTI

資料請求

お問合わせ

コラム

用語集

開発者ブログ

イントラマート

Sakuraテレマーケティングシステム

 

 

インフラソリューションのご案内

導入事例

認証マーク

アースリンクは
プライバシーマークを
取得しています。

プライバシーポリシー


SSLとは?

当サイトでは、実在性の証明とプライバシー 保護のためSSLサーバ証明書を使用しSSL 暗号化通信を実現しています。

このページの先頭へ