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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

HTML

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

Q&A

解決済

2回答

497閲覧

submit可能条件の追加 Javascript

hitugi

総合スコア13

JavaScript

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

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

HTML

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

0グッド

0クリップ

投稿2022/10/12 04:36

主にJavascriptに関する質問です。

可動させたい内容として、
text、email、checkboxを、すべて記入(checkboxは1個チェックから可)すると、
submit送信ボタンが、可能になる、といった内容です。

checkboxの部分だけは出来ているのですが、
それにtext、email、の記入も条件として追加しようとすると、わかりません。

現状のJavascriptを基本としつつ、可動可能なコードを追加した解答のほど、よろしくお願いします。

<script> const upp1='[name="aaa"]'; const upp2='[name="eee"]'; const uppimit='[name="OM[]"]'; document.addEventListener('change',({target})=> {if(target.matches(uppimit)){ const vove=document.querySelectorAll(`${uppimit}:checked`).length; document.querySelector('[type=submit]').disabled=vove==0; document.querySelectorAll(`${uppimit}:not(:checked)`).forEach (xtre=>{xtre.disabled=vove>=2;}); } }); window.addEventListener('DOMContentLoaded', ()=>{ const els = new CustomEvent("HTMLEvents"); els.initEvent('change', true, true ); document.querySelector(uppimit).dispatchEvent(els);}); </script> <form action="" method="POST"> <label for="txtJAB">なまえ</label> <input class="Yinkon" id="txtJAB" name="aaa" type="text"> <br/> <label for="ameJAB">メール</label> <input class="Yinkon" id="ameJAB" name="eee" type="email"> <br/> <ul> <li><input type="checkbox" id="OM1" name="OM[]" value="1ルQPる"> <label for="OM1">ルルQqPpるる</label></li> <li><input type="checkbox" id="OM2" name="OM[]" value="2かわい"> <label for="OM2">かわいい</label></li> <li><input type="checkbox" id="OM3" name="OM[]" value="3ほにゃら"> <label for="OM3">ほにゃらら</label></li> </ul> <button type="submit">send .O.K.</button> </form> コード

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

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

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

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

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

hitugi

2022/10/13 06:23

そうですね。だいたい同じです。 以前のhttps://teratail.com/questions/5yjg3z45s82wrcは、HTMLにdisabledがある影響で、実際の送信ができなくなってました。
guest

回答2

0

ベストアンサー

javascript

1const upp1='[name="aaa"]'; 2const upp2='[name="eee"]'; 3const uppimit='[name="OM[]"]'; 4 5document.addEventListener('input',({target})=>{ // 'change'→'input' 6 const flg=document.querySelectorAll(`${uppimit}:checked`).length==0 || 7 document.querySelector(upp1).value=="" || 8 document.querySelector(upp2).value==""; 9 document.querySelector('[type=submit]').disabled=flg; 10}); 11window.addEventListener('DOMContentLoaded', ()=>{ 12 const els = new CustomEvent("HTMLEvents"); 13 els.initEvent('input', true, true );// 'change'→'input' 14 document.querySelector(uppimit).dispatchEvent(els); 15});

※一部調整:changeイベントではなくinputイベントが即時性は高いです

投稿2022/10/12 05:46

編集2022/10/13 05:37
yambejp

総合スコア114572

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

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

hitugi

2022/10/13 05:00

美しい回答、ありがとうございました。 可動できました。 一点だけ、違和感ありまして、 form手順の最後が記入系になると、エンターキー押したタイミングで、submit送信可能になっているようです。 これは一文字でも記入した瞬間に、submit送信可能にする。といった作動を求めています。 Javascriptの記述、改良にお付き合いいただけると、幸いです。
yambejp

2022/10/13 05:37

なにかしたら直ぐにチェックしたい場合はinputイベントを利用してください 回答を調整しておきました
hitugi

2022/10/13 06:17

回答の改良、ありがとうございました。 私にも見比べて変化が理解できました。
guest

0

それにtext、email、の記入も条件として追加しようとすると、わかりません。

JavaScriptには何も追加せず、<input>required属性を追加してHTMLの機能で送信を止めるのが、いちばん手軽かと思います。

投稿2022/10/12 04:38

maisumakun

総合スコア145121

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問