リセットボタンが効きません。

過去の質問にもありますが、掲示板を作成しています。
現在htmlとphpを使用していますが、
なぜか、リセットボタンだけが効きません。

どこが間違っているのでしょうか。
宜しくお願い致します。

<DOCTYPE! html>

<html> <head> <meta charset="UTF-8"> <title>変換ツール</title> </head> <body> <div align="center"> <h1>ニュース解説変換ツール</h1> </div> <p>左側に変換したい文章を記入し、[<br>]もしくは[<br><br>]ボタンを押してください。 <br>右側に変換後の文章が表示されます。 <?php if (isset($_POST['left'])) { $input = mb_convert_kana($_POST['left'], "a"); if (isset($_POST['br1'])) { $replacement = '<br>$1'; } else if (isset($_POST['br2'])) { $replacement = '<br><br>$1'; } $pattern = "/(\\r\\n|\\r|\\n)/"; $after = preg_replace($pattern, $replacement, $input); $after = str_replace("(了)", "",$after); $result = $after; } else { $result = "変換後の文章がこちらに表示されます。"; } ?> <form method="post"> <table> <tr> <td> <textarea name="left" rows="20" cols="45" placeholder="ここに変換したい文字を入力してください。"> <?php if(isset($_POST['left'])){ echo(htmlspecialchars($_POST['left'])); } ?> </textarea> </td> <td> <input type="submit" name="br1" value="<br>" style="width:70px; height: 20px"><br><br> <input type="submit" name="br2" value="<br><br>" style="width:70px; height: 20px""width:70px; height: 20px"><br><br><br><br> <input type="reset" value="リセット" style="width:70px; height: 20px"> </td> <td> <textarea name="right" rows="20" cols="45"><?php echo htmlspecialchars($result);?></textarea> </td> </tr> </table> </form> </body> </html> ---------------------------------------------------------- 以上。 input type="reset" value="リセット"のところです。

他にも何か、お気づきに事があれば何でもご指摘下さると助かります。
宜しくお願い致します。

行動規範の内容に同意します

回答3件

ベストアンサー

javascriptは<script>タグ内に記述します。

lang
1<script type="text/javascript">
2.
3.
4.
5</script>

提示したリンク先は全くのjavascript初心者には少し厳しいので、今回はほとんどコピペで動くようなコードを記載しますが、できれば自分で勉強してください。

lang
1var resetBtn = document.getElementById("reset_btn");
2resetBtn.onclick = function(event){
3    clearFormAll();
4    return false;
5}
6//フォームを取得
7function clearFormAll() {
8    for (var i=0; i<document.forms.length; ++i) {
9        clearForm(document.forms[i]);
10    }
11}
12//フォームの中の各要素をクリアする
13function clearForm(form) {
14    for(var i=0; i<form.elements.length; ++i){
15        clearElement(form.elements[i]);
16    }
17}
18//ここで各入力をクリアする
19function clearElement(element) {
20    switch(element.type) {
21        case "hidden":
22        case "submit":
23        case "reset":
24        case "button":
25        case "image":
26            return;
27        case "file":
28            return;
29        case "text":
30        case "password":
31        case "textarea":
32            element.value = "";
33            return;
34        case "checkbox":
35        case "radio":
36            element.checked = false;
37            return;
38        case "select-one":
39        case "select-multiple":
40            element.selectedIndex = 0;
41            return;
42        default:
43    }
44}

なお、リセットボタンには以下のようにidを付けてください。

lang
1<input type="reset" value="リセット" style="width:70px; height: 20px" id="reset_btn">

詳しい解説がほしい場合には、コメントしてください。

投稿2015/06/04 00:13

orange0190

総合スコア1698

b1ackc0ffee

2015/06/04 01:18

有難うございます★ ボタンのリンク先を、トップページにするのも、方法の一つですね★

行動規範の内容に同意します

質問の内容とは関係ありませんが、HTML5のDOCTYPE宣言は

lang
1<DOCTYPE! html>

ではなく

lang
1<!DOCTYPE html>

です。

投稿2015/06/03 07:50

anaprestoo

総合スコア199

b1ackc0ffee

2015/06/03 08:42

ご指摘有難うございます★★ 覚えておきます。

行動規範の内容に同意します

リセットボタンはフォームのデータを空にするのではなく、初期値に戻すものです。
ですので、PHP等で最初にフォームにデータを与えると、それが初期値になり、最初に入力されたものがリセットボタンで表示されます。
次を参考にするといいでしょう。
フォームで戻るボタンを押して戻った後にリセットが効かない。

投稿2015/06/03 05:53

orange0190

総合スコア1698

b1ackc0ffee

2015/06/03 08:43

有難うございます。これって、javascriptですか？ phpやhtmlと一緒に使用するのが一般的なのでしょうか。 javascriptを使ったことがありません。宜しくお願い致します。

orange0190

2015/06/03 09:08

何かの動作(例えば、ボタンをクリック)に対して、何か処理を行いたい場合には、javascriptが基本となります。phpやhtmlだけでは無理です。

b1ackc0ffee

2015/06/03 09:58

有難うございます。下記リンク先を拝見しましたが、解読できませんでた。実際に私のコードに追記する場合、どのようなコードになりますでしょうか。 ---------------------------------------------------------- function clearFormAll() { for (var i=0; i<document.forms.length; ++i) { clearForm(document.forms[i]); } } function clearForm(form) { for(var i=0; i<form.elements.length; ++i) { clearElement(form.elements[i]); } } function clearElement(element) { switch(element.type) { case "hidden": case "submit": case "reset": case "button": case "image": return; case "file": return; case "text": case "password": case "textarea": element.value = ""; return; case "checkbox": case "radio": element.checked = false; return; case "select-one": case "select-multiple": element.selectedIndex = 0; return; default: } } ---------------------------------------------------------- 宜しくお願い致します。

orange0190

2015/06/03 23:56

別回答とします。

行動規範の内容に同意します

あなたの回答