htmlのbuttonで画面遷移する方法

例えば、下の画像のように、一連のフォームに対しボタンが複数あるとします。

戻るボタンは、入力した内容は関係なしに前の画面や指定したページに戻るためのボタンですが、登録や一時保存はサブミットされるはずです。

しかし、formタグのactionには1つのURLしか指定出来ません

この場合どのように画面の遷移先を切り替えるのかについてです。

ボタンを作成するHTMLとその解説

基本的にはほぼ同じなのですが、通常のようにsubmitを使いません。

※登録ボタンだけはサブミットを使うでもよい

これに、4行目、5行目のようにonclickプロパティを持たせます。これによりボタンを押したときのJavascriptの関数を指定出来ます。

そして、関数の引数で遷移先のURLを切り替えます。

アクションの切り替えはJavascriptで行います。

Javascriptの定義と解説

今回はJavascriptで書きましたが、JQeryでもよいです。

document.sampleform.action

documentはおまじないみたいなものだとして、sampleformはformタグで指定した名前になります。

2行目で、sampleformという名前のformタグのactionプロパティの内容を書き換えます。

3行目で、sampleformという名前のformタグをサブミットします。

まとめ

経験を積んできてもこういった簡単なことを忘れてしまいガチですね。

でも、ちゃんとお仕事もらってお客様にも喜んでいただけているので大丈夫です(笑)

ちなみに、今回のはJQeryを使ったほうがよいかもしれないです。

コロナの影響でみんな大変だから俺もなんかできること

僕は福井県に住んでいるのですが、戦時中に福井大空襲にあい、その直後に大震災にあってボロボロになった話をおばあちゃんに聞きました。

それでも復活することができ、不死鳥の町と言われるようになりました。

先人達には心から感謝し尊敬します。

リーマンショック、東日本大震災、コロナと数十年に一度と言われる被害が立て続けに起きていますが、僕たちは強いです。

今は苦しいかもしれませんがきっと復活できます。

僕は低学歴ですし小さな小さな粒でしかないですが、プログラミングに関しては必死に勉強し15年以上ごはんにありつけています。

プログラミングを勉強している人の役に立てるほどのスキルはあると思っています。

なので1人でもんもんと悩んでいる若手のエンジニア向けに質問を受け付けることにします。

自宅で待機されている間もパソコンとインターネットがあればプログラミングの勉強はできます。

  • PHP
  • SQL
  • HTML・CSS
  • jQuery

とは言ってもいきなり答えを聞いていたのではなかなか成長できないと思うのです。

なので質問の際には次のことをご連携ください。

  • 何をやりたいか
  • どんなことを調べたか、検索キーワードと参考にしたページのURL
  • 調べた結果どこが分からないか
  • できるなら試したコード

メッセージいはとりあえずTwitterにでもください。

質問はこちら

すぐに返事できないかもしれませんがご了承ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA