Loading

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


「送信ボタンを複数配置して、押したボタンによって遷移する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関連記事

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

ふぇにば|PhoEniBiR

投稿者プロフィール

わくわくしてて偉い系VTuver ふぇにば です。
少しでもお役に立てておりましたら嬉しいです(。・ω・。)

関連記事

  1. [PHP] igo-phpを用いた形態素解析〜タグクラウド自作に向けて〜

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

    2018.08.09
  3. [jQuery] カーソルをあてた時に画像を切り替える方法(マウスオーバー・マウ…

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

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

    2018.08.07
  6. [Linux] シェルスクリプトでフォルダ単位圧縮バックアップ & ロ…

    2018.01.09

コメント

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

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

CAPTCHA


New Article

  1. ChatGPTで遊ぶ おもしろい使い方まとめ
  2. ドラクエウォーク スロット どっちがいい
  3. 三國志真戦 戦法中国語翻訳
  4. ドラクエウォーク 2023年装備ガチャ
  5. ドラクエウォーク 覚醒千里行
PAGE TOP