[JavaScript] JavaScriptによるformのsubmit - JavaScriptを利用してHTMLフォームのサブミットをする

このページのタグ:[JavaScript]
JavaScriptを利用してHTMLフォームのサブミットをするコードを紹介します。

概要

JavaScriptでフォームのサブミットをする場合は、フォームのオブジェクトのsubmit()メソッドを呼び出します。

プログラム

UIとコード

以下のHTMLファイルを作成します。
PostForm.html (Post元のフォームのhtmlファイル)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script language="javascript" type="text/javascript">
    function FormSubmit() {
      var target = document.getElementById("form01");
      target.method = "post";
      target.submit();
    }
    </script>
</head>
<body>
  <form id="form01" method="post" action="PostComplete.aspx">
    <div>Value-01<input name="value01" type="text" /></div>
    <div>Value-02<input name="value02" type="text" /></div>
    <div><a href="javascript:void(0)" onclick="FormSubmit();">送信</a></div>
  </form>
</body>
</html>
解説

  <form id="form01" method="post" action="PostComplete.aspx">
    <div>Value-01<input name="value01" type="text" /></div>
    <div>Value-02<input name="value02" type="text" /></div>
    <div><a href="javascript:void(0);" onclick="FormSubmit();">送信</a></div>
  </form>
上記がフォーム部分のコードです。INPUTタグによりテキストボックスを2つ配置しています。「送信」リンクは遷移先を"javascript:void(0);"とし、遷移しない動作とします。また、onclickでクリック時にFormSubmit()関数を呼び出す動作にしています。
PostComplete.aspx (Postされた結果を受け取るページ)
下図のUIを作成します。


aspxファイルのコードは下記になります。

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
      <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label><br />
      <div>を受け取りました。</div>
    </div>
    </form>
</body>
</html>
PostComplete.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace HtmlFormJSPost
{
  public partial class PostComplete : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      string value01 = Request.Form["value01"];
      string value02 = Request.Form["value02"];
      Label1.Text = value01;
      Label2.Text = value02;
    }
  }
}
解説

  string value01 = Request.Form["value01"];
  string value02 = Request.Form["value02"];
上記コードにより、Postされたデータを受け取れます。送信元のフォームのid="value01"のテキストボックスの値が、Request.Form["value01"]で取得できます。


  Label1.Text = value01;
  Label2.Text = value02;
POSTされた情報をラベルに表示します。

実行結果

プロジェクトを実行します。Webブラウザが開き下図の画面が表示されます。


テキストボックスに入力します。入力ができたら、[送信]リンクをクリックします。


フォームの入力データがポストされ、ポスト先のWebフォームに表示されました。


JavaScriptでフォームの情報をポストできました。

プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)