doevisualizations
Version:
Data Visualization Library based on RequireJS and D3.js (v4+)
62 lines (55 loc) • 1.6 kB
HTML
<html lang="en">
<head>
<title>Form Params</title>
<style type='text/css'>
body {font-family: verdana}
</style>
</head>
<body>
<p>Change the inputs to change the object</p>
<pre>Result = <span id='result'></span></pre>
<div id="demo-html">
<form id='fp' action=''>
<label>
People Count<br/><input name='talk[peopleCount]'/>
</label>
<br/><br/>
<label>
Audience Rating<br/>
<select name='talk[audienceRating]'>
<option value='3'>3</option>
<option value='2'>2</option>
<option value='1'>1</option>
</select>
</label>
<br/><br/>
Time Left<br/>
<label><input type='radio' name='talk[timeLeft]' value='1'/> 1 min</label><br/>
<label><input type='radio' name='talk[timeLeft]' value='5'/> 5 min</label><br/>
<label><input type='radio' name='talk[timeLeft]' value='10'/> 10 min</label><br/>
</form>
</div>
<script type='text/javascript' src='../../node_modules/steal/steal.js' main='@empty'>
</script>
<script type='text/javascript' id="demo-source">
steal('jquerypp/dom/form_params',function(){
// updates the JSON text
var update = function(){
// get form data
var json = $('#fp').formParams(),
// convert it to JSON
jsonString = JSON.stringify( json );
// show JSON
$('#result').text( jsonString );
};
// listen for changes and update
$('#fp').change(update);
$('input[name="talk[peopleCount]"]').keyup(update);
// show json right away
update();
});
</script>
</body>
</html>