jQuery: les valeurs d'entrée du formulaire sont affichées non définies

Question

Problème avec ce bit de code avec jQuery. il devrait choisir les valeurs de la forme courante et les soumettre, mais quand j'essaye de les obtenir avec jQuery elles apparaissent toujours indéfinies. Je sais que les résultats SQL sont corrects puisqu'ils s'affichent correctement dans le tableau HTML, donc ce doit être mes compétences JavaScript inférieures. Nouveau avec jQuery et je suis à la perte :(

PHP/HTML:

echo "<table>\n" 
while ($row = odbc_fetch_array($query)) 
    { 
    echo "<form class='catForm'>\n"; 
    echo "<input type=hidden class='catID' name='catID' value='".$row['running_id']."'/>\n"; 
    echo "<tr>\n"; 
    echo  "<td>".$row['running_id']."</td>\n"; 
    echo  "<td>".$row['site_id']."</td>\n"; 
    echo  "<td>".$row['main_category']."</td>\n"; 
    echo  "<td>".$row['map_name']."</td>\n"; 
    echo  "<td><input type=textfield class='bCatID' value='".$row['mapping_id']."' size=6/></td>\n"; 
    echo  "<td><input type=submit class='saveCat' value='Save'/></td>\n"; 
    echo  "<td><input type=submit class='killCat' value='Delete' /></td>\n"; 
    echo "</tr>\n"; 
    echo "</form>\n"; 
    } 
    echo "</table>"; 

jQuery:

$(".catForm").submit(function() { 
    var id = $(this).find('.catID').val(); 
    var bCatID = $(this).find('.bCatID').val(); 
    var dataString = 'id='+id+'&bCatID='+bCatID; 

    $.ajax({ 
    type: "POST", 
    url: 'adminUI/bin/updateSCategories.php', 
    dataType : 'json', 
    data: dataString, 
    success: function(data) 
    { 
     if (data.error == true) 
     $('.failure').html("Error, save failed.").show().fadeOut(2000); 
     if (data.error == false) 
     $('.success').html("Saved succesfully").show().fadeOut(2000); 
    }, 
    error: function(XMLHttpRequest, textStatus, errorThrown) 
    { 
     $('.failure').html("Error, save failed.").show().fadeOut(2000); 
    } 
    }); 
    return false; 
}); 

RÉSULTAT:
id: non défini
bCatID: non défini

Answer 1

Faites un essai:

$(".catForm").submit(function() { 
$.ajax({ 
    type: "POST", 
    url: 'adminUI/bin/updateSCategories.php', 
    dataType : 'json', 
    data: $(this).serialize(), 
    success: function(data) 
    { 
    if (data.error == true) 
     $('.failure').html("Error, save failed.").show().fadeOut(2000); 
    if (data.error == false) 
     $('.success').html("Saved succesfully").show().fadeOut(2000); 
    }, 
    error: function(XMLHttpRequest, textStatus, errorThrown) 
    { 
    $('.failure').html("Error, save failed.").show().fadeOut(2000); 
    } 
}); 
return false; 
}); 

Références: .serialize()

Answer 2

Jquery ne joue pas bien avec des formes à l'intérieur des tables: vous devez restructurer votre code html/js.