如何序列化一个简单的HTML表单内容?

时间:2018-06-26 01:52:59

标签: jquery html forms

我需要以包含下拉列表和文本框的形式序列化数据(使用JQuery)。数据应存储在一个对象中,以供其他功能使用。请帮助我

1 个答案:

答案 0 :(得分:1)

我已经使用Jquery来获取表单元素,然后使用.serialized方法来序列化数据,该数据反过来将存储在名为data的javascript变量中。您可以将数据用于其他功能。 有关序列化方法的更多信息: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>