フォームFormのデータをJSON+Ajaxで送る

<form action = "./php/send_mail.php" method = "post">
<dl>
     <dt>
     <span class = "required">お名前</span></dt>
     <dd><input type = "text" name = "name" class = "name" requied></dd>
     <dt><span class = "required">メールアドレス</span></dt>
     <dd><input type = "text" name = "email" class = "email" requied></dd>
     <dt>お問い合わせ内容</dt>
     <dd>
          <select name = "type" class = "type">
               <option value = "レコーディングのご依頼">レコーディングのご依頼</option>
               <option value = "演奏、出演のご依頼">演奏、出演のご依頼</option>
               <option value = "楽曲制作、編曲のご依頼">楽曲制作、編曲のご依頼</option>
               <option value = "その他のお問い合わせ">その他のお問い合わせ</option>
          </select>
     </dd>
     <dt>メッセージ</dt>
     <dd><textarea name = "message" class = "message"></textarea></dd>
</dl>
<button type="submit" name="action" value="send">Submit</button>
</form>

$(function(){
     $('form').submit(function(event) {
          //送信ボタンのキャンセル
          event.preventDefault();
          //serializeとJSON.stringifyを使ってシリアライズしたデータをJSONに加工
          var JSONdata = JSON.stringify( $( 'form' ).serializeArray() );
          $.ajax({
               url: './php/send_mail.php',
               type: 'post',
               data: JSONdata,
     })     
     .done(function(data) {
          // data にサーバーから返された html が入る
          // 通信が成功したときの処理
          alert('成功');
          //メッセージの表示切替
          $("#contact-box").replaceWith("<h4>お問い合わせいただきありがとうございます。</h4>");
     }) 
     .fail(function(data) {
          // 通信が失敗したときの処理
          //alert('失敗');
     })
     .always(function(data) {
          // 通信が完了したとき
     });
});

 

参考リンク

https://teratail.com/questions/56108

jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。

https://qiita.com/hkomo746/items/c18dcf4471cc5dc6d769
https://qiita.com/kidatti/items/21cc5c5154dbbb1aa27f