Unable to Serialize HTML Form using jquery

Question

Hello there i am a newbie in ASP.NET development.I am unable to get the correct serialize form using Jquery.

<html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
 <title></title>
 <script src="jquery-1.10.2.js" type="text/javascript"></script>
 <script src="jquery-1.10.2.min.js" type="text/javascript"></script>
 <script type="text/javascript"> 
    $(document).ready(function () {
        $("#button2").click(function () {
            var form = $("#form1").serialize();
            alert(form);

        });
    });
   </script>
   </head>
    <body>
    <form id="form1" runat="server">
    <asp:TextBox ID="textbox1" runat="server"></asp:TextBox> 
    <asp:Button runat="server" ID="button2" Text="submit" />
    <div>

   </div>
  </form>
  </body> 
    </html>

@JasonP i was expecting key value pairs and then i wanted to recieve them in FormCollection but it is giving me error that "unable to parse _VIEWSTATE" — Alica Corwin
– Alica Corwin, Commented Aug 15, 2016 at 17:20

Soviut · Accepted Answer · 2016-08-15 17:20:18Z

The form serialization appears to be working correctly. It serializes the form into a URL format of name=value pairs. For example name=First%20Last&age=27.

Because you're using ASP.NET forms they have a hidden __VIEWSTATE field. That's why you're seeing __VIEWSTATE=SC20935uo236h2oth3li3h.... You shouldn't need to submit the viewstate because that's an ASP.NET-specific mechanism for tracking what state the forms are in.

You can exclude the __VIEWSTATE field from the serialization by using JQuery to select all inputs except __VIEWSTATE.

$('#form1').on('submit', function() {
    var serializedFields = $('input[name!=__VIEWSTATE]', this).serialize();
    console.log(serializedFields);
});

Open your browser's developer console (Ctrl+Shift+J on windows) to see the console.log() messages (this is far better than using alerts).

This works by listening for the form's submit event, then querying for all fields except __VIEWSTATE. Because we're inside the form submit event, this refers to the form, so we pass that as the context for our selector, hence the $('...', this).

Yes, just use a comma in your selector to do multiple attribute checks. '[...],[...]'
Almost. You shouldn't close the quotes around the comma. 'input[name!=__VIEW‌STATEGENERATOR],inp‌ut[name!=__VIEWSTATE]'‌

Collectives™ on Stack Overflow

Unable to Serialize HTML Form using jquery

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related