jQuery serialize（）とAJAXを使用してフォームの一部を送信する

jQueryのシリアル化を使用してAJAXによって1つのフォームの一部を送信しようとしています。フォームには16のテキストフィールドがあります。私は4つのボタンを持っています。 button0はテキストフィールド0,1,2,3を送信し、button1はテキストフィールド4,5,6,7などを送信します。どのようにすればいいですか？jQuery serialize（）とAJAXを使用してフォームの一部を送信する

HTML

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Serialize</title> 
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script> 
</head> 
<body> 
    <form id='miForm' class='miForm' name='miForm' action='env.php' method='POST'> 

    </form> 
</body> 
</html>

のjQuery：

 $(document).ready(function(){ 
     for(i=0;i<16;i++){ 
      $('form').append('Campo de texto '+i+'<input type="text" id="txt'+i+'" value="Campo '+i+'" readonly="yes"/><br>'); 
     } 
     for(i=0;i<4;i++){ 
      $('form').append('<input type="button" id="butEnv'+i+'" value="Enviar'+i+'"/><br>'); 
     } 
     $('form').append('<input type="button" id="butGen" value="Enviar Global"/><br>'); 

    });

出典

2013-04-21 jal

は、私はあなたのhtmlコードは、ここで見ることができますか？ – underscore

4つのフォームを使用できない理由はありますか？一度に4つ以上のフィールドを送信することが有効なシナリオはありますか？ – Beejamin

はい、したいです。たとえば、button0を押すと、text0、text1、text2、text3、txt4だけを送信します。その場合、ボタンの残りの部分は同じです – jal

もし私がthis fiddleで行ったようなものを試してみてください。

フォームのサブパーツを作成します。

<form> 
    <div id="first"> 
     <input name="tbox1" type="text"> 
     <input name="tbox2" type="text"> 
     <input name="tbox3" type="text">  
     <input id="button1" type="button" value="button1"> 
    </div> 
    <div id="second"> 
     <input name="tbox4" type="text"> 
     <input name="tbox5" type="text"> 
     <input name="tbox6" type="text">  
     <input id="button2" type="button" value="button2"> 
    </div> 
</form>

そしてちょうど部品のすべての要素を選択します。もちろん

$(document).ready(function() { 
    $('#button1').on('click', function() { 
     alert($('#first input').serialize()); 
    }); 

     $('#button2').on('click', function() { 
     alert($('#second input').serialize()); 
    }); 
});

あなたも、あなたがセレクタに追加する必要がある選択ボックスを持っている場合。たとえば：

$('#second input, #second select').serialize()

出典

2013-04-21 11:48:27

名前アトリビュート（ボタン、入力、選択、テキストエリア）を持つ要素を選択するには、単に$（ '＃second * [name] ）。 jQueryは非フォーム送信ベースのタグまたは新しいHTML 5フォームタグ（keygen、出力）をシリアル化しません。 http://jsfiddle.net/bVEd7/ – fyrye

Greatは私の大きな問題を解決するのに役立ちます –

は、あなたのニーズに変更し、DEMO and CODE

例を試してみてください：

<form name="test"> 
    <input type="textinput" name="first" value="test1" class="form2" /> <br/> 
    <select name="second" class="form1"> 
     <option value="1">opt 1</option> 
     <option selected="selected" value="2">opt 2</option> 
    </select> 
    <input type="textinput" name="third" value="test1" class="form2" /> <br/> 
</form> 

<script> 
(function() { 
    // get second form elements 
    var options = $('form[name=test]').find('input, textarea, select').filter('.form2').serialize(); 

    alert(options); 

}()) 
</script>

これは、そのすべての入力を取得しますヘクタールveフォーム2クラス。

出典

2013-04-21 11:45:15

var formData = $(form).find('#selectedOptions : input') . serialize(); 
     $.post(url, formData) .done(function (data) 
     { 
      alert('hi'); 
     }); 

where #selectedOptions is id of the element.

出典

2016-09-02 08:00:16

こんにちはRakesh Kumar、そしてStack Overflowへようこそ。私はあなたの答えについてのコメントを持っています：あなたが示唆したコードは有望に見えますが、いくつかの文脈ではより良い答えになります。たとえば、この提案された変更がどのようにしてなぜ問題の問題を解決するのか、そしておそらく関連文書へのリンクを含む理由を説明することができます。そうすれば、彼らにとってより有用になり、同様の問題に対する解決策を探している他のサイトの読者にとってもより有用になります。 –

jQuery serialize（）とAJAXを使用してフォームの一部を送信する

答えて

関連する問題