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

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

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

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

HTML

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

Q&A

解決済

1回答

3149閲覧

JavaScriptのアラート表示条件

a-_.

総合スコア133

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2016/08/19 05:01

編集2016/09/06 02:30

JavaScript初心者です
名前と内容のフォームにそれぞれ異なる字数の条件を付けて条件が満たされなければアラート表示という処理をしたくて調べたコードを元に下記コードを書いてみたんですが、ブラウザ表示しただけで勝手に投稿されるという謎の動作が行われます
何故そうなってるのかというのと、条件式がどう間違ってるのか教えていただけますか

HTML

1<html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 4 <script type="text/javascript"> 5 function check() { 6 var form = document.getElementById("vl"); 7 word=0; 8 for(word<10; word++) { 9 if ((form.elements[word].id=="vl") && (form.elements[word].value=="") { 10 alert("ERROR"); 11 return false; 12 } 13 } 14 form.submit(); 15 } 16 </script> 17 </head> 18 <body> 19 <form method="post" action="" name="form" onSubmit="return check(this.name.value, this.comment.value)"> 20 <table> 21 <tr> 22 <td> 23 名前:<input type="text" name="name" id="vl"> 24 内容:<textarea name="comment" cols="30" rows="3" id="vl"></textarea> 25 <input type="radio" name="bbs" value="post" checked>投稿 26 <input type="radio" name="bbs" value="update">更新 27 <input type="radio" name="bbs" value="delete">削除 28 <input type="submit" value="投稿" onclick="check()"> 29 </td> 30 </tr> 31 </table> 32 33<?php 34 while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) { 35?> 36 37 <table> 38 <input type="checkbox" name="chkid[]" value="<?=$row['id'] ?>"> 39 <tr> 40 <td>名前: 41 <?php echo $row['name'] ?> 42 </td> 43 </tr> 44 <tr> 45 <td>内容: 46 <?php echo $row['comment'] ?> 47 </td> 48 </tr> 49 </table> 50 51<?php 52 } 53 mysqli_free_result($result); 54 55 mysqli_close($link); 56?> 57 58 </form> 59 </body> 60</html>

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

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

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

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

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

guest

回答1

0

ベストアンサー

そうとうひどいソースなので以下見なおしてください

  • submitのボタンとformのonsubmitに両方checkを関連付けない
  • もしサブミットボタンのonclickを有効にするならreturn checkで受けてください
  • もしformのonsubmitを有効にするなら意味のない引数を渡さない
  • checkは戻り値trueかfalseを返すように
  • checkの中でsubmitしない
  • if ((form.elements[word].id=="vl") && (form.elements[word].value=="")

何をしたいのでしょうか?ついでにカッコの数も違うし・・・

  • vlという同じidを複数のタグに振らない
  • document.getElementById("vl")をformとみなしてますが、フォームじゃない
  • for構文はなるべくfor(i=初期値;i<上限値;i++)的な書き方にして

追記(修正)

文字数制限や日本語名などリスト化しました

javascript

1<script> 2function check(f) { 3 var bbs=f.elements["bbs"]; 4 for(var i=0;i< bbs.length;i++){ 5 if( bbs[i].value==="delete" && bbs[i].checked){ 6 return true; 7 } 8 } 9 var list=[ 10 {"name":"name","kname":"名前","minlength":1,"maxlength":10}, 11 {"name":"comment","kname":"コメント","minlength":1,"maxlength":100}, 12 ]; 13 for(var i=0;i<list.length;i++){ 14 var len=f.elements[list[i]["name"]].value.length; 15 if(len<list[i].minlength || len>list[i].maxlength) { 16 alert(list[i].kname+"は"+list[i].minlength +"文字以上"+ list[i].maxlength+"文字以下"); 17 return false; 18 } 19 } 20 return true; 21} 22</script>

HTML

1<form method="post" onsubmit="return check(this);"> 2名前:<input type="text" name="name"><br> 3内容:<textarea name="comment" cols="30" rows="3"></textarea><br> 4<input type="radio" name="bbs" value="post" checked>投稿 5<input type="radio" name="bbs" value="update">更新 6<input type="radio" name="bbs" value="delete">削除<br> 7<input type="submit" value="投稿"> 8</form>

投稿2016/08/19 05:18

編集2016/08/19 07:40
yambejp

総合スコア114583

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

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

a-_.

2016/08/19 05:53

ご回答ありがとうございます if文の条件式は「idのvalueに何も値が無かったら」という事を書きたかったのです >vlという同じidを~ 最初はタグ毎に処理しようとしたけど、<form>も<tr>も<td>も今回の処理とは関係のないコードも含まれてしまうので名前と内容にidを追加して特定できるようにしようと試みました
yambejp

2016/08/19 06:21

とりあえず追記しておきました
a-_.

2016/08/19 06:56

コード書いていただきありがとうございました 因みにこのコードで確認したら入力してない状態ではERRORは表示されました 質問文にも書きましたが、この条件に字数制限をかけて処理したいのです あと投稿したものを削除しようとすると何故かERRORが表示されてしまいます >ソースを修正する気があまりなさそう そんな風に伝わってしまっていたのならすいません
yambejp

2016/08/19 07:14

>字数制限 字数制限が具体的に書かれていないのでなんとも言えないですね 上限設定ならとりあえず 名前:<input type="text" name="name" maxlength="10"><br> 内容:<textarea name="comment" cols="30" rows="3" maxlength="10"></textarea> のようにしておけばjavascriptでチェックする必要はないでしょう 下限設定が必要な場合は提示したリストを拡張すればできそう いずれにしろ具体的に →nameは何文字以上何文字以下 →commentは何文字以上何文字以下 と書いてください またcommentは改行文字もカウントされるのでどうしたか よくよく検討してください >削除しようとすると何故かERROR これは削除が選ばれていれば文字数チェックは不要という意味ですか?
a-_.

2016/08/19 07:21

字数制限はフォームにあらかじめ制限を付けるのではなく、入力された値が「名前は空欄か10文字以上」「内容は空欄か300文字以上」でERRORを表示させるという条件です 投稿と更新はチェックは必要ですが、削除はラジオボタンを選択後submitボタンを押せばそのまま処理できるという流れにしたいのです >いずれにしろ具体的に for文に書きました
yambejp

2016/08/19 07:41

修正いれときました
a-_.

2016/08/19 08:05

修正ありがとうございます 因みに「this」とはどういう意味なのでしょうか 調べてみたんですが人によって表現がバラバラで明確な定義や説明もなく、イマイチ理解できません 誤解を招いてしまったようなので一応お伝えします 「」で記述したのは"アラート表示時の文章"ではなく"条件"です なので名前は~と表示をさせなくてもよいという事で、そのためalert("ERROR");と書いていたのです
yambejp

2016/08/19 08:12

formが渡している「this」は、そのフォーム自身です アラートについてはいくらでも拡張できますというサンプルです 必要なければErrorだけ表示してください
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問