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

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

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

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

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

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

<form name="sampleform" action>
	USER: <input type="text" name="username">
	PASSWORD: <input type="password" name="userpass">
	<input type="button" onclick="submitfnc('regist.html')" value="登録" />
	<input type="button" onclick="submitfnc('itiji.html')'" value="一時保存" />
	<input type="button" onclick="location.href='index.html?mode=return'" value="戻る" />
</form>

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

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

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

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

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

Javascriptの定義と解説

function submitfnc(action) {
	document.sampleform.action = action;
	document.sampleform.submit();
}

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

document.sampleform.action

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

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

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

まとめ

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

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

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