- 締切済み
javascript ボタンを非表示にしたい
javascriptを学習しています。 3回目以降は追記できないようにしましたが、ボタンを非表示に出来ておりません。 どなたかご教授お願いいたします。 <!DOCTYPE html> <html> <head> <title>アカウント登録</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="base container"> <div class="row"> <h1>アカウント登録</h1> </div> <div class="row"> <div class="card" id="card"> <div class="card-block"> <form id="form-area" class="form-inline" method="post"> <div class="form-group"> <div class="input-group"> <input id="namae" name="namae" type="text" class="form-control" placeholder="名前"> </div> </div> <div class="form-group"> <div class="input-group"> <input id="nickname" name="nickname" type="text" class="form-control" placeholder="ニックネーム"> </div> </div> <div class="form-group"> <input id="tuikaBtn" type="button" name="touroku" value="追加"> </div> <table id="result-table"> <thead> <tr> <th>名前</th> <th>ニックネーム</th> <th>削除</th> </tr> </thead> </table> </form> <div id="tuikaMoto"> </div> <div id="result"></div> </div> </div> </div> </div> </div> <div id="overLay"> </div> <script> class NameTable { constructor() { this.data = []; this.table = document.getElementById('result-table'); this.tbody = this.table.createTBody(); this.btn = document.getElementById("tuikaBtn"); this.input_namae = document.getElementById("namae"); this.input_nickname = document.getElementById("nickname"); } handleEvent(e) { if (e.target === this.btn) { const name_value = this.input_namae.value, nickname_value = this.input_nickname.value; if (this.checkTsuika(name_value, nickname_value)) { this.pushData(name_value, nickname_value); this.createTable(); }; } else if (e.target.matches('.del')) { this.clickDel(e.target); } } pushData(name, nickname) { /* DBなどに追加する場合は、ここでfetchなどで通信 */ this.data.push({ name: name, nickname: nickname }); window.alert(`「[${name}]さん[${nickname}]にて登録しました。」`); this.input_namae.value = ''; this.input_nickname.value = ''; if (this.data.length > 2) { Object.assign(this.btn, { value: '', disabled: true, }); } } createTable() { while (this.tbody.firstChild) { this.tbody.removeChild(this.tbody.firstChild); } this.data.forEach(d => { const tr = this.tbody.insertRow(-1); tr.insertCell(0).appendChild(document.createTextNode(d.name)); tr.insertCell(1).appendChild(document.createTextNode(d.nickname)); const input_del = document.createElement('input'); Object.assign(input_del, { type: 'button', value: '削除', className: 'del', }); tr.insertCell(2).appendChild(input_del); }); } checkTsuika(name, nickname) { if (name === "" || nickname === "") { return false; } return window.confirm(`「[${name}]さん[${nickname}]を登録します。よろしいですか？」`); } clickDel(target) { /* fetchなどで削除を送信 */ const dels = [...this.tbody.querySelectorAll('.del')]; this.data = this.data.filter((_, i) => dels[i] !== target); this.createTable(); Object.assign(this.btn, { value: '追加ボタン', disabled: false, }); } } // 実行 window.addEventListener('DOMContentLoaded', () => { const table = new NameTable(); document.addEventListener('click', table, false); }); </script> </body> </html>
- suzuki0502
- お礼率0% (0/2)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- JavaScriptでIE上のボタンクリック
JavaScriptの初心者でIE上で表示されたボタンをクリックしたいのですが、2つのボタンのうち1つをクリックしたいです。 「document.all("Buttonok").click();」,「document.getElementById("Buttonok").click();」と記入してみたのですが、エラーとなります。 下記のようなボタンをJavaScriptで押すにはどうしたらいいのでしょうか？ どなたかすいませんがご教授ください。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ボタンのHTML ※formで囲まれてないです。 <table border="0" cellspacing="0" cellpadding="0" width="150"> <tr> <td width="50%"> <div id="Button"> <input type="buttonok" value="OK" class="Button" onclick="onClk("1");" /> </div> <div id="Button"> <input type="buttonng" value="NG" class="Button" onclick="onClk("0");" /> </div> </td> </tr> </table>
- ベストアンサー
- JavaScript
- formの中で別のactionをもったsubmitボタンの設置。
formの中で別のactionをもったsubmitボタンの設置。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <title>sample</title> <script language="JavaScript" type="text/javascript"> <!-- //＜クリックした時に実行される関数＞ //*** 送信画面 function func1(form){ document.form1.text.value =form.text.value; document.form1.file.value =form.file.value; document.form1.dummy.value =form.dummy.value; document.form1.submit(); } //*** ユーザー追加画面 function func2(form){ document.form2.text.value =form.text.value; document.form2.file.value =form.file.value; document.form2.dummy.value =form.dummy.value; document.form2.submit(); } //--> </script> </head> <body class="index"> <form enctype="multipart/form-data"> <table id="table" width="100%"> <tr><th width="10%">テキスト</th><td><input type="text" name="text"> <br /> <div style="text-align:left;"> <input type="button" onClick="func2(this.form)" value="テキスト確認"> </div> </td></tr> <tr><th width="10%">添付</th><td><input type="file" name="file"></td></tr> </table> <div style="text-align:left;"> <input type="button" onClick="func1(this.form)" value="確認"> </div> </form> <!-- sousin.php画面へ --> <form method="post" name="form1" action="sousin.php" enctype="multipart/form-data"> <input type="hidden" name="text"> <input type="hidden" name="file"> <input type="hidden" name="dummy"> </form> <!--- text.php画面へ ---> <form method="post" name="form2" action="text.php" enctype="multipart/form-data"> <input type="hidden" name="text"> <input type="hidden" name="file"> <input type="hidden" name="dummy"> </form> </body> </html> 上記のように記述し、フォームの中に別のactionをもったsubmitボタンを設置しました。 textの内容は渡せるのですが、添付したいファイルを渡すことができません。 添付ファイルも渡せるようにするにはどうすればよいのでしょうか
- ベストアンサー
- HTML
- input type ボタン
お世話になります。 inputtype ログインボタン・検索ボタンの事で、お尋ねいたします。 あちらこちらのサイトを参考にログインと検索ができるプログラムを 真似て作成いたしています。初めての事で内容も半分ぐらいしか理解出来ていないままのスタートです。 参考サイトのhtml部分・CSSソースを作りかけの自分のサイトに記載しますとログインボタンと検索ボタンのレイアウトが崩れて 表示されません。 何が原因なのか不明のままです！！ お手数かけますが、ご指導お願い申しあげます。 下記に簡単にinputの部分だけソースを書きますので宜しくお願い いたします。 また別ページ（新規に）html＜body＞～＜body＞間に同じソースを 書きますと検索ボタンもログインボタンもきちっと表示されます。 中身のプログラムソースに入る前にレイアウトを先に手掛けたのですが 意気消沈しています。 他のCSSとかjavascriptかのソースと競合するのでしょうか？ 解らない事ばかりです。 奇麗に表示ができれば幸いです。 宜しくお願い申し上げます。 googleサーチのinputです。 <div class="entry_search"> <form method="get" action="http://www.google.co.jp/search" target="_parent"> <table width="166" border="0" bgcolor="#ffffff"> <tbody> <tr> <td width="160" height="32" align="left" valign="top" nowrap="nowrap"><a href="http://www.google.co.jp" target="_blank"> <img src="imges/common/poweredby_google.gif" alt="Google" border="0" /></a> <br /> <input type="text"name="q" size="17" maxlength="255" value="" /> <input type=hidden name=ie value=Shift_JIS /> <input type=hidden name=oe value=Shift_JIS /> <input type="hidden" name="hl" value="ja" /> <input type="hidden" name="domains" value="#" /> <input type="submit" name="btnG" value="検索" /></td> </tr> <tr> <td nowrap="nowrap"><table> <tbody> <tr> <td ><input type="radio" name="sitesearch" value=" " /> <font color="#000000" size="-1">Web</font></td> <td><input type="radio" name="sitesearch" value="#" checked="checked" /> <font color="#000000" size="-2">サイト内</font></td> </tr> </tbody> </table> <input name="client" value="pub-5778690733142083" type="hidden" /> <input type=hidden name=ie value=Shift_JIS /> <input type=hidden name=oe value=Shift_JIS /> <input type=hidden name=hl value="ja" /> <input name="cof" value="GALT:GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:ffffff;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1;" type="hidden" /> <input type="hidden" name="hl" value="ja" /></td> </tr> </tbody> </table> </form> こちらがログオンの一部です。 <div class="AA_approach_b"> <h4 class="AA_blockHead AA_loginHead">ログイン</h4> <form name="login" action="#" method="post"><input name="action" value="login" type="hidden"> <input name="#" value="4b96bbf140d2a3cb9821cc2cba76395e21feb0f5b9ab041b561f0a03fc15ef2a" type="hidden"><table class="bestfood_loginTable"> <tbody><tr> <th class="CC_th">E-mail</th> <td class="CC_td"><input name="loginEmailAddress" value="" type="text"></td> </tr> <tr> <th class="CC_th">password</th> <td class="CC_td"><input name="loginPassword" value="" type="password"></td> </tr> <tr> <td colspan="2" button type="class="CC_submit" value="submit"> <input value="ログイン" type="submit"> </button> </td> </tr> </tbody></table> <div class="AA_annotation"><a href="#">パスワードをお忘れの方</a></div> <input name="referer" value="block" type="hidden"> </form> 上記の他にCSSと手元にCGIソースがあります。 お手数ですが宜しくお願い申し上げます。 初めての事ですので表現や考えに間違いありますればご容赦を....!!
- 締切済み
- その他([技術者向] コンピューター)
- クリアボタンの動作について その３
ご存知の方、ご教授くださいm(__)m クリアボタンの動作についてその２、の続きです。 現在、画面上で表示された表項目を消去するために表データクリアボタンを設置しており、 画面中の、表データを削除したいと考えています。 現状のHTMLは以下のようなものです。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $().ready ( function() { $('.buttons :button[name=clear]').click ( function() { alert('come!'); $('input[type="text"]').not('[disabled="disabled"]').val ( '' ); $('input[type="checkbox"]').removeAttr ( 'checked' ); }); $('.buttons :button[name=clear_table]').click ( function() { alert('come2!'); //<tbody>の中身を消すコード }); }); </script> <style type="text/css"> </style> </head> <body id="main"> <form> <input type="text" name="n1"> <input type="text" name="n2"> <input type="text" name="n1" value="3" disabled> <hr> <input type="checkbox" value="2"> <input type="checkbox" value="2"> <hr> <button type="button" name="clear">クリア</button> <button type="button" name="table_clear">表クリア</button> </form> <div class="data_area"> <table id="schedule_head_table" class="data_table" border=1> <thead> <tr> <th width="60">No.</th> <th width="100">品名コード</th> </tr> </thead> <tbody id=tbody> <tr> <td><div class=right-align>1</div></td> <td>item_code</td> </tr> </tbody> </table> </div> </body> </html> 解決方法を教えていただけると助かります。 もし可能であれば、クリアボタン自体が動作しない理由も教えていただれば、今後の参考にさせていただきます。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 編集ボタンクリックと同時に社員番号を渡したい
お世話になります。 データベースに登録している、社員情報を呼び出してJSPで一覧表示してます。 その際、テーブル一行単位 に編集ボタンを配置してます。 で、社員情報を編集の際、行に配置された編集ボタンをクリックしてサーブレットに社員番号を渡したいのですが上手くできません。 解決策を教えてください。よろしくお願いします。 <div id="content"> <h1>社員一覧</h1> <form method="post" action="EmployeeCall"> <table> <thead> <tr> <th>店舗名</th> <th>部署</th> <th>社員番号</th> <th>社員名前</th> <th>/</th> </tr> </thead> <% if(employeeList != null) { for(EmployeeDTO employee : employeeList) { %> <tbody> <tr> <td><%=employee.getAbbreviatedStoreName() %></td> <td><%=employee.getDepartmenName() %></td> <td><%=employee.getEmployeeID() %><input type="hidden" name="employeeID" value="<%=employee.getEmployeeID() %>" /></td> <td><%=employee.getLastName() + employee.getFirstName() %></td> <td><input type="submit" class="editingProcess" name="edit" value="編集"/></td> </tr> </tbody> <% } } %> </table> </form> </div>
- ベストアンサー
- Java
- MTOS内のページに設置したメールフォームについて
いつもみなさんのアドバイスを参考にさせて頂いております。 早速ですが、ＭＴサイト内にメールマガジンのフォームを設置したところ、実際に名前とメールアドレスを入力し送信ボタンを押しても名前が入力されていませんなどとエラーが表示されます。 メールマガジン自体は他サイトで使用しているものでメールマガジンで使用しているＣＧＩも他サイトのサーバにて稼動しております。 ところが、使用しているタグ<form> ～ </form>までをそのままＭＴに貼り付けて設置してみてもうまく運用できません。 何か問題があるのでしょうか？ ちなみにタグは以下の通りです。 <div id="mail_maga"> <form action="http://www.***/***.cgi" method="post"> <table id="AutoNumber1"><tbody><tr> <td colspan="2" class="mail_magat">☆ メルマガ登録</td> </tr><tr> <td class="mail_magast">お名前</td> <td class="mail_magain"><input type="text" name="お名前" size="30"></td> </tr><tr> <td class="mail_magast">メールアドレス</td> <td class="mail_magain"><input type="text" name="メールアドレス" size="30"> 半角英数字</td> </tr></tbody></table> <table id="AutoNumber2" class="mail_maga2"><tbody><tr> <td> <input type="hidden" size="1" name="code" value="0000a" /> <input type="hidden" size="1" name="mlcd" value="0000a" /> <input type="hidden" size="1" name="key01" value="2542666" /> <input type="hidden" size="1" name="HPADDR" value="http://www.***/***.html" /> <input type="submit" name="mode" value="送信" /> <input type="submit" name="mode" value="内容確認" /> <input type="reset" value="リセット" /> </td> </tr></tbody></table> </form> 何かアドバイスありましたら宜しくお願いします。
- 締切済み
- CGI
- htmlのformの表示について【Jquery】
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript"> function formChanged(ev){ var sel = $('.chk:checked').map(function () { return this.checked ? this.value : null; }).get().join(); $("#output").text(sel); } formChanged(null); $(document).on("change",'.chk:checked',formChanged); </script> <form method="post" action="mail.php"> <table> <tr> <th>カテゴリー</th> <td> ・ABC： <input type="checkbox" name="カテゴリー[]" value="[abc]" class="chk" /> ・DEF： <input type="checkbox" name="カテゴリー[]" value="[def]" class="chk" /> ・GHI： <input type="checkbox" name="カテゴリー[]" value="[ghi]" class="chk" /> </tr> <tr> <th>選択した製品シリーズ</th> <td><span id="output"></span></td> </tr> <tr> </table> </form> これは、チェックボックスにチェックをいれたチェックボックスの値がリアルタイムに表示される仕組みなのですが、逆にチェックを外した場合は、値が消えません。消えるようにするにはどうしたらいいでしょうか。アドバイスをいただけると幸いです。
- 締切済み
- JavaScript
- javascript ボタンによる表示について
javascriptのボタンによる表示について質問があります． 質問内容と致しましては，ボタンを表示した時に隠れている問題文を出現させるソースを作っているのですが，うまくプログラムが動作しません． おそらく，window.onloadの使い方が理解しきれてないからだとは思いますが， よくわかりませんので質問させていただきました． 回答の方よろしくお願いします． 以下ソースです． <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function hideForm1(){ document.getElementById("formblock1").style.display = "none"; } function showForm1() { document.getElementById("formblock1").style.display = "block"; } window.onload = function(){ hideForm1(); }; function hideForm2(){ document.getElementById("formblock2").style.display = "none"; } function showForm2() { document.getElementById("formblock2").style.display = "block"; } window.onload = function(){ hideForm2(); }; function hideForm3(){ document.getElementById("formblock3").style.display = "none"; } function showForm3() { document.getElementById("formblock3").style.display = "block"; } window.onload = function(){ hideForm3(); }; function send(){ function chk1(frm, names){ var r = true; for(var i = 0; i < names.length; i++) r &= (frm.elements[names[i]].value !=""); return r; } var r = true; r &= chk1(document.forms['nform'],['kaitouran11','kaitouran12','kaitouran13','kaitouran14','kaitouran21','kaitouran22','kaitouran23','kaitouran24','kaitouran31','kaitouran32','kaitouran33','kaitouran34']); if(r){ document.forms['nform'].submit(); }else{ alert('解答欄に空白があります'); } } </script> </head> <body> <form> <input type="button" value="問題1" onclick="showForm1(); this.disabled = true;"/> </form> <form> <input type="button" value="問題2" onclick="showForm2(); this.disabled = true;"/> </form> <form> <input type="button" value="問題3" onclick="showForm3(); this.disabled = true;"/> </form> <form name="nform" method="post" action="./kaitou1.php" enctype="multipart/form-data"> <div id="formblock1"> <p> 問題1</p> <p>問題文</p> <p> (1)<input type="text" name="kaitouran11" size="14"> (2)<input type="text" name="kaitouran12" size="14"> (3)<input type="text" name="kaitouran13" size="14"> (4)<input type="text" name="kaitouran14" size="14"> </p> </div> <div id="formblock2"> <p> 問題2</p> <p>問題文</p> <p> (1)<input type="text" name="kaitouran21" size="14"> (2)<input type="text" name="kaitouran22" size="14"> (3)<input type="text" name="kaitouran23" size="14"> (4)<input type="text" name="kaitouran24" size="14"> </p> </div> <div id="formblock3"> <p> 問題3</p> <p>問題文</p> <p> (1)<input type="text" name="kaitouran31" size="14"> (2)<input type="text" name="kaitouran32" size="14"> (3)<input type="text" name="kaitouran33" size="14"> (4)<input type="text" name="kaitouran34" size="14"> </p> </div> </form> <input type="button" value="送信" onclick="send()"> </body> </html>
- ベストアンサー
- JavaScript
- jsでラジオボタンによって表示内容を変えたい
とても困っているのでお力をお貸しください。 HTML側に ==================================================== <table summary="条件問題"> <tr> <th>問題1</th> <td> <ul> <li><input type="radio" name="AAAAAA" value="あああ" id="a1" onclick="mondaiChange1();"/> <label for="a1"> あああ</label></li> <li><input type="radio" name="AAAAAA" value="いいい" id="a2" onclick="mondaiChange1();"/> <label for="a2"> いいい</label></li> <li><input type="radio" name="AAAAAA" value="ううう" id="a3" onclick="mondaiChange1();"/> <label for="a3"> ううう</label></li> <li><input type="radio" name="AAAAAA" value="えええ" id="a4" onclick="mondaiChange1();"/> <label for="a4"> えええ</label></li> <li><input type="radio" name="AAAAAA" value="おおお" id="a5" onclick="mondaiChange1();"/> <label for="a5"> おおお</label></li> </ul> </td> </tr> </table> <div class="TableA"> <table summary="問題その2" id="TableA"> <tr> <th>Q1</th> <td> <ul> <li> <input type="radio" value="はい" id="b1" name="BBBBBBB" /> <label for="b1"> はい</label> </li> <li> <input type="radio" value="いいえ" id="b2" name="BBBBBBB" /> <label for="b2"> いいえ</label> </li> </ul></td> </tr> </table> <div class="TableB"> <table summary="問題その2" id="TableB"> <tr> <th>Q1</th> <td> <ul> <li> <input type="radio" value="はい" id="b1" name="BBBBBBB" /> <label for="b1"> はい</label> </li> <li> <input type="radio" value="いいえ" id="b2" name="BBBBBBB" /> <label for="b2"> いいえ</label> </li> </ul></td> </tr> </table> ========================== と記載。 includeしているjsファイル側に ========================== function mondaiChange1(){ radio = document.getElementsByName('AAAAAA') if(radio["a1"].checked) { //フォーム document.getElementById("TableA").style.display = "none"; document.getElementById("TableB").style.display = ""; } else if(radio["a2"].checked) { //フォーム document.getElementById("TableA").style.display = ""; document.getElementById("TableB").style.display = "none"; } else if(radio["a3"].checked) { //フォーム document.getElementById("TableA").style.display = "none"; document.getElementById("TableB").style.display = ""; } else if(radio["a4"].checked) { //フォーム document.getElementById("TableA").style.display = ""; document.getElementById("TableB").style.display = "none"; } else if(radio["a5"].checked) { //フォーム document.getElementById("TableA").style.display = "none"; document.getElementById("TableB").style.display = ""; } //オンロードさせ、リロード時に選択を保持 window.onload = mondaiChange1; } ========================== としているのですが、これだと最初にアクセスしたとき 問題その2のTableAとTableB両方のテーブルが表示されてしまいます。 （その後ラジオボタンを選択すると希望通りの動作になります。） //オンロードさせ、リロード時に選択を保持 window.onload = mondaiChange1; を入れたら大丈夫というのをネットで見たのですが、どう書き換えてもうまくいきません。 希望としては 最初にアクセスしたときは問題1の回答は何も選択されてない状態で、その下には何も表示されていない。 ↓ 問題1の選択肢を選択した時点で初めて「問題その2」のテーブルが選択したラジオボタンによってどちらかひとつ表示される、という風にしたいのですが、教えていただけないでしょうか？
- 締切済み
- JavaScript
- メールフォームで必須項目の仕方
メールフォームで必須項目を入力しないと送信できないようにするにはどうすればいいでしょうか？ 現在は以下のとおりに書いてありますが、必須項目に書いてなくても送信できてしまいます。 <form method="post" action="CGI"> <h3>お問い合わせフォーム</h3> <p>*は必須項目です。</p> <table> <tbody> <tr> <th>お問い合わせ内容*</th> <td><textarea name="お問い合わせ内容" class="l" cols="40" rows="12"></textarea></td> </tr> <tr> <th>お名前（漢字）*</th> <td><input type="text" name="お名前（漢字）" class="m"></td> </tr> <tr> <th>お名前（フリガナ）*</th> <td><input type="text" name="お名前（フリガナ）" class="m"></td> </tr> <tr> <th>E-Mail*</th> <td><input type="text" name="E-mail" class="l"></td> </tr> <tr> <th>電話番号（半角）*</th> <td><input type="text" name="電話番号" class="l"></td> </tr> </tbody> </table> <input type="submit" value=" 送信 " class="button"></form> また必須項目が未入力のときにエラーメッセージ（「お名前が未入力です。」など）を出したいのですがどのようにすればいいですか？
- ベストアンサー
- CGI
補足
ご対応ありがとうございます。 hidden: true,を使ってボタンを非表示にすることができました。 すみません、同時に3件未満になった場合は追加ボタンを再表示させ、3件になるまで追加し直せるようにしたいと思っております。ご教授いただけますか。