JQuery .serialize() возвращает пустой

Question

У меня есть эта форма внутри таблицы:

<table id="fields"> 
    <form method="post" id="accountform"></form> 
    <tbody><tr><td class="key">First Name:</td><td class="value">bla bla</td></tr> 
    <tr><td class="key">Last Name:</td><td class="value">bla bla</td></tr> 
    <tr><td class="key">Email:</td><td class="editable"><input type="text" class="textbox" value="blabla" name="input0"></td></tr> 
    <tr><td class="key">Cell Number:</td><td class="editable"><input type="text" class="textbox" value="123-456-7890" name="input1"></td></tr> 
    <tr><td class="key">Extension:</td><td class="editable"><input type="text" class="textbox" value="1234" name="input2"></td></tr> 
    <tr><td class="key">Authority Level:</td><td class="value">Admin</td></tr> 
    <tr><td align="right" colspan="2"><input type="submit" value="Save" id="submit"></td></tr> 
</tbody></table> 

Javascript/JQuery:

$(document).ready(function(){ 
    $("form#accountform").submit(function() { 
     alert($(this).serialize()); 
    }); 
}); 

Когда я отправить форму предупреждение выходит пустым. : | У меня действительно нет идеи, почему это происходит. Каждое текстовое поле имеет имя. Я уже сделал сериализованные формы, подобные этому (внутри таблицы).

Edit: Это 'оригинальный' HTML (перед JQuery и браузер редактирует его):

<table id="fields"> 
    <form method="post" id="accountform" action=""> 
    <tr><td class="key">First Name:</td><td class="value"><?php echo $_SESSION['firstname']; ?></td></tr> 
    <tr><td class="key">Last Name:</td><td class="value"><?php echo $_SESSION['lastname']; ?></td></tr> 
    <tr><td class="key">Email:</td><td class="editable"><?php echo $_SESSION['email']; ?></td></tr> 
    <tr><td class="key">Cell Number:</td><td class="editable"><?php echo formatPhone($_SESSION['phone']); ?></td></tr> 
    <tr><td class="key">Extension:</td><td class="editable"><?php echo $_SESSION['ext']; ?></td></tr> 
    <tr><td class="key">Authority Level:</td><td class="value"><?php echo authToName($_SESSION['auth']); ?></td></tr> 
    <tr><td align="right" colspan="2"><input type="submit" value="Edit" id="submit"/></td></tr> 
    </form> 
</table> 

И это JQuery, который заменяет текст с текстовыми полями:

$("td.editable").each(function(index) { 
       $(this).html("<input type='text' class='textbox' value='"+$(this).html()+"' name='input"+index+"'/>"); 
}) 

Answer 1

Проблема, безусловно, разметка:

<table id="fields"> 
    <form method="post" id="accountform" action=""> <!-- Form does not go in the table --> 
    <tr>...</tr> 
     ... 
    <tr>...</tr> 
    </form> <!-- Form does not go in the table --> 
</table> 

Оберните таблицу в <form> теги вместо того, чтобы положить их в таблице.

<form method="post" id="accountform" action=""> 
    <table id="fields"> 
     <tr><td class="key">First Name:</td><td class="value"><?php echo $_SESSION['firstname']; ?></td></tr> 
     <tr><td class="key">Last Name:</td><td class="value"><?php echo $_SESSION['lastname']; ?></td></tr> 
     <tr><td class="key">Email:</td><td class="editable"><?php echo $_SESSION['email']; ?></td></tr> 
     <tr><td class="key">Cell Number:</td><td class="editable"><?php echo formatPhone($_SESSION['phone']); ?></td></tr> 
     <tr><td class="key">Extension:</td><td class="editable"><?php echo $_SESSION['ext']; ?></td></tr> 
     <tr><td class="key">Authority Level:</td><td class="value"><?php echo authToName($_SESSION['auth']); ?></td></tr> 
     <tr><td align="right" colspan="2"><input type="submit" value="Edit" id="submit"/></td></tr> 
    </table> 
</form> 

Работа fiddle (заменял в простых текстовых значений для того, что ваш PHP код будет подразделам в).

Answer 2

Ваш элемент <form> заканчивается преждевременно (см. Конечный тег рядом с закрывающим тегом?).

Попробуйте этот HTML вместо:

<form method="post" id="accountform"> 
    <table id="fields"> 
    <tbody> 
     <tr><td class="key">First Name:</td><td class="value">bla bla</td></tr> 
     <tr><td class="key">Last Name:</td><td class="value">bla bla</td></tr> 
     <tr><td class="key">Email:</td><td class="editable"><input type="text" class="textbox" value="blabla" name="input0"></td></tr> 
     <tr><td class="key">Cell Number:</td><td class="editable"><input type="text" class="textbox" value="123-456-7890" name="input1"></td></tr> 
     <tr><td class="key">Extension:</td><td class="editable"><input type="text" class="textbox" value="1234" name="input2"></td></tr> 
     <tr><td class="key">Authority Level:</td><td class="value">Admin</td></tr> 
     <tr><td align="right" colspan="2"><input type="submit" value="Save" id="submit"></td></tr> 
    </tbody> 
    </table> 
</form>​