jQuery – FORM要素を複数ボタンでそれぞれ違う動作をさせる

おーこれは便利だ。

この方法を使用した場合、submitボタンはFORMタグ内に記述する必要はありません。FORMタグ外の

<input type="button">

にsubmitボタンの役割を持たせるからです。

 
これにはjQueryを使用します。HEADタグ内に例として下記のscriptタグを書きます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(function(){
	$('#button1').click(function() {
        $('#example').attr('action', 'test1.cgi');
        $('#example').submit();
    });
    $('#button2').click(function() {
        $('#example').attr('action', 'test2.cgi');
        $('#example').submit();
    });
});
</script>

 
BODYタグ内に例として下記のFORM及びinput type=”button”があるとします

<form id="example" name="example" method="post" action="test0.cgi">
~ 中略 ~
</form>

<input type="button" id="button1" name="button1">
<input type="button" id="button2" name="button2">

 
上記例の場合、button1をクリックするとFORMの内容はtest1.cgiに渡され処理され、button2をクリックするとtest2.cgiに渡されて処理されます(jQueryでformのaction属性の値を書き換えている)

 
このscriptについて説明すると

$(function(){
	$('#button1').click(function() {
        $('#example').attr('action', 'test1.cgi');
        $('#example').submit();
    });
    $('#button2').click(function() {
        $('#example').attr('action', 'test2.cgi');
        $('#example').submit();
    });
});

上記スクリプトのattr()の部分は、attr(‘属性名’, ‘値’) となり、FORMのaction属性の値をtest1.cgi又はtest2.cgiに変化させています。例えばFORM内の

<input type="hidden" id="hoge" name="hoge" value="">

のvalue属性の値をbuttonによって変化させたい場合は

$('#hoge').attr('value', '値を記入') 

としてやれば良いわけです。

これを利用すればPHPでも処理の変化を柔軟に行うことができます。便利ですね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください