2016-04-02 5 views
1

50のフォームを1つのフォームのように送信するJqueryの方法はありますか?それがあったかのようにJquery/javascriptの方法では50のフォームを1つのフォームのように送信しますか?

<form><input name="1"></form> 
<form><input name="2"></form> 
<form><input name="3"></form> 
<form><input name="4"></form> 

<form><input name="1"> 
<input name="2"> 
<input name="3"> 
<input name="4"></form> 

すべての入力を含めて、このオブジェクトのようにそれを送信する:

document.forms[0] 
+0

あなたがこれを望むなぜ私は思ったんだけど... –

+0

私は(GoogleがスクリプトのデプロイのWebアプリをアプリ)、GoogleのWebアプリケーションでフォームを作ってるんです。フォームには多くの入力(50+)があり、IpadのSafariで非常に遅く実行されます。 stackoverflowで議論したように、ソリューションは各入力を囲む50以上の別々のフォームタグを作成することですが、Google Webアプリケーションでは複数のフォーム入力をスクリプト側(google.script.run)に実行することはできません。このように私はアプリのスクリプトに1つのフォーム要素を送ることができ、ipadフォームの問題を解決しました:-) –

答えて

1
あなたは50の他の形式の値を含む新しい単一のフォームを構築することができ

var $form = $(document.createElement('form')); 
$('form :input').clone().appendTo($form); 

現在、$formにはすべての入力が含まれています。

+0

うわー、あなたはそれをとても簡単に見せてくれます、ありがとう! –

0

フォームデータをシリアル化して送信します。

<html> 
    <head> 
     <title>36373219</title> 
     <script type="text/javascript" src="assets/js/jquery-2.1.4.js"></script> 
    </head> 

    <body> 
     <form class="form" id="f1" > 
      <input name="f1_inp_1" value="1"> 
      <input name="f1_inp_2" value="2"> 
     </form> 

     <form class="form" id="f2" > 
      <input name="f2_inp_1" value="1"> 
      <input name="f2_inp_2" value="2"> 
     </form> 

     <form class="form" id="f3" > 
      <input name="f3_inp_1" value="1"> 
      <input name="f3_inp_2" value="2"> 
     </form> 

     <button id="fire">Fire</button> 

    </body> 
    <script type="text/javascript"> 

     $('#fire').on('click', preparesend); 

     function preparesend(event) 
     { 
      sendform(event); 
     } 

     function sendform(event){ 

      event.stopPropagation(); // Stop stuff happening 
      event.preventDefault(); // Totally stop stuff happening 

      var data = new FormData(); 

      $('form').each(function(key,value) { 

       data.append(key, $(this).serialize()); 

      }); 
      $.ajax({ 
       url: 'get_response.php', 
       type: 'POST', 
       data: data, 
       cache: false, 
       processData: false, 
       contentType: false, 
       success: function(data, textStatus, jqXHR) 
       { 
        alert(data); 
       } 
      }); 
     } 
    </script> 
</html> 
関連する問題