JqueryMobileでフォームボタンを非表示

前へ 次へ
このQ&Aのポイント
  • JqueryMobileを使用している環境下でフォームボタンを非表示にする方法を探しています。
  • ID2のボタンが消えない問題について解決方法を教えてください。
  • JqueryMobileを使用していない環境では問題なくボタンが非表示になることを確認しています。
回答を見る
  • ベストアンサー

JqueryMobileでフォームボタンを非表示

JqueryMobileを使用している環境下でフォームボタンを非表示にする方法を探しています。 以下はID1の消去ボタンをクリックすると、ID2のボタンが消えることを期待しているものです。 しかし、ID2のボタンは消えませんでした。 どのような方法で、フォームボタンを非表示にできるのでしょうか。 なお、JqueryMobileを使用していない環境では、 問題なくID2のボタンが非表示になることを確認していますので、 JqueryMobile使用時のJavascriptの制限が何かしらありそうなのですが・・・。 <form name="myForm" action="#"> <input type="button" value="消去" name="button1" id ="1" onclick="a()"> <input type="button" value="消えるボタン" name="button2" id ="2" > </form> <script type="text/javascript"> <!-- function a(){ var n = document.getElementById("#2"); n.style.visibility = "hidden"; $('#2').button('refresh'); } // --> </script>

  • mmei
  • お礼率74% (120/161)

質問者が選んだベストアンサー

  • ベストアンサー
  • bornless
  • ベストアンサー率46% (7/15)
回答No.3

原因がわかりました。 jquery mobileでは、HTMLに対してjquery mobile側で動的にタグを追加してスタイリングを行います。 chrome等のブラウザのdeveloper tools(ページ上で右クリック、要素を検証)のelementタブで描画されているページのコードを見ることができますが、 そこで今回のコードのinputタグのあたりを見てみると、下記のようになっています。 ---------------------------- <div data-theme="c" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c" aria-disabled="false" style="display: none; "> <span class="ui-btn-inner ui-btn-corner-all"> <span class="ui-btn-text">消えるボタン</span> </span> <input type="button" value="消えるボタン" name="button2" id="button2" class="ui-btn-hidden" aria-disabled="false"></div> ---------------------------- このように、実際にはinputタグではなくinputタグの外側にdivタグを追加してそれに対してスタイリングを行い、ボタンとして表示しています。 故に、inputタグに対して"display: none"を指定しても意味はありません(外側のボタン本体であるdivタグは表示されっぱなしのため) そのため、ボタンを消すためにはinputタグの親であるdivタグに対して"display: none"を指定する必要があります。 実際のコードは下記のようになります。 ---------------------------- <script type="text/javascript"> (function($){ $("input[name=button1]").bind("click", function(event){ //parent()で親要素を取得、親要素(ここではdiv)に対してhide()を実行 $("input[name=button2]").parent().hide(); }); })(jQuery); </script> ---------------------------- 先に述べたように、jquery mobileではdivタグ等が勝手に追加されます。 動作がうまく行かないときはdeveloper tools(firefoxならfirebug)で実際に描画されているページがどのような構成になっているのか、確認することをおすすめいたします。

mmei
質問者

お礼

ありがとうございます！動作確認できました！ 様々な本やネットを調べていてもわからず諦めかけていたのですが、解決できました。また、chromeなどを用いた検証方法についても教えて頂きまして、今後のサイト開発に重宝します。

その他の回答 (2)

  • bornless
  • ベストアンサー率46% (7/15)
回答No.2

jQuery Mobileでは下記で消せます。 <script type="text/javascript"> (function($){ $("input[name=button1]").click(function(){ $("input[name=button2]").hide(); }); })(jQuery); </script>

mmei
質問者

お礼

ご指摘のスクリプトで試しましたが、消えませんでした・・・。 以下に該当ページのすべてのスクリプトを記載致します。 私がロードしているJqueryMobileのバグでしょうか？？？ <!DOCTYPE html> <html> <head> <meta charset="Shift_JIS" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <link type="text/css" href="js/jquery.mobile-1.0.min.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="js/jquery.mobile-1.0.min.js"></script> </head> <body> <div id="main" data-role="page"> <div data-role="header" data-position="inline" data-backbtn="false" data-theme="b"><h1>ボタン消し</h1> </div> <div data-role="content"> <form name="myForm" action="#"> <input type="button" value="消去" name="button1"> <input type="button" value="消えるボタン" name="button2"> </form> <script type="text/javascript"> (function($){ $("input[name=button1]").click(function(){ $("input[name=button2]").hide(); }); })(jQuery); </script> </div> </div> </body> </html>

回答No.1

何のためにjQueryを使っているんでしょう？ そんな印象のコードですね。 <form name="myForm" action="#"> <input type="button" value="消去" name="button1"> <input type="button" value="消えるボタン" name="button2"> </form> <script type="text/javascript"> <!-- $(function(){ $("input[name=button1]").click(function(){ $("input[name=button2]").hide(); }); }); } // --> </script> 補足 var n = document.getElementById("#2");　←「#」は要らないはず。本来は動かないはずだか、要素にアクセスしている。（おそらくブラウザが記述ミスを吸収している？） n.style.visibility = "hidden";　←ここで隠している。 $('#2').button('refresh'); ←ここでjQueryが再表示している リファレンス読むべし。 http://semooh.jp/jquery/

mmei
質問者

お礼

早々のご回答ありがとうございます。 教えていただいたコードで試しましたが、ボタンは消えませんでした・・・。 なお、以下の3行をヘッダーに記述しています。 <link type="text/css" href="js/jquery.mobile-1.0.min.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="js/jquery.mobile-1.0.min.js"></script> どのようにすれば、ボタン消去ができるのでしょうか？

mmei
質問者

補足

ヘッダーに記述したJquery関連の読み込みですが、 以下の三行を記述すると、ボタンは消えませんが、JqueryMobileの2行を消すと、ボタンが消えました。 JqueryMobileの環境下だと、ボタンが消せないのでしょうか・・・。 【OK】 <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> 【NG】 <link type="text/css" href="js/jquery.mobile-1.0.min.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="js/jquery.mobile-1.0.min.js"></script>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JqueryMobileでボタンの装飾

    JqueryMobileでサイトを作成中です。 以下のようなJavascriptで、ボタンをクリックすると、ボタンの表示名が 『Start』から『Stop』に変わる仕組みを検討中です。 JqueryMobileを使用しない場合には問題なく動作しますが、 なぜかJqueryMobileの関連ファイルをヘッダで読み込むと『Stop』に値が変わりません。 検索したところでは、リフレッシュ？やpage()が必要などの記述が見られるのですが、 以下のプログラムに対して、どのように使用すればよいのかわかりません。 JqueryMobileを用いている環境下で、ボタンの表示名を変更するには どのようにすればよろしいでしょうか。 <form name="myForm" action="#"> <div> <input type="text" size="20" name="myClick"> <input type="button" value="Start" name="myFormButton" onclick="myWatch()"> </div> </form> <script type="text/javascript"> <!-- function myWatch(){ document.myForm.myFormButton.value = "Stop!"; } // --> </script>

  • フォームに表示される文字をセンタリングさせたい。

    Javascriptの初心者です。宜しくお願いします。 テキストエリアが2つあったとします。 1のテキストエリアにある値を入力してボタンを押すと、 2のテキストエリアに1で入力した値をそのまま表示させ、 尚且つ表示された値をフォーム内でセンタリングさせたいのですが どうすればよいのかわかりません・・・。 ご存知の方がいらっしゃいましたら教えて下さい。 どうぞ宜しくお願い致します。 <html> <head> <script language="JavaScript"> <!-- function my1() { a=document.form1.text1.value; document.form1.text2.value=a; } //--> </script> </head> <body> <form name="form1"> <input type="texterea" name="text1"> <input type="texterea" name="text2"> <input type="button" value="CLICK!" onClick="my1()"> </form> </body> </html>

  • フォームボタンのvalueを渡すにはどうしたらいいのでしょうか？

    下記のソースのように「word」というテキストフィールドの 入力チェック後ボタンのvalueをword.phpに渡したいのですがどのようにしたらいいのでしょうか？ 入力チェックをせず input type="button"ではなくinput type="submit" にするとword.phpに渡せるのですが・・・ ようはＡ、Ｂ、Ｃそれぞれのボタンを押した時で word.phpでbtnのvalueをPOSTで受け取り 処理をvalue A、B、Cで分岐させたいんです。 よろしくお願いします。 <html> <head> <SCRIPT language="JavaScript"> <!-- function chk(chkfrm){ var tmp = chkfrm.word.value.length; if(tmp > 50 ){ alert("文字数が多すぎます"); } else{ chkfrm.submit(); } } //--> </SCRIPT> </head> <body> <form name="form" method="post" action="word.php"> <input name="word" type="text" id="word"> <input type="button" name="btn" value="A" onclick="chk(this.form);"> <input type="button" name="btn" value="B" onclick="chk(this.form);"> <input type="button" name="btn" value="C" onclick="chk(this.form);"> </form> </body> </html>

  • フォームの動作についてお願いします！

    <FORM NAME="form1"> <INPUT NAME="text1" TYPE="text"> <INPUT TYPE="button" value="表示" onclick="daialog()"> </FORM> <script language="JavaScript"> <!-- function daialog(){ 　alert(form1.text1.value) ; } --> </script> －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ と上のようにテキストボックスの中身をアラートで返すスクリプトが あるのですが、検索ページ(google等)のようにボタンを押さずとも、 エンターキーを押せばdaialog()が呼びだされるようにするには どうすればいいでしょうか。。。 <FORM>に関係がありそうなのでJavaScriptのカテゴリにじゃないかも しれませんが、どなたかよろしくお願いします！！

  • フォームの表示が消えてしまう・・・

    初歩的なことでつまづいております。 フォームを利用して「入力」フォームに文字を入れ、「入力！」ボタンを押すと「結果」フォームにその文字を表示させたいのですがうまくいきません。 やりたいことは、 １．「入力」フォームに文字を入れます（たとえば"123"） ２．「入力！」ボタンを押します ３．すると「結果」フォームに"123"と表示させたいです　 ４．また、「入力」フォームにはそのまま"123"が表示されたままにしたいです なぜか下記の記述だとボタンを押した瞬間にすべてのフォームの文字表示が消えてしまいます。 これはどうしてなのでしょうか？すみませんがよろしくお願いします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE="JavaScript"><!-- function calcButton() { var inputValue = document.calc.input.value; document.calc.result.value = inputValue; } //--></SCRIPT> </HEAD> <BODY> <FORM name="calc" action=""> 入力<INPUT type="text" size="5" name="input"><BR> 結果<INPUT type="text" size="5" name="result"><BR> <INPUT type="submit" value="入力！" onClick="calcButton()"> </FORM> </BODY></HTML>

  • AJAXで新規表示されたボタンが稼働しない

    下記のようなものを作りました。 1 通常は下記のような　<100購入>というボタンが表示されています。 <button class="button8" type="submit" name="volume" value="100">100購入</button> 2 <追加表示ボタン>を押すと、 <button class="button8" type="submit" name="volume" value="500">500購入</button>という<500購入>ボタンが新たに追加されます。 3 <100購入>ボタンか<500購入>ボタンを押すと、お好きな数値が購入できます。 前提条件 <100購入>ボタンは、当初から<form></form>内に直接記載されているボタンです。 <500購入>ボタンは、<追加表示ボタン>を押した際、AJAXにより、<form></form>内に新たに設置されるボタンです。 問題点 <100購入>ボタンは問題なく稼働します。 しかしながら、AJAXにより新たに設置された<500購入>ボタンを押しても、Formが稼働しません。 どのようにすれば、AJAXにより新たに設置された<500購入>ボタンが稼働するようになるでしょうか? よろしくお願いいたします。 +++++++++++++++++++++++++++++++++++++++++++++++++++ 当方が作ったソース <script type="text/javascript" src="./js/jquery.js"></script> <form action="abc.cgi" method="post" name="form1" id="form1"> <div id="msg">ここへ出力</div> <button class="button8" type="submit" name="volume" value="100">100購入</button </form> <BR> <button id="btn0">追加表示</button> <script type="text/javascript"> jQuery(function($){ $("#btn0") .click(function () { $.ajax({ beforeSend:function(BTN){ $("#msg").append("<BR>新規ボタンを表示します<BR>"); }, complete: function (BTN, textStatus) { $("#msg").append("<button class=\"button8\" type=\"submit\" name=\"volume\" value=\"500\">500購入</button><BR>"); } }); }); }); </script>

  • javascriptでinput属性の入力

    複数のボタンがあります。 それぞれのボタンによって、value値を変えたいと考えています。 通常であれば <button class='button' type='submit' name='volume' value='350'>350購入</button> <button class='button' type='submit' name='volume' value='450'>450購入</button> という形を利用しますが、理由があり、 type='submit' を使用できません。 そこで、 <input id="button350" type="button" value="350購入" /> <input id="button450" type="button" value="450購入" /> というsubmit属性の無いボタンを使用しながら、「javascriptを使いname value を抽出しsubmitまで持っていく」ことを考えています。 そこで、下記のようなものを2種類(350と450は別の記載方法でテスト)作ってみましたが、いずれもsubmitは出来ますが、value値を渡すことが出来ません。 どのように書けば、name属性にvalue値を渡すことが可能でしょうか? <form action="abc.php" method="post" name="form2" id="form2"> <script> $(function(){ $('#button350').click(function() { $('input[type=\'submit\']'); $('input[name=\'volume\']'); $('input[value=\'350\']'); $('#form2').submit(); }); $('#button450').click(function() { $('input[type=\'submit\'],[name=\'d4_buy_stock_volume2\'],[value=\'450\']'); $('#form2').submit(); }); }); </script> <BR> <BR> <input id="button350" type="button" value="350購入" /> <BR> <input id="button450" type="button" value="450購入" /> </form>

  • 複数ボタンを制御出来る2度押し防止ボタン

    HTML5+CSS3でゲームを作っています。 フォームがあり、ボタンが複数並んでいます。 <SCRIPT TYPE="text/javascript"> <!-- function sendform(){ submitForm(); } function submitForm(){ document.form1.submit(); } // --> </SCRIPT> <FORM action="buy.cgi" method="post" name="form1" id="form1"> <button class="button8" type="submit" name="d4_buy" value="300 onclick="sendform()">300購入</button> <button class="button8" type="submit" name="d4_buy" value="400" onClick="sendform()">400購入</button> </FORM> 上記で正常に作動しますが、3G環境など通信状態の悪い時に、「300購入ボタンを押した直後に400購入ボタンを押す」と700購入が出来てしまいます。 【希望事項】 2つのボタンを連続して押しても2つ目が無効になるようにしたいというのが希望です。 ネットで調べたところ ****************************************** http://okwave.jp/qa/q627484.html ****************************************** <HTML><BODY> <FORM method="get" action="http://www.google.com/search"> <INPUT type="submit" value="submit1" onclick="this.form.q.value=this.value;this.disabled=true;this.form.submit()"> <INPUT type="submit" value="submit2" onclick="this.form.q.value=this.value;this.disabled=true;this.form.submit()"> <INPUT type="hidden" name="q" value="" > </FORM></BODY></HTML> ****************************************** という例があったため、この例に従って <SCRIPT TYPE="text/javascript"> <!-- function sendform(){ submitForm(); } function submitForm(){ document.form1.submit(); } // --> </SCRIPT> <FORM action="buy.cgi" method="post" name="form1" id="form1"> <button class="button8" type="submit" value="300 onclick="this.form.q.value=this.value;this.disabled=true;this.form.sendform()">300購入</button> <button class="button8" type="submit" value="400" onclick="this.form.q.value=this.value;this.disabled=true;this.form.sendform()">400購入</button> <INPUT type="hidden" name="d4_buy" value="" > </FORM> としてみたのですが、うまく数値の引き渡しが出来ません。(NULL となります) どのように改造すればいいか教えてください。 よろしくお願いいたします。

  • 名無しformの操作

    以下のような、元々名前のないformが複数ある場合にボタンイベントで発生した共通のtest()関数内で処理を行う場合、どのフォームか識別できる方法はあるのでしょうか？ テスト1、をクリックした場合、テスト1のフォームの操作を行いたいです。 <script ....... function test(???) { document.どのフォームかわからない.action="/index.cgi"; document.どのフォームかわからない.a.value="1"; document.どのフォームかわからない.submit(); } </script> <form> <input type="hidden" name="a" value=""> <input type="button" value="テスト1" onclick="javascript:test(???)"> </form> <form> <input type="hidden" name="a" value=""> <input type="button" value="テスト2" onclick="javascript:test(???)"> </form> <form> <input type="hidden" name="a" value=""> <input type="button" value="テスト3" onclick="javascript:test(???)"> </form>

  • 2度押し防止ボタン

    HTML5 + CSS3 でスマートフォンゲームを作っています。 回線が混雑している状況でボタンを2度押ししても1回しかカウントされないボタンを作りたいと考えています。 【基本的な知見】 下記であれば要望に沿ったボタンになります。(ボタンはCSS3の標準ボタンを使用) <form action="form.cgi" method="post"> <input type="hidden" name="point" value="1" /> <SCRIPT TYPE="text/javascript"> <!-- //submitの2度押し防止 function disableButton(){ document.form1.button1.disabled = true; submitForm(); } function submitForm(){ document.form1.submit(); } // --> </SCRIPT> <input type="button" value="購　入" onClick="disableButton()" name="button1"> </form> 【やりたいこと】 「ボタンに数量を表示したいことと、ボタン上の数値表記とCGIに渡すvalueが異なることがある」ため、CSS3の標準ボタンを止め下記のオリジナルCSSのボタンを使用します。 <button class="button8" type="submit" name="point" value="1050" onClick="disableButton()"><div>50ポイント</div></button> このオリジナルCSSのボタンを使用した場合の2度押し防止のjavascriptはどのように改造すればいいか教えてください。 上記に示したjavascriptの 「document.form1.button1.disabled = true;」のbutton1をpointに変更したところ、数値をCGIに渡せませんでした。 よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する