Question

I have a form which contains some unique input fields and some others with duplicate names, like this:

<form method="post">
  Title: <input type="text" name="title" /><br />
  Content: <input type="text" name="content" /><br />
  Name: <input type="text" name="name" /><br />
  Email: <input type="text" name="email" /><br />
  Name: <input type="text" name="name" /><br />
  Email: <input type="text" name="email" /><br />
  Name: <input type="text" name="name" /><br />
  Email: <input type="text" name="email" />
</form>

So ‘title’ and ‘content’ are just string values, but ‘name’ and ’email’ send an array of strings to the destination. This is what I want. I will store the title and content values into a table, and save the name/email combinations as rows in a different table.

If I post this form in the standard way (just by specifying an ‘action’ parameter in the form tag) then the values are sent to an ASP.NET page and can be processed as strings and string arrays and in theory they can be quite easily inserted into a database.

However, the application won’t allow the form to be submitted in the traditional way. Instead I must use jQuery AJAX to post the form.

The question is, how do I replicate the behaviour of a traditional form post, maintaining array values, using jQuery AJAX?

I know it’s possible to serialize the form values but then I need to do some server-side logic to deserialize and effectively create the array, which is an extra step.

Does anyone know of a way to just replicate the same behaviour in passing a string array through jQuery AJAX as when doing a standard form post?

Thanks folks!

Answer 1

You can use jQuery’s $.serialize or $.serializeArray to serialize form fields to send them using ajax like following

$.post('URL',$('form').serialize(),function(data){
     // success
})

Read more on $.post