忍者ブログ

VB.NET-TIPS などプログラミングについて

VB.NETのTIPS(小技集)を中心に、Javascript、PHP その他のプログラミングについて少し役に立つ情報を発信します。いわゆる個人的な忘備録ですが、みなさんのお役に立てれば幸いです。

JavaScript jQueryで Form のSUMITを処理する方法( submit() )

今回は 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);
?>


ここで jQuerysubmit 関数を導入します。 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

コメント

コメントを書く