Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> <form method="POST" id="calc" class="form-inline"> <span><label for="lorem">Lorem: </label><span class="myHidden">3</span><input type="text" size="1" name="lorem" value="3" id="lorem" class="form-control"> ks</span> <span><label for="ipsum">Ipsum: </label><span class="myHidden">5</span><input type="text" size="1" name="ipsum" value="5" id="ipsum" class="form-control"> ks</span> <input type="submit" value="Spočítať cenu" class="btn btn-primary"> </form> <div id="result"> <h3>Vaše data jsou</h3> <b>Lorem:</b> 3 ks<br> <b>Ipsum:</b> 5 ks<br> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.myHidden { width: 1px; margin-left: -1px; padding-left: 1px; background-color: transparent; color: transparent; overflow:hidden; display:inline-block; }
CSS
Autoformát
CSS reset
Až na konci
$(document).ready(function(){ $("#calc").hide(); var button = $('<a class="btn btn-primary">Chci upravit předchozí zadání</a>'); button.click(function() { $('#calc').show(); $(this).hide(); $('#result').hide(); }); $("#calc").after(button); $( ".form-control" ).keyup(function() { $(this).parent().find(".myHidden").text($(this).val()); }); });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>