jQuery: вводимые значения формы не отображаются

Question

Проблема с этим битом кода qith jQuery. он должен выбрать значения из текущей формы, а затем отправить их, но когда я пытаюсь получить их с помощью jQuery, они всегда оказываются неопределенными. Я знаю, что результаты SQL прекрасны, так как они корректно отображаются в таблице HTML, так что это должно быть мои худшие навыки работы с JavaScript. Новый с JQuery и я при выпадении :(

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

РЕЗУЛЬТАТ:
ID: неопределенными
bCatID: не определено

Answer 1

Задайте вопрос по этому товару:

$(".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; 
}); 

Ссылки: .serialize()

Answer 2

Jquery не хорошо играть с формами внутри таблиц: вы должны реструктурировать свои HTML/JS.