たなちの備忘録

自分の知識をストックしていくためのブログ

javascriptからsubmitを行うときの書き方

スポンサーリンク

htmlの<input type="submit">を記述する方法ではなく、jsからsubmitを呼びたいときの書き方。

html

<form id="itemForm" name="itemForm" >

    <div class="submitBtn">
        <input type="button" id="btnItemQuit" name="btnItemQuit" value="キャンセル" onClick="javascript:window.close();"></input>
        <input type="button" id="registerBtn" name="registerBtn" data-bind="click: register" value="登録"/>
    </div>
</form>

javascript

attr()でinputタグに値を設定。appendTo()でsubmitBtnクラスに設定した要素を追加し、form id を指定してsubmitを実行する。

/*
 * 登録ボタン押下時
 */
function register() {
    // ボタンの属性設定
    $('<input>').attr({
        type: 'hidden',
        id: 'registerBtn',
        name: 'interim', 
        value: '仮登録'
    }).appendTo('.submitBtn');

    $('#itemForm').submit();
}

Spring(おまけ)

個人的にSpring MVCで下記のようなマッピングをしてメソッドを呼ぶ際に、name属性にパラメータとして値を持たせるときに役立った。

@RequestMapping(value = "/register", params = "interim", method = RequestMethod.POST)
public void intermRegister(){
…
}

参考文献

Springで複数のsubmitボタン対応 - Qiita

.attr() | jQuery 1.9 日本語リファレンス | js STUDIO

.appendTo() | jQuery 1.9 日本語リファレンス | js STUDIO