I have this form inside a table:

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

When I submit the form the alert es out blank. :| I really have NO idea why this happens. Each text box has a name. I've serialized forms similar to this (inside a table) before.

Edit: This is the 'original' HTML (before the jQuery and browser edits it):

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

And this is the jQuery that replaces the text with textboxes:

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

I have this form inside a table:

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

When I submit the form the alert es out blank. :| I really have NO idea why this happens. Each text box has a name. I've serialized forms similar to this (inside a table) before.

Edit: This is the 'original' HTML (before the jQuery and browser edits it):

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

And this is the jQuery that replaces the text with textboxes:

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

• javascript
• jquery
• html
• forms
• post

2 Answers 2

The problem is definitely the markup:

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

Wrap your table in the <form> tags instead of putting them in the table.

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

Working fiddle (subbing in plain-text values for what your PHP code would sub in).

Your <form> element ends prematurely (see the ending tag right next to the closing tag?).

Try this HTML instead:

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