勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

同一フォーム内でクリックするボタンによって送信先を変更する方法

  HTML

同一フォーム内で「登録する」ボタンと「プレビュー」ボタンを用意し、「登録する」をクリックするとregist.phpに「プレビュー」をクリックするとpreview.phpに遷移させたかった。また、「登録する」をクリックした場合は別タブでページを開きたい。以下に対応方法をメモ。

 

対応方法

ソースコード

<form action="regist.php" method="get">
    <input type="text" name="name">
    <input type="submit" value="submit">
    <button type="submit" formaction="preview.php" formmethod="get" formtarget="_blank">preview</button>
</form>

 

リファレンス

formaction属性

http://html5.cyberlab.info/elements/forms/button-formaction.html

formmethod属性

http://html5.cyberlab.info/elements/forms/button-formmethod.html

formtarget属性

http://html5.cyberlab.info/elements/forms/button-formtarget.html

 

所感

今までプレビュー機能的なものを実装する際、一旦下書き保存のような形でデータベースに登録し、プレビューさせる形を取っていたが場合によっては今回メモした方法で対応できそう。

 - HTML

  関連記事

input type=
input type="number"がFirefoxやSafariで正常に動作しない

input type="number"を設置したFormがFirefoxやiPh ...

スマホでフォームの画像アップロード部分でカメラを起動させる方法
スマホでフォームの画像アップロード部分でカメラを起動させる方法

formの画像アップロード部分で、スマホの場合にカメラで撮影させたい。以下に対応 ...

フォームの入力内容をjQueryで取得し、本文として設定した上でメーラーを起動させる方法
フォームの入力内容をjQueryで取得し、本文として設定した上でメーラーを起動させる方法

formで何らかを入力してもらいボタンをクリックするとメーラーが開き、先ほど入力 ...

ブラウザがWebP対応の場合はそのまま表示し、非対応の場合はjpg/png画像を表示させる方法
ブラウザがWebP対応の場合はそのまま表示し、非対応の場合はjpg/png画像を表示させる方法

ページ表示時にブラウザがWebP画像に対応している場合はそのまま表示し、非対応の ...

Googleカレンダーに追加する(予定を登録する)リンクを設置する方法
Googleカレンダーに追加する(予定を登録する)リンクを設置する方法

あるサイトに「Googleカレンダーに追加する(予定を登録する)ボタンを設置して ...