Skip to content

Instantly share code, notes, and snippets.

@24icewolf42
Last active August 29, 2015 14:15
Show Gist options
  • Save 24icewolf42/e2770b039d1420103a6c to your computer and use it in GitHub Desktop.
Save 24icewolf42/e2770b039d1420103a6c to your computer and use it in GitHub Desktop.
How to populate/serialize a jQuery Mobile form using JSON
<html>
<head>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.mobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.mobile/1.4.5/jquery.mobile.min.css">
<script type="text/javascript" src="http://davestewart.io/resources/javascript/jQuery/populate/jquery.populate.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.serializejson/1.2.3/jquery.serializejson.min.js"></script>
<script>
$(function () {
$("#test-form").populate({
"name": "Hans Dieter"
});
$("#load").click(function () {
var jsonData = JSON.parse($("#footer").html());
$("#test-form").populate(jsonData);
});
$("#save").click(function () {
var jsonData = $("#test-form").serializeJSON();
$("#footer").html(JSON.stringify(jsonData));
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile Form</h1>
</div>
<div data-role="main" class="ui-content">
<form id="test-form">
<label for="name">Name :</label>
<input type="text" name="name" id="name">
<label for="select-multiple-2">Custom multiple select:</label>
<select multiple="multiple" data-native-menu="false" name="select-multiple-2" id="select-multiple-2">
<option value="">Choices:</option>
<option value="small">One</option>
<option value="medium">Two</option>
<option value="large">Three</option>
</select>
<label for="slider-2">Slider:</label>
<input type="range" name="slider-2" id="slider-2" value="50" min="0" max="100" data-highlight="true">
<input id="load" type="button" data-inline="true" value="Load" data-theme="b">
<input id="save" type="button" data-inline="true" value="Save" data-theme="b">
</form>
</div>
<div data-role="footer">
<h5 id="footer"></h5>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment