どらちゃんのポッケ

R・統計・技術メモなど勉強ログ置き場

Javascriptでフォームにアクセスする

JavaScript

フォーム要素へのアクセス方法

●記述方法

                                                                                                              • -

document. フォーム名. 要素名
（下の例では、フォーム名fmと要素名name）

                                                                                                              • -

他の記法(配列の考え方)----------------------
●document.forms[0].elements[0].value
●document.forms['fm'].elements['name'].value
●document['fm']['name'].value

                                                                                                            • -

サンプルコード

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm15.aspx.cs" Inherits="Japascript_practice.WebForm15" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
<script type="text/javascript">
    function process() {
        var name = document.fm.name.value;
        window.alert('こんにちは' + name + 'さんn'');
    }

</script>
    <form name="fm" onsubmit="return process()">
    please,write your name:
        <input name="name" type="text" />
        <input type="submit" value="done" />
        </form>
</body>
</html>


ボタンを無効化する disableというものもある。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm16.aspx.cs" Inherits="Japascript_practice.WebForm16" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
<script type="text/javascript">
    function process() {
        var fmt = document.fm.fmt;
        //ラジオボタンを前から見てって全部おせなくする
        for (var i = 0; i < fmt.length; i++) {
            //チェックボタンの状態をみてる
            fmt[i].disabled = !document.fm.need.checked;
        }
    }
</script>

    <form name="fm">
    参加Aする
    <input type="checkbox" name="need" value="1" checked="checked" onclick="process()" />
    <br />
    <input type="radio" name="fmt" value="car" />自動車
    <input type="radio" name="fmt" value="bike" />自転車
    </form>
</body>
</html>