現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

フォーム

JavaScriptでフォームの送信形式を設定しよう!

投稿日:

★.action 送信先を参照/設定

★・・・Formオブジェクト(フォーム名またはforms[参照番号])

    form要素の各属性で指定されるフォームの送信先や送信方法に関するプロパティです。これらの設定にJavaScriptを利用することにより、ユーザの選択や環境によって送信先やエンコード方式、送信方法を変更できます。

スポンサーリンク

actionプロパティ

    form要素のaction属性に該当するデータの送信先を参照/設定します。

index.html

<html>
<head>
    <title>JavaScript Sample</title>
    <script type=”text/javascript”>
        // フォームの送信先を変更する関数
        function sendForm() {
            var formElem = document.getElementById(“form1”);

            // ラジオボタン「感想」選択時の処理
            if (formElem.radio1[0].checked) {
                if (!confirm(“送信内容はご感想でよろしいですか?”)) return false;

                // 送信先を設定
                formElem.action = “impression.html”;
            }

            // ラジオボタン「質問」選択時の処理
            if (formElem.radio1[1].checked) {
                if (!confirm(“送信内容はご質問でよろしいですか?”)) return false;

スポンサーリンク

                // 送信先を設定
                formElem.action = “question.html”;
            }
        }
    </script>
</head>
<body onload=”formInitialize()”>
    <form action=”” id=”form1″ onsubmit=”return sendForm()”>
        <p>
            <input type=”radio” name=”radio1″ checked=”checked” />感想
            <input type=”radio” name=”radio1″ />質問
        </p>
        <p>
            <textarea name=”text” cols=”30″ rows=”5″>
        </p>
        <p>
            <input type=”submit” value=”送信” />
            <input type=”reset” value=”クリア” />
        </p>
    </form>
</body>
</html>

question.html

<html>
<head>
    <title>JavaScript Sample</title>
</head>
<body>
    <p>質問の送信先</p>
</body>
</html>

impression.html

<html>
<head>
    <title>JavaScript Sample</title>
</head>
<body>
    <p>感想の送信先</p>
</body>
</html>
スポンサーリンク

-フォーム
-

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

JavaScriptで選択されているか調べてみよう!

★.checked チェック状態を参照/設定 ★.options[参照番号].selected 選択状態を参照 ★・・・Elementオブジェクト(エレメント名またはelements[参照番号]) チ …

JavaScriptで選択の初期状態を調べよう!

♦.defaultChecked 初期チェック状態を参照 ♦.options[参照番号].defaultSelected 初期選択状態を参照 ♦・・・Elem …

JavaScriptでターゲット名を設定しよう!

★.target ターゲット名を参照/設定 スポンサーリンク ★・・・Formオブジェクト(フォーム名またはforms[参照番号])     form要素の各属 …

JavaScriptでフォームの部品に表示されるテキストを設定

★.value エレメントの文字列を参照/設定 ★.defaultValue テキストエリアの初期文字列を参照 ★.options[参照番号].text 選択メニューの項目を参照/設定 ★・・・Ele …

JavaScriptで自動的にフォーカスを移動させてみよう!

★.click() クリックする ★.blur() フォーカスを外す ★.focus() フォーカスを合わせる ★.select() 文字を選択状態にする ★・・・Elementオブジェクト(エレメン …