jQueryで1つのform内で複数の送信ボタンを設置して、ボタンごとにsubmitでの遷移先を切り替える方法
jQueryで送信先を切り替えるサンプル
1つのform内で複数のボタンでの遷移先を切り替える方法【jQuery】 サンプル
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の値チェックをかませてあげれば、大丈夫です。
コメント