Loading

[jQuery] フォーム送信時(Submit時)にボタン毎に遷移先URLを変更する方法

150415322552_TP_V

「送信ボタンを複数配置して、押したボタンによって遷移する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'));
    }
  });
});

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

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

[三国天武] 臥龍試験!クイズ回答まとめ(4周年祝典)

関連記事

  1. [Excel VBA] マクロで辞書オブジェクト(KEY-VALUE)の使い方ま…

    2016.09.01
  2. [Vim] Vimを10倍かっこよく使いこなすためのコマンド集

    2016.05.12
  3. [CSS] CSSのみでデザインするおしゃれなヘッダー・見出し(h1~h6タグ)…

    2018.06.11
  4. [Excel VBA] マクロで月の日数を取得する(当月・前月・翌月)

    2016.08.02
  5. [PHP] date(): It is not safe to rely on …

    2018.08.08
  6. [CSS] ブラウザ毎にずれないCSS!リセットCSS・デフォルトCSSコード公…

    2018.08.07

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


New Article

  1. ドルマ属性とくぎダメージ こころ一覧
  2. 三国天武 驚帆 きょうほ
  3. イオ属性じゅもん強化こころ
  4. 霜月影侍(そうげつえいじ)
  5. dq_dorumoa
PAGE TOP