【JavaScript】画面遷移させないでformをsubmitさせる

formタグでサーバーにリクエストを送ると画面遷移します。
しかし画面遷移させずにリクエストを送りたいというケースがあります。

その方法をお伝えします。

1. buttonタグでsubmitさせないように変更
2. fetch() でサーバーにリクエストを送る

buttonタグを押すと、デフォルトではsubmitされます。
このままだと画面遷移するので、submitさせないようにします。

submitさせないようにするには、type="button"を記述します。

<form id="form" action="/requesturl" method="post">
    <button type="button" onclick="mySubmit();">送信</button>
</form>

上の例は、送信ボタンを押すと mySubmit()関数を呼び出します。

次のようにすると、手動でsubmitさせることができます。

document.getElementById("form" ).submit();

しかし、これだと画面遷移します。

そこで fetch()関数を使って、サーバーにリクエストを送信します。

const formSubmit = formId =>{
    const form = document.getElementById(formId);
    const arg = [form.action];
    if( form.method === undefined || form.method.toUpperCase() === "POST")
        arg.push({method:"POST",body:new FormData(form)} );

    return fetch( ...arg ).then( response => 
        response.status === 200 ? response.json() : Promise.reject(response.status)
      );
};

formのデータを送信するときは、基本的にPOSTで送信します。
GET送信するときはURLにパラメーターとして連結する必要がありますが、ここでは省略しています。

また、サーバーからの応答内容が json のケースを想定しています。
テキストの場合は response.text()、バイナリなら response.arrayBuffer() 等に変更してください。

次に、ボタンを押したときに呼び出される関数を作成します。

const mySubmit = ( ) =>{
   formSubmit("form").then(e=>{
       alert("ＯＫ");
    }).catch(e=>alert(e));
};