M06 UF3A2. Teoria
Salta a la navegació
Salta a la cerca
T. Recórrer un formulari, diferents tècniques
fitxer form1.htm: recorrem un formulari (amb diversos elements) amb diferents tècniques, i diferents maneres d'accedir als elements del formulari. S'ha de tenir present que el valor dels radio button i dels check box no és evident.
<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Comptar elements</title>
<meta name="description" content="Comptar elements" />
<script type="text/javascript">
//<![CDATA[
var valor = "";
function elementsForm1() {
var dades = "";
var form_elements = document.getElementById('formu').elements;
for (i=0; i<form_elements.length; i++) {
if(form_elements[i].value == ''){
valor = 'sense valor';
}else{
if((form_elements[i].type == 'radio')||(form_elements[i].type == 'checkbox')){
if(form_elements[i].checked == true){
valor = form_elements[i].value;
}else{
valor = "sense valor";
}
}else{
valor = form_elements[i].value;
}
}
dades += form_elements[i].tagName +'(' + form_elements[i].name + ' - ' + form_elements[i].type +')' +'-' + valor + '<br />';
}
document.getElementById('info').innerHTML = dades;
}
function elementsForm2() {
forms = document.getElementsByTagName("form");
dades = "Número de formularis:<br />";
dades += forms.length;
dades += "<br />";
dades += "Nom del formulari:<br />";
dades += forms[0].name;
dades += "<br />";
dades += "Número d'elements del formulari:<br />";
dades += forms[0].elements.length;
dades += "<br />";
dades += "Llistat de tots els elements del formulari:<br />";
for (i=0;i<forms[0].elements.length;i++)
{
dades += forms[0].elements[i].name;
dades += " (" + forms[0].elements[i].type + ")";
if((forms[0].elements[i].type == 'radio')||(forms[0].elements[i].type == 'checkbox')){
if(forms[0].elements[i].checked == true){
dades += " - " + forms[0].elements[i].value;
}else{
dades += " - ";
}
}else{
dades += " - " + forms[0].elements[i].value;
}
dades += "<br />";
}
document.getElementById('info').innerHTML = dades;
}
function elementsForm3() {
//bàsicament és igual que l'anterior, però canvia una mica la forma de recórrer el formulari
dades = "Llistat de tots els elements del formulari:<br />";
for(i=0; ele=document.frm_dades_personals.elements[i]; i++)
{
dades += ele.name;
dades += " (" + ele.type + ")";
if((ele.type == 'radio')||(ele.type == 'checkbox')){
if(ele.checked == true){
dades += " - " + ele.value;
}else{
dades += " - ";
}
}else{
dades += " - " + ele.value;
}
dades += "<br />";
}
document.getElementById('info').innerHTML = dades;
}
function elementsForm4() {
dades = "";
dades += document.forms[0].name + " - " + document.forms[0].action + "<br />";
//abusant del DOM:
dades += document.frm_dades_personals.name + " - " + document.frm_dades_personals.action + "<br />";
dades += document.forms[0].elements[1].name + " - " + document.forms[0].elements[1].type + "<br />";
//abusant del DOM:
dades += document.frm_dades_personals.nom.name + " - " + document.frm_dades_personals.nom.type + "<br />";
dades += document.forms[0].elements[1].name + " - " + document.frm_dades_personals.nom.type + "<br />";
document.getElementById('info').innerHTML = dades;
}
function elementsForm5() {
//Recorrem els nodes del formulari. Això vol dir que els nodes no seran només els elements del formulari pròpiament,
//sinó també tots els elements HTML que conté, com ara <br />, etc.
dades = "";
frm_nodes = document.forms[0].childNodes;
dades += "Número de nodes: " + frm_nodes.length + "<br />";
for (i=0;i<frm_nodes.length;i++)
{
dades += frm_nodes[i] + " - ";
dades += "tipus: " + frm_nodes[i].type + " - ";
dades += "nodename: " + frm_nodes[i].nodeName + " - ";
dades += "name: " + frm_nodes[i].name + " - ";
dades += "valor: " + frm_nodes[i].value + "<br />";
}
document.getElementById('info').innerHTML = dades;
}
//]]>
</script>
</head>
<body>
<h1>Exemple de formulari</h1>
<form name="frm_dades_personals" id="formu" action="processar.htm">
<input type="hidden" name="num" value="12"><br />
nom: <input type="text" name="nom"><br />
cognoms: <input type="text" name="cognom"><br />
password: <input type="password" name="pwd"><br />
<input type="radio" name="sex" value="male" >Male<br />
<input type="radio" name="sex" value="female">Female<br />
<input type="checkbox" name="chk_bici" value="bici">Bicicleta<br />
<input type="checkbox" name="chk_cotxe" value="cotxe">Cotxe<br />
<select name="cotxes">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select><br />
<textarea name="txt_area" rows="10" cols="30"></textarea><br />
<input type="button" onclick="elementsForm1();" name="processar1" value="processar1"><br />
<input type="button" onclick="elementsForm2();" name="processar2" value="processar2"><br />
<input type="button" onclick="elementsForm3();" name="processar3" value="processar3"><br />
<input type="button" onclick="elementsForm4();" name="processar4" value="processar4"><br />
<input type="button" onclick="elementsForm5();" name="processar5" value="processar5"><br />
</form>
<p id="info"></p>
</body>
</html>
T. accedir a un formulari, 3 maneres diferents
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Comptar elements</title>
<meta name="description" content="" />
<script type="text/javascript">
//<![CDATA[
function mostrar() {
console.log(document.forms[0].action); //amb l'index de la col.lecció forms
console.log(document.forms['frm_dades_personals'].action); //amb l'index associatiu (conec com es diu el formulari)
console.log(document.frm_dades_personals.action); //conec com es diu el formulari
}
//]]>
</script>
</head>
<body onload="mostrar()">
<h1>Exemple de formulari</h1>
<form name="frm_dades_personals" id="formu" action="processar.htm">
nom: <input type="text" name="nom"><br />
</form>
</body>
</html>
