読者です 読者をやめる 読者になる 読者になる

cutmail's blog

write the code

javascriptでフォームをすべてクリアする

フォームをリセットするには

<input type="reset" name="reset" value="リセット" />

などとすればよいのだけれど、
初期値が入っている場合。
(例)

<input type="radio" name="sample" value="1" checked>

などのような時は、リセットがききません。

そんなときは、javascriptでフォームの値をすべてクリアできます。
リセットでなく、クリアです。

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:
    }
}
  • セレクトボックスなどは、一番最初の項目にセットされます。
  • ラジオボタンはどれも選択されない状態になります。
<input type="file">

はセキュリティ上なにもできません。