Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Bruno Conte

Limite em adição de campos

Por , em Javascript

Recommended Posts

Bruno Conte    4

Bruno Conte
Postado

Pessoal uso um script que adiciona campos a um formulario.

minha duvida e que o usuario so pode adicionar no maximo 10 campos.

 

como faço para bloquear a quantidade?

 

codigo que uso e esse:

 

 
<script type="text/javascript">
var qtdeCampos = 0;
 
function addCampos() {
var objPai = document.getElementById("campoPai");
//Criando o elemento DIV;
var objFilho = document.createElement("div");
//Definindo atributos ao objFilho:
objFilho.setAttribute("id","filho"+qtdeCampos);
 
//Inserindo o elemento no pai:
objPai.appendChild(objFilho);
//Escrevendo algo no filho recém-criado:
document.getElementById("filho"+qtdeCampos).innerHTML = "<table width='100%' border='0'><tr><td width='10%' class='style12'><input type='text' name='quantidade[]' size='6'></td><td width='35%' class='style12'><input type='text' name='equipamento[]' size='40'></td><td width='34%' class='style12'><input type='text' name='descricao[]' size='40'></td><td width='13%' class='style12'><input type='text' name='valor[]' size='10' onkeypress='mascara(this,mvalor)'></td><td width='8%' class='style12'><input type='button' onclick='removerCampo("+qtdeCampos+")' value='Apagar'></td></tr></table>";
qtdeCampos++;
}
 
function removerCampo(id) {
var objPai = document.getElementById("campoPai");
var objFilho = document.getElementById("filho"+id);
 
//Removendo o DIV com id específico do nó-pai:
var removido = objPai.removeChild(objFilho);
}
</script>
 

<div id="campoPai"><img src="imgsfinanceiro/separacao.png" alt="" width="10" height="10" /></div>
        <input type="button" value="Adicionar Itens no Orçamento" onClick="addCampos()">

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Faz um if pela variável: qtdeCampos se ela for igual a 10, vc não faz o append e nem soma +1 nela.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Conte    4

Bruno Conte
Postado

William perdao desenterrar apenas hoje este topico, mais estou tentando fazer assim e nao trava.

 

fiz assim so que nao trava.

 

 
<script type="text/javascript">
var qtdeCampos = 0;
 
if ( qtdeCampos <= 10 ) {
 
function addCampos() {
var objPai = document.getElementById("campoPai");
//Criando o elemento DIV;
var objFilho = document.createElement("div");
//Definindo atributos ao objFilho:
objFilho.setAttribute("id","filho"+qtdeCampos);
 
//Inserindo o elemento no pai:
objPai.appendChild(objFilho);
//Escrevendo algo no filho recém-criado:
document.getElementById("filho"+qtdeCampos).innerHTML = "<table width='100%' border='0'><tr><td width='10%' class='style12'><input type='text' name='quantidade[]' size='6'></td><td width='35%' class='style12'><input type='text' name='equipamento[]' size='40'></td><td width='34%' class='style12'><input type='text' name='descricao[]' size='40'></td><td width='13%' class='style12'><input type='text' name='valor[]' size='10' onkeypress='mascara(this,mvalor)'></td><td width='8%' class='style12'><input type='button' onclick='removerCampo("+qtdeCampos+")' value='Apagar'></td></tr></table>";
qtdeCampos++;
}
 
}
 
else {
 
/*
*  nao faz nada
*/
 
}
 
function removerCampo(id) {
var objPai = document.getElementById("campoPai");
var objFilho = document.getElementById("filho"+id);
 
//Removendo o DIV com id específico do nó-pai:
var removido = objPai.removeChild(objFilho);
}
</script>

eu tinha um funcionário na empresa so para esse tipo de trabalho e ele saiu e agora surgiu a urgencia, se puder me ajudar a corrigir o que estou fazendo ficarei grato.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Da forma que está, vc vai travar que ele clique pela décima primeira vez no botão, mas não que tenha no máximo 10.

 

Teria que "contar" a quantidade de campos inicial, para substituir o zero assim que a página abrir.

Creio que seja isso que está faltando.

 

Exporte também o html isolado para que consigamos rodar um exemplo funcional.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Conte    4

Bruno Conte
Postado

o html so tem ele mesmo, pois ainda estou tentando fazer esse para continuar.

 

 

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
var qtdeCampos = 0;
if ( qtdeCampos <= 10 ) {
function addCampos() {
var objPai = document.getElementById("campoPai");
//Criando o elemento DIV;
var objFilho = document.createElement("div");
//Definindo atributos ao objFilho:
objFilho.setAttribute("id","filho"+qtdeCampos);
//Inserindo o elemento no pai:
objPai.appendChild(objFilho);
//Escrevendo algo no filho recém-criado:
document.getElementById("filho"+qtdeCampos).innerHTML = "<table width='100%' border='0'><tr><td width='10%' class='style12'><input type='text' name='quantidade[]' size='6'></td><td width='35%' class='style12'><input type='text' name='equipamento[]' size='40'></td><td width='34%' class='style12'><input type='text' name='descricao[]' size='40'></td><td width='13%' class='style12'><input type='text' name='valor[]' size='10' onkeypress='mascara(this,mvalor)'></td><td width='8%' class='style12'><input type='button' onclick='removerCampo("+qtdeCampos+")' value='Apagar'></td></tr></table>";
qtdeCampos++;
}
}
else {
/*
* nao faz nada
*/
}
function removerCampo(id) {
var objPai = document.getElementById("campoPai");
var objFilho = document.getElementById("filho"+id);
//Removendo o DIV com id específico do nó-pai:
var removido = objPai.removeChild(objFilho);
}
</script>
<body>
<div id="campoPai"><img src="imgsfinanceiro/separacao.png" alt="" width="10" height="10" /></div>
<input type="button" value="Adicionar Itens no Orçamento" onClick="addCampos()">
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito