フリーランスの忘備録

(function(){
  const form = document.getElementById('form');
  const submit = document.getElementById('submit');
  const formitems = form.querySelectorAll('input,textarea,select');
  submit.addEventListener('click',()=>{
    // POSTするテキストの準備
    let sendTextObj = {},
        sendText = null;
    formitems.forEach(item=>{
      const itemValue = item.value; // エスケープ処理をする場合はここで
      const itemName = item.getAttribute('name');
      const itemType = item.getAttribute('type');
      if( !(itemName in sendTextObj) ){
        sendTextObj[itemName] = [];
      }
      if( itemType  === 'radio' || itemType === 'checkbox' ){
        if( item.checked ){
          sendTextObj[itemName].push(itemValue);
        }
      }else{
        if( itemValue != undefined && itemValue != '' && itemValue != null){
          sendTextObj[itemName].push(itemValue);
        }
      }
    });
    if( !('g-recaptcha-response' in sendTextObj) ){
      const recaptcha = document.querySelector('[name="g-recaptcha-response"]');
      if( recaptcha != null ){
        sendTextObj['g-recaptcha-response'] = [recaptcha.value];
      }
    }
    Object.keys(sendTextObj).forEach(name=>{
      const value = sendTextObj[name].join(',');
      sendText = sendText==null?`${name}=${value}`:`${sendText}&${name}=${value}`;
    });

    // send.phpへPOST
    const xhr = new XMLHttpRequest();
    xhr.open('POST','send.php');
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
    xhr.send(sendText);
    xhr.onreadystatechange = () => {
      if(xhr.readyState === 4 && xhr.status === 200) {
        const responseObj = JSON.parse(xhr.response);
        if( responseObj["recaptcha"] === 'SUCCESS' ){
          // 成功したときの処理
        }else{
          // 失敗したときの処理
        }
      }else{
        // その他
      }
    }
    // Google reCAPTCHA v2 のリセット
    grecaptcha.reset();
  });
})();