Formulario Inteligente

Flavio Dos Reis · Agosto 13, 2013

Boa noite, tem como adicionar ou remover linhas numa tabela sem utilizar botao "add ou delete row" , utilizando um textbox onde se coloca o numero de linhas a ser adicionados na tabela?

William Bruno · Agosto 13, 2013

sim, é possível.

basta ler o onkeyup on onblur desse input, depende doq vc quer e então fazer o append caso tenha adicionado menos linhas doq foi pedido, ou remover caso já tenha adicionado mais.

como vc tentou fazer?

Flavio Dos Reis · Agosto 13, 2013

Bruno, obrigada pela resposta.
Sei fazer da forma normal com botao para adicionar e remover mas quero mesmo faze-lo sem botao.

Ainda nao o fiz.

Por exemplo:

tenho um formulario com um campo nome e um campo email e um outro campo por exemplo numero de passageiro se colocarmos 2 no campo nº passageiro sera acrescentado mais uma linha com os campos campo nome e um campo email para serem preenchidos

William Bruno · Agosto 14, 2013

aham, eu entendi oq vc quer.

é só fazer oq eu disse mesmo. Vc vai fazer um loop pelo número q foi digitado no campo quantidade e fazer o append.

mostre oq vc tentou fazer, ai conseguimos te ajudar.

Flavio Dos Reis · Agosto 14, 2013

Bruno fiz assim so que quando cria a nova linha os campos nao ficam com o mesmo tamanho.

Coloquei o js e o css logo juntos para depois fazer cada um no seu ficheiro e importa-los qd td tiver pronto.

Podias dizer-me o que se passa em relacçao a isso?

fique bem. aguardando tua resposta.

<html>
<head>
<script type="text/javascript">
window.onload = function()
{
    
    /*
        testado no firefox
    */
    
    var timeout     = null;//vai armazenar o que vai acontecer depois que evento for acionado
    var txtPessoas     = document.getElementById('pessoas');//elemento onde sera informado a quanidade de pessoas
    var target         = document.getElementById('target');//contem a quantidade adiconal de campos que serão criados automaticamente
    
    pessoas.onkeypress=function(){
        
        if(timeout)
        {
            
            //limpa o timeout se ja tiver algum
            window.clearTimeout(timeout)
            
        }
        
        //seta o timeout para adicionar os clientes apos algum tempo, evita de ficar adicionando campos sem necessidade
        timeout = window.setTimeout(setaPessoas,500);//300 ms é razoavel
        
    }
    
    var setaPessoas = function(){
        
        //sera chamada pelo timeout
        
        //corrige o value do input
        if(parseInt(txtPessoas.value) < 1 || txtPessoas.value.length < 1)
        {
            
            txtPessoas.value = 1;//quantidade minima de pessoas
            
        }
        
        var i;//para utilizar no loop
        
        target.innerHTML = ""; //limpa os imputs previamente adicionados
        
        //vamos comecar com 1, porque o 0 seria o primeiro, vamos adicionar os campos a partir da segunda pessoa
        for(i=1;i<txtPessoas.value;i++)
        {
            
            //criando os elementos de 1 linha
            var tr         = document.createElement('tr');
            var td0     = document.createElement('td');
            var td1     = document.createElement('td');
            var txtNome = document.createElement('input');
            var txtEmail= document.createElement('input');
            
            txtNome.setAttribute('type' , 'text');
            txtNome.setAttribute('placeholder' , 'nome');
            
            txtEmail.setAttribute('type' , 'text');
            txtEmail.setAttribute('placeholder' , 'email');
            
            tr.appendChild(td0);
            tr.appendChild(td1);
            
            td0.appendChild(txtNome);
            td1.appendChild(txtEmail);
            
            target.appendChild(tr);//adiciona a linha criada ao elemento que contem as pessoas adicionais
            
        }
        
    }
    
 
}
</script>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>
                    informe a quantidade de pessoas
                </td>
                <td>
                    <input type='text' value='1' placeholder='pessoas' id='pessoas' size=5 />
                </td>
            </tr>
            <tr>
                <td>
                    <input type='text' placeholder='nome' size=50/>
                </td>
                <td>
                    <input type='text' placeholder='email' size=50 />
                </td>
            </tr>
        </thead>
        <tbody id='target'>
        </tbody>
    </table>
    
</div>
</body>
</html>

William Bruno · Agosto 14, 2013

só faltou vc dar o size

            txtNome.setAttribute('type' , 'text');
            txtNome.setAttribute('size' , '50');
            txtNome.setAttribute('placeholder' , 'nome');

            txtEmail.setAttribute('type' , 'text');
            txtEmail.setAttribute('size' , '50');
            txtEmail.setAttribute('placeholder' , 'email');

Flavio Dos Reis · Agosto 14, 2013

Obrigada mais uma vez Bruno.E como faço para que quando escolher um radio numa das linhas nao altera os das outras linhas criadas?

Flavio Dos Reis · Agosto 15, 2013

Boa noite, ja fiz o formulario com ajuda do pessoal do forum mas, o problema é que nas linhas criadas os radio nao funcionam como deviam funcionar por exemplo: se temos duas linhas criadas se seleccionar-mos um dos grupos radio perde a seleccao do radio da linha anterior antes selecionada. Podem dizer-me onde que esta o meu erro?

Obrigada pela atençao

William Bruno · Agosto 15, 2013

isso é um radio cara, qndo vc seleciona um, não pode selecionar outro de mesmo name.

é esse o comportamento mesmo.

Será que vc não ta querendo um checkbox ? ou então mudar o name dos radios de acordo com o grupo q vc quer ?

Flavio Dos Reis · Agosto 15, 2013

Este é o codigo completo da uma olhada e faz um teste nos radio quando inseres mais do que uma linha e ve o comportamento dos radios assim ja teras uma ideia do que refiro.

---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Passenger information form</title>

#main{

width:927px;

position:absolute;

height: 300px;

left: 110px;

top: 17px;

}

.titulos {

color: #9FCFFF;

font:"Trebuchet MS", Arial, Helvetica, sans-serif

}

.subtitulos {

color: #9FCFFF;

font:"Trebuchet MS", Arial, Helvetica, sans-serif

font-size:12px;

}

.labels{

color: #000;

font:"Trebuchet MS", Arial, Helvetica, sans-serif;

font-size:12px;

}

h1{

font-family: Arial;

color: #000;

font-size:10px;

}

table.db-table { border-right:1px solid #FFF; border-bottom:1px solid #FFF; background-color:#EBEAE9;}

table.db-table th { background:#eee; padding:5px; border-left:1px solid #ccc; border-top:1px solid #ccc; }

table.db-table td { padding:5px; border-left:1px solid #ccc; border-top:1px solid #ccc; }

.h1_ {

font-size: 10px;

}

#main .db-table tr td div {

font-family: Arial, Helvetica, sans-serif;

font-size: 10px;

}

#main .db-table tr td div {

font-size: 12px;

}

#main .db-table tr td div {

font-weight: bold;

}

</style>

window.onload = function()

{

/*

testado no firefox

*/

var timeout = null;//vai armazenar o que vai acontecer depois que evento for acionado

var txtPessoas = document.getElementById('pessoas');//elemento onde sera informado a quanidade de pessoas

var target = document.getElementById('target');//contem a quantidade adiconal de campos que serão criados automaticamente

pessoas.onkeypress=function(){

if(timeout)

{

//limpa o timeout se ja tiver algum

window.clearTimeout(timeout)

}

//seta o timeout para adicionar os clientes apos algum tempo, evita de ficar adicionando campos sem necessidade

timeout = window.setTimeout(setaPessoas,500);//300 ms é razoavel

}

var setaPessoas = function(){

//sera chamada pelo timeout

//corrige o value do input

if(parseInt(txtPessoas.value) < 1 || txtPessoas.value.length < 1)

{

txtPessoas.value = 1;//quantidade minima de pessoas

}

var i;//para utilizar no loop

target.innerHTML = ""; //limpa os imputs previamente adicionados

//vamos comecar com 1, porque o 0 seria o primeiro, vamos adicionar os campos a partir da segunda pessoa

for(i=1;i<txtPessoas.value;i++)

{

//criando os elementos de 1 linha

var tr = document.createElement('tr');

var td0 = document.createElement('td');

var td1 = document.createElement('td');

var td2 = document.createElement('td');

var td3 = document.createElement('td');

var td4 = document.createElement('td');

var td5 = document.createElement('td');

var td6 = document.createElement('td');

var td7 = document.createElement('td');

var td8 = document.createElement('td');

var td9 = document.createElement('td');

/* var txtNome = document.createElement('input');

var txtEmail= document.createElement('input');*/

var txtFirstname = document.createElement('input');//input.width = '100px';

var txtSurname= document.createElement('input');

var txtAge= document.createElement('input');

var txtEconomyclass= document.createElement('input');

var txtBusinessclass= document.createElement('input');

var txtWindownsseat= document.createElement('input');

var txtIsleseat= document.createElement('input');

var txtSpecialmeal= document.createElement('input');

var txtSpecialassistance= document.createElement('input');

txtFirstname.setAttribute('type' , 'text');

txtFirstname.setAttribute('size' , '40');

txtFirstname.setAttribute('placeholder' , 'Firstname');

txtSurname.setAttribute('type' , 'text');

txtSurname.setAttribute('size' , '40');

txtSurname.setAttribute('placeholder' , 'Surname');

txtAge.setAttribute('type' , 'text');

txtAge.setAttribute('size' , '2');

txtAge.setAttribute('placeholder' , 'Age');

txtEconomyclass.setAttribute('type' , 'radio');

txtEconomyclass.setAttribute('name' , 'action_');

txtEconomyclass.setAttribute('placeholder' , '');

txtBusinessclass.setAttribute('type' , 'radio');

txtBusinessclass.setAttribute('name' , 'action_');

txtBusinessclass.setAttribute('placeholder' , '');

txtWindownsseat.setAttribute('type' , 'radio');

txtWindownsseat.setAttribute('name' , 'action');

txtWindownsseat.setAttribute('placeholder' , '');

txtIsleseat.setAttribute('type' , 'radio');

txtIsleseat.setAttribute('name' , 'action');

txtIsleseat.setAttribute('placeholder' , '');

txtSpecialmeal.setAttribute('type' , 'text');

txtSpecialmeal.setAttribute('size' , '2');

txtSpecialmeal.setAttribute('placeholder' , '');

txtSpecialassistance.setAttribute('type' , 'text');

txtSpecialassistance.setAttribute('size' , '2');

txtSpecialassistance.setAttribute('placeholder' , '');

tr.appendChild(td0);

tr.appendChild(td1);

tr.appendChild(td2);

tr.appendChild(td3);

tr.appendChild(td4);

tr.appendChild(td5);

tr.appendChild(td6);

tr.appendChild(td7);

tr.appendChild(td8);

tr.appendChild(td9);

/* td0.appendChild(txtNome);

td1.appendChild(txtEmail);

*/

td0.appendChild(txtFirstname);

td1.appendChild(txtSurname);

td2.appendChild(txtAge);

td3.appendChild(txtEconomyclass);

td4.appendChild(txtBusinessclass);

td5.appendChild(txtWindownsseat);

td6.appendChild(txtIsleseat);

td7.appendChild(txtSpecialmeal);

td8.appendChild(txtSpecialassistance);

target.appendChild(tr);//adiciona a linha criada ao elemento que contem as pessoas adicionais

}

</script>

</head>

<body>

<h3>

<legend class="titulos">Passenger information form</legend>

</h3>

<tr >

<h1>Number of Passenger</h1>

</div></td>

</tr>

</table>

</br>

<tr>

<td width="251"><div align="center"><h1>First Name</h1></div></td>

<td width="251"><div align="center"><h1>Surname</h1></div></td>

<td width="59"><div align="center"><h1>Economy Class</h1></div></td>

<td width="67"><div align="center"><h1>Business Class</h1></div></td>

<td width="71"><div align="center"><h1>Windowns Seat</h1></div></td>

<td width="53"><div align="center"><h1>Special Meal</h1></div></td>

<td width="81"><div align="center"><h1>Special Assistance</h1></div></td>

</tr>

<!--</table>

<tr>

<!-- <td width="224" ><div align="left"><input type='text' value='' placeholder='First Name' id='firstname' /></div></td>

</tr>

</thead>

</tbody>

</table>

</div>

</body>

</html>

---

cristianoolv · Agosto 15, 2013

Voce tem que mudar os nomes dos campos colocando um numero que diferencie os nomes, quando eu faço tabelas desse tipo uso colocar o nome como:

l + numero_da_linha

Veja :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ransitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Passenger information form</title>
 
<style type="text/css">
 
#main{
width:927px;
position:absolute;
height: 300px;
left: 110px;
top: 17px;
}
 

 

 

h1{  
    font-family: Arial;  
    color: #000;
font-size:10px; 
}
table.db-table { border-right:1px solid #FFF; border-bottom:1px solid #FFF; background-color:#EBEAE9;}
table.db-table th { background:#eee; padding:5px; border-left:1px solid #ccc; border-top:1px solid #ccc; }
table.db-table td { padding:5px; border-left:1px solid #ccc; border-top:1px solid #ccc; }
 


th{ font-size: 12px;
 }

 td{ text-align: center;}


</style>
 
<script type="text/javascript">
window.onload = function()
{
    
    /*
        testado no firefox
    */
    
    var timeout     = null;//vai armazenar o que vai acontecer depois que evento for acionado
    var txtPessoas     = document.getElementById('cn');//elemento onde sera informado a quanidade de pessoas
    var target         = document.getElementById('target');//contem a quantidade adiconal de campos que serão criados automaticamente
    

    target.innerHTML +=   "<tr><td><input type='text'  placeholder='First Name' id='firstname' name='l1[firstname]' size='40'/><td ><input type='text' name='l2[surname]' placeholder='Surname' id='surname'  size='40'/><td ><input type='text' name='l2[age]' placeholder='Age' id='age'  size='2'/><td ><input type='radio' id='economyclass' name='l2[r1]' value='economyclass' checked /><td ><input type='radio' id='businessclass' name='l2[r1]' value='businessclass'  /><td ><input type='radio' id='windownsseat' name='l2[r2]' value='windownsseat' check /><td ><input type='radio' id='isleseat' name='l2[r2]' value='isleseat'  /><td ><input type='text'  id='specialmeal' size='2'  name='l2[specialmeal]' /><td ><input type='text' name='l2[Assistanc]' id='specialassistance' size='2'/>";
          
        txtPessoas.onkeypress=function(){
        
        if(timeout)
        {
            
            //limpa o timeout se ja tiver algum
            window.clearTimeout(timeout)
            
        }
        
        //seta o timeout para adicionar os clientes apos algum tempo, evita de ficar adicionando campos sem necessidade
        timeout = window.setTimeout(setaPessoas,500);//300 ms é razoavel
        
    }
    
    var setaPessoas = function(){
        
        //sera chamada pelo timeout
        
        //corrige o value do input
        if(parseInt(txtPessoas.value) < 1 || txtPessoas.value.length < 1)
        {
            
            txtPessoas.value = 1;//quantidade minima de pessoas
            
        }
        
        
        
        target.innerHTML = ""; //limpa os imputs previamente adicionados
        
  
        for(var i = 1, a = txtPessoas.value; i<=a; i++)
        {
            
       target.innerHTML +=   "<tr><td><input type='text'  placeholder='First Name' id='firstname' name='l"+i+"[firstname]' size='40'/><td ><input type='text' name='l"+i+"[surname]' placeholder='Surname' id='surname'  size='40'/><td ><input type='text' name='l"+i+"[age]' placeholder='Age' id='age'  size='2'/><td ><input type='radio' id='economyclass' name='l"+i+"[r1]' value='economyclass' checked /><td ><input type='radio' id='businessclass' name='l"+i+"[r1]' value='businessclass'  /><td ><input type='radio' id='windownsseat' name='l"+i+"[r2]' value='windownsseat' check /><td ><input type='radio' id='isleseat' name='l"+i+"[r2]' value='isleseat'  /><td ><input type='text'  id='specialmeal' size='2'  name='l"+i+"[specialmeal]' /><td ><input type='text' name='l"+i+"[Assistanc]' id='specialassistance' size='2'/>";
          
        }
        
    }
    
 
}
</script>
</head>
 
<body>
 
   <input type='text' value='1' id='cn' />
   
   
<table width="868" height="39" border="0" cellpadding="0" cellspacing="0" class="db-table" >
<thead>
  <tr>
    <th width="251">First Name
    <th width="251">Surname
    <th width="35">Age
    <th width="59">Economy Class
    <th width="67">Business Class
    <th width="71">Windowns Seat
    <th width="43">Isle Seat
    <th width="53">Special Meal
    <th width="81">Special Assistance
<tbody id="target">
  

 
  </table>
  </div>
 
</body>
</html>

Arquivado

Formulario Inteligente

Recommended Posts

Flavio Dos Reis 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Flavio Dos Reis 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Flavio Dos Reis 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Flavio Dos Reis 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Flavio Dos Reis 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Flavio Dos Reis 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

cristianoolv 93

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante