Senden von Teilen des Formulars mithilfe von jQuery serialize() und AJAX

Ich versuche, Teile eines Formulars von AJAX mit jQuery serialisieren zu senden. Das Formular enthält 16 Textfelder. Ich habe 4 Knöpfe. Die button0 sendet die Textfelder 0, 1, 2, 3 und button1 sendet die Textfelder 4,5,6,7, etc usw. Wie kann ich es tun?Senden von Teilen des Formulars mithilfe von jQuery serialize() und 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>'); 

    });

Quelle

2013-04-21 jal

kann ich sehen, Ihr hier HTML-Code? – underscore

Gibt es einen Grund, warum Sie nicht 4 separate Formulare verwenden können? Gibt es Szenarien, in denen es möglich ist, mehr als 4 Felder gleichzeitig zu senden? – Beejamin

Ja, ich möchte. Zum Beispiel, wenn ich Button0 drücke, möchte ich nur die Text0, Text1, Text2, Text3, TXT4 senden. Und das gleiche für den Rest der Tasten – jal

Wenn Sie wirklich mit nur einem Formular bleiben möchten, versuchen Sie etwas wie ich in this fiddle getan habe.

Erstellen Sie Unterabschnitte für Ihr Formular.

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

Und dann wählen Sie einfach alle Elemente der Teile:

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

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

Natürlich, wenn Sie auch Auswahlboxen haben müssen Sie sie an die Wähler hinzuzufügen. Zum Beispiel:

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

Quelle

2013-04-21 11:48:27

Sie können auch einfach $ ('# second * [name]') Selektor verwenden, um ein Element mit einem Namenattribut (Schaltfläche, Eingabe, Auswahl, Textbereich) auszuwählen). jQuery serialisiert nicht-formularbasierte Tags oder die neuen HTML 5 Form-Tags (keygen, output) nicht. http://jsfiddle.net/bVEd7/ – fyrye

Great hilft mir mein großes Problem zu lösen –

Versuchen DEMO and CODE

Beispiel, auf Ihre Bedürfnisse ändern:

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

Dadurch werden alle Eingaben erhalten, ha ve Form2 Klasse.

Quelle

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.

Quelle

2016-09-02 08:00:16

Hallo Rakesh Kumar, und willkommen zu Stack Overflow. Ich habe einen Kommentar zu Ihrer Antwort: Der Code, den Sie vorgeschlagen haben, sieht vielversprechend aus, aber mit etwas Kontext würde es eine bessere Antwort geben; Zum Beispiel könnten Sie erklären, wie und warum diese vorgeschlagene Änderung das Problem des Fragestellers lösen würde, möglicherweise einschließlich eines Links zu der relevanten Dokumentation. Das würde es für sie nützlicher machen und auch für andere Leser der Website, die nach Lösungen für ähnliche Probleme suchen. –

Senden von Teilen des Formulars mithilfe von jQuery serialize() und AJAX

Antwort

Verwandte Themen