Life Collections

「送信ボタンを複数配置して、押したボタンによって遷移するURLを変えたい」。そんな時、クライアントサイドのjQueryで実現できるようなコードをご紹介します！

概要

今回は、submitボタンに新たな属性を追加し、その属性に指定されたURLで遷移する先が決まるような仕組みで実装します！

• 1. submitボタンに「actionURL」属性を追加する
• 2. 各ボタンのactionURL属性に指定したURLにリンクするようjQueryコードを書く

ソースコード全体

htmlソースコード

HTML側は、submitボタンに対して「actionURL」属性を追加するのみです！

<input type="submit" actionURL="/index.php" value="送信する①">
<input type="submit" actinoURL="/complete.php" value="送信する②">

jQueryソースコード

jQuery側は、「actionURL」のあるモノを押した時に、formのaction先を変更して送信するようにしています！

$(document).ready(function(){
  $('[actionURL]').click(function(){
    if($(this).attr('actionURL') != ""){
      $('form').attr('action', $(this).attr('actionURL'));
    }
  });
});

いかがでしたでしょうか？何かございましたら、遠慮なくコメント欄にてご連絡下さい！

2020.05.17

『jQuery』まとめ記事一覧

本サイトのjQuery関連記事をまとめています。是非お立ち寄りください。 jQuery 関連記事一覧 ...

jQuery関連記事

jQueryのその他記事もまとめてますので、是非お立ち寄りください(｡･ω･｡)

2020.05.17

[jQuery] jQueryでツールチップを自作する方法

対象オブジェクトにフォーカスをあてた際に、ツールチップを表示するjQueryコードを自作しました。是非ご利用ください。 仕様 マウスオーバーしたらチップを表示する ※tipMSG属性の値が、ツールチップとして表示される マウスアウトしたらチップを非...

2020.05.17

[jQuery] パフォーマンス向上のコツ（処理速度向上・高速化 あれこれ）

jQueryで少しでも処理速度を向上させるためのTipsをまとめてみました。 1. セレクタにはクラス名だけでなく要素名も書く $("#navi a")と記載した場合、まずa要素を検索し、その中から#naviが先祖要素にあたるa要素をjQueryオ...

2018.08.10

[jQuery] formのアクションを変更する〜フォーム送信時（Submit時）にボタン毎に遷移先URLを変更する方法〜

「送信ボタンを複数配置して、押したボタンによって遷移するURLを変えたい」。そんな時、クライアントサイドのjQueryで実現できるようなコードをご紹介します！ 概要 今回は、submitボタンに新たな属性を追加し、その属性に指定されたURLで遷移する先が決...

2018.08.09

[jQuery] リアルタイムに入力フォームのバリデーションをチェックするコード集

WEBページ作成時に作るに手間がかかる入力バリデーションチェック。PHP等のサーバサイドでのチェック方法もありますが、クライアントサイドでチェックできればリアルタイムにNG箇所を伝えることができます！今回は、javascript・jQueryで実装する入力フォ...

2018.06.20

[jQuery] カーソルをあてた時に画像を切り替える方法（マウスオーバー・マウスアウト）

「送信ボタンにカーソルを押した時に色を変えたい」こういったユーザビリティに関する要望は少なくないです！CSSでも実現できますが、CSSでは複数時に1つ1つソースコードを書かないといけなくなっちゃうので、今回はjQueryで、カーソルをあてた際に画像を切り替える...