Jquery et plusieurs formulaires sur une page

Question

J'ai plusieurs formulaires qui sont sortis d'une base de données sur la même page. Cela fonctionne bien quand je n'utilise pas ajax. Quand j'utilise Jquery, cela ne fonctionne que pour le premier formulaire. Quelqu'un pourrait-il me diriger dans la bonne direction s'il vous plaît?

Jquery .....

$('.updateSubmit').live('click', function() { 
    var id = $('.id').val(); 
    var hardSoft = $('.hardSoft').val(); 
    var brand = $('.brand').val(); 
    var subCat = $('.subCat').val(); 
    var subSubCat = $('.subSubCat').val(); 
    var tProduct = $('.tProduct').val(); 
    var description = $('.description').val(); 
    var quantity = $('.quantity').val(); 
    var price = $('.price').val(); 
    var tCondition = $('.tCondition').val(); 
    var featured = $('.featured').val(); 


    var theData = 'id=' + id + '&hardSoft=' + hardSoft + '&brand=' + 
    brand + '&subCat=' + subCat + 
    '&subSubCat=' + subSubCat + '&tProduct=' + tProduct 
    +'&description=' + description + 
    '&quantity=' + quantity + '&price=' + price + '&tCondition=' + 
    tCondition + '&featured=' + featured; 


    $.ajax ({ 
    type: 'POST', 
    url: '/updateGrab.php', 
    data: theData, 
    success: function(aaa) { 
     $('.'+id).append('<div class="forSuccess">'+aaa+'</div>'); 
    } // end success 
    }); // end ajax 

    return false; 

}); // end click 

---

et ma forme php ......

while ($row = $stmt->fetch()) { 

echo " <form action='http://www.wbrock.com/updateGrab.php' 
method='post' name='".$id."'> 

<input type='hidden' class='id' name='id' value='".$id."' /> 

Hardware/Software 
<input type='text' class='hardSoft' name='hardSoft' 
value='".$hardSoft."' /> 

Brand 
<input type='text' class='brand' name='brand' value='".$brand."' /> 

Sub-category 
<input type='text' class='subCat' name='subCat' 
value='".$subCat."' /> 

Sub-Sub-Cat 
<input type='text' class='subSubCat' name='subSubCat' 
value='".$subSubCat."' /> 

Product 
<input type='text' class='tProduct' name='tProduct' 
value='".$tProduct."' /> 

Description 
<input type='text' class='description' name='description' 
value='".$description."' /> 

Qty 
<input type='text' class='quantity' name='quantity' 
value='".$quantity."' /> 

Price 
<input type='text' class='price' name='price' value='".$price."' /> 

Cond 
<input type='text' class='tCondition' 
name='tCondition'value='".$tCondition."' /> 

Featured 
<input type='text' class='featured' name='featured' 
value='".$featured."' /> 


<input type='submit' id='".$id."' class='updateSubmit' 
name='updateSubmit' value='Update' /> 

</form> 

<span class='".$id."'></span> 

"; // end echo 

} // end while loop from database 

---

Answer 1

Tous les formulaires et les champs ont le même nom/classe. Alors, quand vous faites

var hardSoft = $('.hardSoft').val(); 

vous obtenez seulement la valeur du premier élément avec la classe hardSoft.

---

Vous pouvez obtenir l'élément de forme « parent » avec .closest() et utiliser .serialize() pour créer la chaîne de données:

$('.updateSubmit').live('click', function() { 

    var $form = $(this).closest('form'); // get the form element this button belongs to 
    var theData = $form.serialize(); // generates the data string 

    $.ajax ({ 
     type: 'POST', 
     url: '/updateGrab.php', 
     data: theData, 
     success: function(aaa) { 
     // append return data to the current form 
     $form.append('<div class="forSuccess">'+aaa+'</div>'); 
     } // end success 
    }); // end ajax 
    return false; 
)}; 

Answer 2

Le problème est que sélecteurs comme $('.hardSoft') choisiront plusieurs éléments (car il y a plusieurs formulaires) puis .val() prendra la valeur de la première. Vous pouvez essayer de trouver le formulaire en utilisant .parents('form'), puis en prenant ses enfants .children('.hardSoft').

$('.updateSubmit').live('click', function() { 
    var currentForm = $(this).parent(); 
    var hardSoft = currentForm.children('.hardSoft').val(); 
    // ... etc. 

D'autre part, il s'agit d'une tâche plutôt courante. Jetez un oeil à la jQuery Form plugin, ce qui vous permet de faire la même chose en utilisant beaucoup moins de code. Il est probablement aussi plus fiable et possède plusieurs fonctionnalités que vous pourriez vouloir utiliser plus tard dans votre projet.

Answer 3

Je suppose que l'ajout du contexte dans vos sélecteurs jQuery pourrait aider. Donnez un essai à:

var hardSoft = $('.hardSoft', $(this).parent()).val(); 

sur chaque sélecteur

Answer 4

Juste une note: Vous pouvez économiser beaucoup de temps de codage si vous sérialiser ces formes.

$('.updateSubmit').live('click', function() { 
    $.post("updateGrab.php", $("#yourform").serialize()); 
} 

Source:

http://api.jquery.com/serialize/