JavaScript ve spojení s webovými formuláři se používá již velmi dlouho. Používá se běžně k okamžité kontrole toho, jetsli jsou pole formuláře vyplněná správně ještě před odesláním dat na server.
Dříve než na základě nějakých poskytnutých dat můžeme něco ověřit je třeba data z formuláře vytáhnout. A tohoto docílíme přefixem document.forms. Stejně
jako u ostatních elementů lze i u formuláře přidělovat id či upravovat atributy. Vytvořme si tedy formulář:
<form id="formular" action="#" onsubmit="return zkontrolujFormular();">
<p>Uživatelské jméno: <input id="textbox1" name="textJmeno" type="text" /></p>
<p<input id="odesliFormular1" type="submit" /> </p>
K formuláři je následně možné přistoupit pomoci jeho id nebo indexu:
document.forms["formular"]
Tímto jsme si zajistili přístuk k formuláři a pomocí příkazu value je možné získat data z formuláře.
//Například
document.forms["formular"].textJmeno.value
Neboť je práce s jednotlivými prvky formuláře obdobná tak zde uvedu pouze jeden příklad, který obsahuje ukázku práce s většinou prvků:
function nastav(typ) {
if (typ.value == "Zeleninový speciál") {
document.getElementById("papricky").checked = "true";
document.getElementById("cibule").checked = "true";
document.getElementById("houby").checked = "true";
} else if (typ.value == "Masový speciál") {
document.getElementById("parek").checked = "true";
document.getElementById("cabajka").checked = "true";
document.getElementById("sunka").checked = "true";
} else if (typ.value == "Hawaii") {
document.getElementById("sunka").checked = "true";
document.getElementById("ananas").checked = "true";
}
}
//Zaškrtávací pole nabývá pouze hodnot true nebo false!
function pripravitPizzu() {
var pocetPoli = document.forms["pizzaFormular"].ingredience.length;
var kurka = document.forms["pizzaFormular"].kurka;
var velikost = document.forms["pizzaFormular"].velikost;
var pocetKurek = kurka.length;
var pocetVelikosti = velikost.length;
var novyElement = document.createElement("p");
novyElement.setAttribute("id","objednavka");
document.body.appendChild(novyElement);
novyElement.appendChild(document.createTextNode("Tato pizza bude
obsahovat:"));
for (var c = 0; c < pocetKurek; c++) {
if (kurka[c].checked) {
var novyElement = document.createElement("p");
novyElement.setAttribute("id","kurkaElement" + i);
document.body.appendChild(novyElement);
novyElement.appendChild(document.createTextNode(kurka[c].value +
" kůrka"));
}
}
for (var s = 0; s < pocetVelikosti; s++) {
if (velikost[s].checked) {
var novyElement = document.createElement("p");
novyElement.setAttribute("id","velikostElement" + i);
document.body.appendChild(novyElement);
novyElement.appendChild(
document.createTextNode(velikost[s].value +
" velikost"));
}
}
for (var i = 0; i < pocetPoli; i++) {
if (document.forms["pizzaFormular"].ingredience[i].checked) {
var novyElement = document.createElement("p");
novyElement.setAttribute("id","novyElement" + i);
document.body.appendChild(novyElement);
novyElement.appendChild(document.createTextNode(
document.forms["pizzaFormular"].
ingredience[i].value));
}
}
}
<form id="pizzaFormular" action="#" onsubmit="return false;">
<p>
<input type="button" onclick="nastav(zelenSpecial)"
name="zelenSpecial" value="Zeleninový speciál" />
<input type="button" onclick="nastav(masoSpecial)" name="masoSpecial"
value="Masový speciál" />
<input type="button" onclick="nastav(hawaii)" name="hawaii" value="Hawaii" />
</p>
<table>
<tr><td>Ingredience</td>
<td>Kůrka</td>
<td>Velikost</td>
</tr>
<tr>
<td><input type="checkbox" id="parek" value="Párek"
name="ingredience" />Párek</td>
<td><input type="radio" name="kurka" value="Normální"
checked="checked" id="kurka1" />Normální</td>
<td><input type="radio" name="velikost" value="Malá"
checked="checked" id="vel1" />Malá</td>
</tr>
<tr>
<td><input type="checkbox" id="cabajka" value="Čabajka" name="ingredience" />
Čabajka</td>
<td><input type="radio" name="kurka" value="Tlustá" id="kurka2" />Tlustá
</td>
<td><input type="radio" name="velikost" value="Střední" id="vel2" />Střední
</td>
</tr>
<tr>
<td><input type="checkbox" id="sunka" value="Šunka" name="ingredience" />Šunka
</td>
<td><input type="radio" name="kurka" value="Tenká" id="kurka3" />Tenká</td>
<td><input type="radio" name="velikost" value="Velká" id="vel3" />Velká</td>
</tr>
<tr>
<td><input type="checkbox" id="papricky"
value="Zelené papričky" name="ingredience" />Zelené papričky</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" id="houby" value="Houby" name="ingredience" />
Houby</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" id="cibule" value="Cibule" name="ingredience" />
Cibule</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" id="ananas" value="Ananas" name="ingredience" />
Ananas</td>
<td></td>
</tr>
</table>
<p><input type="submit" id="odesliFormular" name="odesliFormular"
value="Připravit pizzu" onclick="pripravitPizzu();" /></p>
</form>
Pokud chceme pomocí JavaScriptu vytvořit dynamické a graficky vynikající stránky, ať už chceme nebo ne, tak CSS pomocí JavaScriptu budeme muset využít. Pomocí této funkce může pomocí jednoduché funkce rychle a účině třeba naformátovat tabulky na celém webu. Ukážeme si tedy jak jednoduše změnit barvu odkazu na webové stránce.
<script type="text/javascript">
var odkaz = document.getElementById("odkaz");
odkaz.style.color = "blue";
</script>
<body>
<a href="#">Tady tohle je odkaz, který jsme si upravili</a>
</body>
Osobně si myslím, že není co víc si o stylech pomocí JavaScriptu víc vysvětlovat, proto jsem níže uvedl tabulku, která porovnává rozdíly mezi příkazy CSS a příkazy CSS využívanými pomocí JavaScriptu.
| CSS | JavaScript |
|---|---|
| background background-attachment background-color background-image background-position background-repeat |
background backgroundAttachment backgroundColor backgroundImage backgroundPosition backgroundRepeat |
| border border-color border-style border-width Všechny ostatní vlastnosti týkající se rámečku, jako jsou border-bottom, border-bottom-color apod. |
border borderColor borderStyle borderWidth |
| bottom | bottom |
| clip | clip |
| color | color |
| cursor | cursor |
| display | display |
| font font-family font-size font-size-adjust font-stretch font-style font-variant font-weight |
font fontFamily fontSize fontSizeAdjust fontStretch fontStyle fontVariant fontWeight |
| height | height |
| left | left |
| letter-spacing | letterSpacing |
| line-height | lineHeight |
| list-style list-style-image list-style-position list-style-type |
listStyle listStyleImage listStylePosition listStyleType |
| outline outline-color outline-style outline-width |
outline outlineColor outlineStyle outlineWidth |
| overflow | overflow |
| right | right |
| text-align | textAlign |
| text-decoration | textDecoration |
| text-indent | textIndent |
| text-shadow | textShadow |
| text-transform | textTransform |
| top | top |
| vertical-align | verticalAlign |
| visibility | visibility |
| width | width |
| word-spacing | wordSpacing |
| z-index | zIndex |