lea.js
Version:
A Tiny Javascript Framework For Modern Browsers (And Developers)
107 lines (89 loc) • 3.26 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lea.js</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-theme.min.css">
<style>body{padding-top:50px;padding-bottom:30px;}.logo{display:block;margin-right:1em;}.navbar{border:none;}</style>
<script data-main="assets/js/index" src="assets/js/require.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="assets/img/lea.jpg" srcset="assets/img/lea@2x.jpg 2x" alt="Lea" height="50" width="50" class="logo">
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Summary</a></li>
<li><a href="#about">Homepage</a></li>
<li><a href="https://github.com/Shakup/lea.js" title="GitHub">GitHub</a></li>
</ul>
</div>
</div>
</nav>
<div class="container" role="main">
<div class="page-header">
<h1>Forms</h1>
</div>
<div class="row">
<div class="col-md-8">
<form id="myForm" method="POST" action="async/form.json">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email" name="form[email]">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" name="form[password]">
</div>
<div class="form-group">
<input type="radio" name="form[gender]" value="female" id="female" checked>
<label for="female">Female</label>
<input type="radio" name="form[gender]" value="male" id="male">
<label for="male">Male</label>
</div>
<div class="form-group">
<label for="about">About you</label>
<textarea class="form-control" rows="3" id="about" name="form[about]"></textarea>
</div>
<div class="form-group">
<input type="checkbox" name="form[optin]" value="0" id="optin">
<label for="optin">Subscibe to newsletter</label>
</div>
<button type="submit" class="btn btn-primary" id="submit">Submit</button>
<button type="button" class="btn btn-default" id="show-data">Display data in console</button>
</form>
</div>
<pre class="col-md-4">// Submit button
$("#myForm").on("submit", function (event) {
// Cancel submission
event.preventDefault();
// Send form via ajax
$(this)
.submit({json: true})
.success(function (response) {
alert( response.status );
});
});
// Display data in console
$("#show-data").click(function () {
var data = $("#myForm").serialize();
console.log( data );
});
</pre>
</div>
</div>
<script>
requirejs(["form"]);
</script>
</body>
</html>