Question

I have a basic html and a javascript function as below. When I serialize the form by form Id, it works. But I want to serialize a piece of html content that doesnt a form such as $('.FormReference').serialize().

What can’t I do this?

    $(function () {

        $('#btnLogin').click(function (event) {

            alert($('#form1').serialize());
        });

    });


<form id="form1" runat="server" action="">
    <div>
        <table class="FormReference">
            <tr>
                <td>
                    <input type="text" id="_Username" name="Username" />
                </td>
                <td>
                    <input type="text" id="_Password" name="Password" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" id="btnLogin" value="Login" />
                </td>
            </tr>
        </table>
    </div>
    </form>

Answer 1

From the documentation:

The .serialize() method can act on a jQuery object that has selected individual form elements, such as <input>, <textarea>, and <select>. However, it is typically easier to select the <form> tag itself for serialization:

So you have two options:

$('.FormReference').closest('form').serialize(); // serialize the whole form
$('.FormReference').find('input, select, textarea, button').serialize(); // serialize only elements contained within .FormReference
$('.FormReference').find(':input').serialize(); // shorter, but less efficient, alternative