【jQuery】1つのform内で複数のボタンで送信先を切り替える

jQueryで1つのform内で複数の送信ボタンを設置して、ボタンごとにsubmitでの遷移先を切り替える方法

jQueryで送信先を切り替えるサンプル

1つのform内で複数のボタンでの遷移先を切り替える方法【jQuery】　サンプル

mugenweb-note.com

formのhtml

html

<form method="post" action="">
    <p>送信データ　：　<input type="text" name="li1" value=""></p>

    <div class="btnarea">
        <button class="submit" data-action="sample1.php">item</button>
        <button class="submit" data-action="sample2.php">select</button>
    </div>
</form>

form内にbuttonを複数設置しています。
formのactionには何も指定せず、JavaScriptで処理を振り分けていきます。

buttonには、data-actionに遷移先を指定しておきます。

送信先を切り替えるJavaScript

JavaScript

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

ボタンが押されたらそのボタンのdata-actionの値をformのactionに入れます。
その後formを送信するので還移先にデータが送れるという感じです。

コード内に.parents()が多いですけど、配置用のdivで一個余分についてます。

inputの入力を必須にする

JavaScript

$(function () {
  $('.submit').click(function() {
    var req = $('#send-data').val();
    if(req !== ""){
      $(this).parents().parents('form').attr('action', $(this).data('action'));
      $(this).parents().parents('form').submit();
    }else{
      alert('空です');
      return false;
    }
  });
});

送信前にinputの値チェックをかませてあげれば、大丈夫です。