Formulário dinâmico
Olá amigos, estou com um problema.
Preciso de criar um formulário que seja dinâmico e fazer a sua validação. A criação do formulário já está feita e a funcionar, agora a validação é que me está a dar problemas devido ao formulário ser dinâmico.
Será que alguém me pode ajudar??
O objectivo do formulário é: ao clicar em mais (+) adiciona um novo form alterando as variáveis dinamicamente , ao clicar em menos (-) retira o último. A validação dinâmica é que não consigo fazer.
Ajudem-me
Segue o código:
<html><head> <title>Computadores</title> <script type="text/javascript"> document.write('<center><h1>Computadores</h1>'); var n = 0; function addElement() { var ni = document.getElementById('computador'); n++; var newdiv = document.createElement('div'); var divIdName = 'my'+n+'Div'; newdiv.setAttribute('id',divIdName); newdiv.innerHTML = '<br /><hr width="40%" color="#999999"></hr>'+ '<table border="0" style="font-family: Verdana; font-size: 11px">'+ '<tr><td align="right">Utilizador:</td><td><input type="text" name="user'+n+'" size="40" /></td></tr>'+ '<tr><td colspan="2" align="center"><h3><u>Características</u></h3></td></tr>'+ '<tr><td colspan="2" align="center"><strong>CPU</strong></td></tr>'+ '<tr><td align="right">Modelo:</td><td><input type="text" name="modelo'+n+'" size="20" /></td></tr>'+ '<tr><td align="right">Velocidade:</td><td><input type="text" name="vel'+n+'" size="5" /> <select name="tipo_unid_para_cpu'+n+'"><option label="GHz">GHz</option><option label="MHz">MHz</option></select></td></tr>'+ '<tr><td colspan="2" align="center"><strong>Disco</strong></td></tr>'+ '<tr><td align="right">Marca:</td><td><input type="text" name="nome'+n+'" size="20" /></td></tr>'+ '<tr><td align="right">URL:</td><td><input type="text" name="url'+n+'" value="http://" size="40" /></td></tr>'+ '<tr><td align="right">Modelo:</td><td><input type="text" name="modeloDisco'+n+'" size="20" /></td></tr>'+ '<tr><td align="right">Capacidade:</td><td><input type="text" name="valDisco'+n+'" size="5" /> <select name="unidDisco'+n+'"><option label="Gb">Gb</option><option label="Mb">Mb</option></select></td></tr>'+ '<tr><td colspan="2" align="center"><strong>Memória</strong></td></tr>'+ '<tr><td align="right">Capacidade:</td><td><input type="text" name="valMem'+n+'" size="5" /> <select name="unidMem'+n+'"><option label="Gb">Gb</option><option label="Mb">Mb</option></select></td></tr>'+ '</table>'; ni.appendChild(newdiv); } function remElement() { if(n > 1) removeElement('my'+n+'Div'); } function removeElement(divNum) { var d = document.getElementById('computador'); var olddiv = document.getElementById(divNum); d.removeChild(olddiv); n--; } function validaForm() { var d = document.formulario; for(i = n; i > 0; i--) { //var user = 'd.user'+i+'.value'; //document.write(user); if(d.user1.value == "") { alert('Não introduziu utilizador para o computador '+i+'!'); return false; } } return true; } </script></head><body style="font-family: Verdana; font-size: 11px" onload="addElement();"> <form name="formulario" action="" method="POST" onsubmit="return validaForm();"> <p id="computador"> <input type="button" onclick="addElement();" value="+" /><input type="button" onclick="remElement();" value="-" /> </p> <hr width="40%" color="#999999"></hr> <input type="submit" value="Submeter" /> </form></center></body></html>Discussão (1)
Carregando comentários...