29
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

FormでPOST処理をしつつ画面遷移させない方法

いろいろ調べてみて、iframeを使う方法のみ上手くいったのでメモ。
参考:Form Submit 後に画面遷移をさせない方法

formタグのtarget属性にiframeを指定。
formタグのtarget属性は送信結果をどのフレーム(ウィンドウ)に表示するのかを指定するもの。
https://www.tagindex.com/html_tag/form/form_target.html

index.html
<form method="post" id="form" action="/api/upload" target="sendPhoto">
  <input type="file" capture="camera" accept="image/*" id="file-image">
  <button class="btn-send">送信</button>
</form>

<iframe name="sendPhoto" style="width:0px;height:0px;border:0px;"></iframe>
script.js
const $form = $('#form')
$('.btn-send').on('click', evt => {
  $form.submit()
  $form[0].reset()
  return false
})

formタグのonsubmitイベントでreturn falseしたり、
submitボタンのclickイベントでreturn falseしたり、
submitボタンのclickイベントでevent.preventDefault()したり。

これらは、ページ遷移してしまったり、一見するとAjax通信が成功しているように見えるが中身が送信されていなかったりした失敗例。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
29
Help us understand the problem. What are the problem?