javascript：formタグ無しでform送信

javascript

クリックイベントをjqueryにしているので、jqueryを使っていない記述にする必要アリ。

<button class="btn btn-primary">formタグなしでform送信</button>
<script>
    $(〇〇〇).on('click', 'button.btn', function(){
      // form送信したい内容。
      var _ipt = ({});
      _ipt.Key01 = "値01";
      _ipt.Key02 = "値02";
      
      // formタグのもとを作成
      var _form = document.createElement("form");
      
      for (var i in _ipt) {
         // inputタグを作成
         var _tmpInput = document.createElement("input");
         _tmpInput.setAttribute("name", i);        // inputタグのname属性の値
         _tmpInput.setAttribute("type", "text");   // inputタグのtype属性の値（全部textで良さそうな気がする→hiddenで大丈夫のような気もする）
         _tmpInput.setAttribute("value", _ipt[i]); // inputタグのvalue属性の値
         
         // formタグの中にinputタグを追加
         _form.appendChild(_tmpInput);
      }
      
      _form.action = "getform.php";   // formタグのaction属性の値と同じ。
      _form.method = "post";          // formタグのmethod属性の値と同じ。(get / post)
      _form.target = "_blank";        // formタグのtarget属性の値と同じ。不要なら無くてOK
      _form.encoding="application/x-www-form-urlencoded";
      
      // formを出力しないと送信できないブラウザがある
      _form.style = "overflow:hidden;width:0;height:0;";
      document.body.appendChild(_form);
      
      // formを送信
      _form.submit();
      
   });
</script>

jquery

<button type="button" class="btn btn-primary">formタグなしでform送信</button>
<script>
   $(〇〇〇).on('click', 'button.btn', function(){
      // formタグを作成
      var tagForm = $('<form></form>');
      
      // action、method属性を指定。他は必要に応じて設定。
      tagForm.attr({
         'action':   'getform.php',
         'method':   'post',
         // 'target':   '_blank',
         'encoding': 'application/x-www-form-urlencoded',
      });
      
      // input要素たちをformタグに入れていく。
      tagForm.append('<input type="text" name="ipt01" value="値01" />');
      tagForm.append('<input type="text" name="ipt02" value="値02" />');
      
      // formタグを出力：出力しないと送信されないブラウザがいる
      tagForm.attr({
         'style':    'overflow:hidden;width:0;height:0;'
      });
      $("body").append(tagForm);
      
      // 送信
      tagForm.submit();
   });
</script>

関連項目

・jquery $.ajax()の基本型