JavaScriptを利用してHTMLフォームのサブミットをするコードを紹介します。
概要
JavaScriptでフォームのサブミットをする場合は、フォームのオブジェクトのsubmit()メソッドを呼び出します。
プログラム
コード
以下の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()関数を呼び出す動作にしています。
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>
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でフォームの情報をポストできました。
このページのキーワード
- JSによるformのsubmit - JSを利用してHTMLフォームのサブミットをする
- JavaScript
- HTMLフォーム
- フォームのSubmit
- フォームのサブミット
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2021-08-25
作成日: 2015-02-19
