how to serialize a simple HTML form contents?

Question

I need to serialize data (using JQuery) in my form consisting of a dropdown and a textbox. the data should be stored in an object to be consumed by other functions. please help me

Please [edit] your question and include a [mcve] of what your form looks like and what you’ve tried so far with jQuery. — Sebastian Simon, Jun 26 '18 at 01:57
Possible duplicate of [serializing and submitting a form with jQuery POST and php](https://stackoverflow.com/questions/15173965/serializing-and-submitting-a-form-with-jquery-post-and-php) — Muhammad Omer Aslam, Jun 26 '18 at 01:58

Ramin Ahmadi · Answer 1 · 2018-06-26T02:03:12.107

I've used Jquery to grab form element and then used .serialized method to serialize data which in return will be stored on a javascript variable named data. you can use data for your other functions. more info on serialization method: https://api.jquery.com/serialize/

$(document).ready(function () {
$('#myButton').on('click', submitTheForm);
});
function submitTheForm() {
var formData = $('#myForm').serialize();
var data = decodeURIComponent(formData);
alert('serialized data: ' + data)
$('#myForm').submit();
}

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
</head>
<body>
<form id="myForm">
Select a product:
  <select name="favoriteCar">
<option>Apple</option>
<option value="Chevy">Orange</option>
<option>Banana</option>
</select><br />
Comment:
<input type="text" name="comment" />
</form>
<button id="myButton">order product</button>
</body>
</html>

how to serialize a simple HTML form contents?

1 Answers1