jQuery .serialize() returns empty

Question

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 comes 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+"'/>");
})

pete · Accepted Answer · 2012-03-17 03:43:16Z

3

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

answered Mar 17, 2012 at 3:43

pete

25.2k4 gold badges40 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jacob Brunson Over a year ago

Woah it works. It's odd because i have other forms set up the same way and serialize works on them. Hm. I'll go back and fix them. Which answer do I pick as correct? You solved the second half of the issue and Blender solved the first.

pete Over a year ago

That's a question only you can answer. :)

Blender · Accepted Answer · 2012-03-17 03:07:41Z

2

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>

answered Mar 17, 2012 at 3:07

Blender

300k55 gold badges462 silver badges512 bronze badges

3 Comments

Jacob Brunson Over a year ago

Hm that's very odd! It seems that my browser automatically closed the tag prematurely because when the page first loads there are no input fields inside the form. During runtime I have jquery that inserts fields into the table, but it seems that the form is already closed so that the fields do nothing. I need to do further investigation.

Jacob Brunson Over a year ago

I think it may be doing this because of invalid markup. I'll post the 'original' HTML (before the jquery) and the code that changes it.

Jacob Brunson Over a year ago

I've added details to the original post.

Collectives™ on Stack Overflow

jQuery .serialize() returns empty

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related