web-dev-qa-db-ja.com

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

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

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>');

    });
jqueryajaxserialization
23
jal

本当に1つのフォームだけにとどまりたい場合は、私が 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()
31
Marcel Gwerder

試してみてください デモとコード

例、必要に応じて変更します。

<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>

これにより、form2クラスを持つすべての入力が取得されます。

2
Rok Burgar

よりセマンティックで詳細なアプローチは、カスタムプロパティを使用して、さまざまなフォームパーツを選択することです。コンテナをいじることなく、フォーム要素を別のボタンに簡単に再割り当てできます。

$('button[name="button1"]').click(function() {
  data = $('[scope="part1"]').serialize();
  console.log(data);
});
$('button[name="button2"]').click(function() {
  data = $('[scope="part2"]').serialize();
  console.log(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" name="text1" scope="part1" />
  <input type="text" name="text2" scope="part1" />
  <input type="text" name="text3" scope="part1" />
  <input type="text" name="text4" scope="part1" />
  <button type="button" name="button1">Button 1</button>
  <input type="text" name="text5" scope="part2" />
  <input type="text" name="text6" scope="part2" />
  <input type="text" name="text7" scope="part2" />
  <input type="text" name="text8" scope="part2" />
  <button type="button" name="button2">Button 2</button>
</form>
1
OXiGEN
var formData    =    $(form).find('#selectedOptions : input') . serialize();
         $.post(url, formData)  .done(function (data) 
         {  
             alert('hi');
        });

where #selectedOptions is id of the element.
0
Rakesh Kumar