Invio di parti di modulo utilizzando jQuery serialize() e AJAX

Sto provando a inviare parti di un modulo da parte di AJAX utilizzando la serializzazione di jQuery. Il modulo ha 16 campi di testo. Ho 4 pulsanti. Il button0 invia i campi di testo 0,1,2,3 e button1 invia i campi di testo 4,5,6,7, ecc. Ecc. Come posso farlo?Invio di parti di modulo utilizzando jQuery serialize() e 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>'); 

    });

fonte

2013-04-21 jal

Posso vedere il tuo codice html qui? – underscore

C'è un motivo per cui non è possibile utilizzare 4 moduli separati? Ci sono scenari in cui è valido inviare più di 4 campi alla volta? – Beejamin

Sì, lo voglio. Ad esempio, se premo il tasto0, voglio solo inviare il testo0, testo1, testo2, testo3, txt4. E lo stesso vale per il resto dei pulsanti – jal

Se si vuole davvero rimanere con un solo modulo, provare qualcosa come ho fatto in this fiddle.

Creare sottosezioni per il modulo.

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

E poi basta selezionare tutti gli elementi delle parti:

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

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

Naturalmente se avete anche selezionare le caselle dovete aggiungerli ai selettori. Per esempio:

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

fonte

2013-04-21 11:48:27

Puoi anche semplicemente usare il selettore $ ('# secondi * [nome]') per selezionare qualsiasi elemento che abbia un attributo nome (pulsante, input, seleziona, textarea). jQuery non serializzerà i tag di sottomissione non formali oi nuovi tag form HTML 5 (keygen, output). http://jsfiddle.net/bVEd7/ – fyrye

Grande mi aiuta a risolvere il mio grosso problema –

Prova DEMO and CODE

Esempio, modificare le vostre esigenze:

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

In questo modo ottenere tutti gli ingressi che ha ve form2 class.

fonte

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.

fonte

2016-09-02 08:00:16

Ciao Rakesh Kumar, e benvenuti a Stack Overflow. Ho un commento sulla tua risposta: il codice che hai suggerito sembra promettente, ma con qualche contesto sarebbe una risposta migliore; ad esempio, potresti spiegare come e perché questo cambiamento proposto risolverà il problema del questionario, forse includendo un link alla documentazione pertinente. Ciò lo renderebbe più utile per loro e anche più utile per altri lettori di siti che sono alla ricerca di soluzioni a problemi simili. –

Invio di parti di modulo utilizzando jQuery serialize() e AJAX

risposta

Problemi correlati