JavaScript初心者です
名前と内容のフォームにそれぞれ異なる字数の条件を付けて条件が満たされなければアラート表示という処理をしたくて調べたコードを元に下記コードを書いてみたんですが、ブラウザ表示しただけで勝手に投稿されるという謎の動作が行われます
何故そうなってるのかというのと、条件式がどう間違ってるのか教えていただけますか
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript">
function check() {
var form = document.getElementById("vl");
word=0;
for(word<10; word++) {
if ((form.elements[word].id=="vl") && (form.elements[word].value=="") {
alert("ERROR");
return false;
}
}
form.submit();
}
</script>
</head>
<body>
<form method="post" action="" name="form" onSubmit="return check(this.name.value, this.comment.value)">
<table>
<tr>
<td>
名前：<input type="text" name="name" id="vl">
内容：<textarea name="comment" cols="30" rows="3" id="vl"></textarea>
<input type="radio" name="bbs" value="post" checked>投稿
<input type="radio" name="bbs" value="update">更新
<input type="radio" name="bbs" value="delete">削除
<input type="submit" value="投稿" onclick="check()">
</td>
</tr>
</table>
<?php
while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
?>
<table>
<input type="checkbox" name="chkid[]" value="<?=$row['id'] ?>">
<tr>
<td>名前：
<?php echo $row['name'] ?>
</td>
</tr>
<tr>
<td>内容：
<?php echo $row['comment'] ?>
</td>
</tr>
</table>
<?php
}
mysqli_free_result($result);
mysqli_close($link);
?>
</form>
</body>
</html>-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+4
そうとうひどいソースなので以下見なおしてください
- 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++)的な書き方にして
追記(修正)
文字数制限や日本語名などリスト化しました
<script>
function check(f) {
var bbs=f.elements["bbs"];
for(var i=0;i< bbs.length;i++){
if( bbs[i].value==="delete" && bbs[i].checked){
return true;
}
}
var list=[
{"name":"name","kname":"名前","minlength":1,"maxlength":10},
{"name":"comment","kname":"コメント","minlength":1,"maxlength":100},
];
for(var i=0;i<list.length;i++){
var len=f.elements[list[i]["name"]].value.length;
if(len<list[i].minlength || len>list[i].maxlength) {
alert(list[i].kname+"は"+list[i].minlength +"文字以上"+ list[i].maxlength+"文字以下");
return false;
}
}
return true;
}
</script><form method="post" onsubmit="return check(this);">
名前：<input type="text" name="name"><br>
内容：<textarea name="comment" cols="30" rows="3"></textarea><br>
<input type="radio" name="bbs" value="post" checked>投稿
<input type="radio" name="bbs" value="update">更新
<input type="radio" name="bbs" value="delete">削除<br>
<input type="submit" value="投稿">
</form>投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.20%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
2016/08/19 18:46
こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。