今回は jQuery でForm のSUMITを処理する為に用意されている submit 関数ついて説明します。
先ずは1個のテキスト入力と SUMIT ボタンを宣言したフォームをもつHTMLを以下に示します。 これは特に難しくは無いと思います。ちなみにアクション先の PHP のソースをその下に示します。
■簡単なFormとSUBMITについて
<html>
<head>
<meta charset="utf-8">
<title>jquery submit</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<h1>jquery submit</h1>
<form method="post" action="stest.php">
<input type="text" name="data1" value="">
<input type="submit" value="送信">
</form>
</body>
</html>
■アクション先のPHP
<?php
$data1 = "";
if (isset($_POST["data1"]) == true) {
$data1 = $_POST["data1"];
}
// データを表示
echo("data1=".$data1);
?>
ここで jQuery の submit 関数を導入します。 submit 宣言で無名関数を宣言しています。 この無名関数はアラート表示を行っていますが、アラートが表示されて「OK」ボタンを押下すると上記の stest.php のプログラムに遷移します。
■submit 関数
<html>
<head>
<meta charset="utf-8">
<title>jquery submit</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<h1>jquery submit</h1>
<form method="post" action="stest.php">
<input type="text" name="data1" value="">
<input type="submit" value="送信">
</form>
<script type="text/javascript">
// jquery でSUBMIT処理
$('form').submit(function(){
alert("送信します。");
return true;
});
</script>
</body>
</html>
この処理はそこまで必要は感じられませんが無名関数の最後で return false; とすれば SUBMIT 処理が中断します。
つまりこの関数の中で入力データの必須チェック等を行うことで正しいデータをアクション先に送信できます。 では、テキストボックスにデータが入力されていない場合にエラー表示をする様にします。
■submit 関数の中でチェック処理を行いエラーの場合 return false;
<html>
<head>
<meta charset="utf-8">
<title>jquery submit</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<h1>jquery submit</h1>
<form id="SForm" method="post" action="stest.php">
<input type="text" id="data1" name="data1" value="">
<input type="submit" value="送信">
</form>
<script type="text/javascript">
// jquery でSUBMIT処理
$('form').submit(function(){
if ($('#data1').val() == '') {
alert("データを入力して下さい。");
return false;
}
alert("送信します。");
return true;
});
</script>
</body>
</html>
ところで jQuery のプログラムからフォームを生成し非表示の input ボックスを追加し SUBMIT 処理を行う例を示します。
尚、コメントで囲まれた処理は jQuery ではなく JavaScript のみで記述した場合を示します。
■jQuery プログラムによるフォーム生成と SUBMIT 処理
<html>
<head>
<meta charset="utf-8">
<title>jquery submit2</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<h1>jquery submit2</h1>
<button onclick="doSubmit();">送信</button>
<script type="text/javascript">
// jquery でSUBMIT処理
function doSubmit() {
// from オブジェクト
var form = $("<form></form>").attr('method', 'post').attr('action', 'stest.php');
$('body').append(form);
// input オブジェクト
var inp = $("<input>");
inp.attr("type", "hidden").attr("name", "data1").attr("value", 123);
// input オブジェクトをformに追加
form.append(inp);
// SUBMIT処理
form.submit();
return false;
/*
// 純粋なJacaScriptでの記述
var form = document.createElement("form");
form.action = "stest.php";
form.method = "POST";
form.style.visibility = "hidden";
document.body.appendChild(form);
var elem = document.createElement("input");
elem.name = "data1";
elem.type = "hidden";
elem.value = "123";
form.appendChild(elem);
form.submit();
*/
}
</script>
</body>
</html>
PR
コメント