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でも処理の変化を柔軟に行うことができます。便利ですね。

中小企業内でITを担当する職員として働いてますYOHEIです(社内SE?)。ほぼ一人職場なので悠々自適に過ごしてますが、たまに仕事の相談相手がいないのが寂しいっちゃ寂しい。趣味はあれこれ考えて結局何も買わないウィンドウショッピングと、買いもしない中古車の情報サイトを巡ること。

コメントを残す

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