JavaScriptでボタンによってformのactionを変更する方法

こんにちは、さるまりんです。

HTMLフォームとアクションの切り替えについてです。

上のようなフォームので「追加」の時はadd.php、「削除」の時はremove.phpを実行したいです。

どのようにするかいつも忘れてしまうのでメモしておきます。

フォームのHTMLです。

<form action="add.php" method="POST">
  <input type="text" name="val1" size="20"> 
  <input type="button" class="btn" data-action="add.php">追加</input> 
  <input type="button" class="btn" data-action="remove.php">削除</input>
</form>

クリックされるボタンによってアクションを切り替えるJavaScriptは次のようなものです。(jQueryを利用しています。)

$('.btn').click(function() {
  $(this).parents('form').attr('action', $(this).data('action'));
  $(this).parents('form').submit();
});

btnクラスの付与されたボタンをクリックした際に、data-actionで設定されている値をformのactionに設定し、submit()でフォームをサブミットしています。

$(this).parents('form')ではなく、idやclassを付与してそれでフォームを指定することもできます。

読んでくださってありがとうございました。

それではまた！