formulário com seleção

mauricioms · Agosto 24, 2010

pessoal, bom dia sou novo em php e precisava de uma informação de como fazer um formulário.

ai vai, oi formulário já está pronto em html, o que eu precisaria e que por exemplo eu tenho o item escova de dente quando clico no item escova de dente eu posso escolher qualquer cor mas quando clico na escova de cabelo só posso escolher a cor preta acho que é uma questão de if e else mas não sei como fazer abaixo tem mais ou menos o que preciso..

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tabela</title>
</head>

<body>

<table style="width: 270px; height: 19px" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="width: 191px">
<form method="post">
<select name="escova" style="height: 19px; width: 184px">
<option selected="selected">escova de dente</option>
<option>escova de cabelo</option>
</select></form>
</td>
<td>
<form method="post">
<select name="cor" style="width: 69px">
<option selected="selected">verde</option>
<option>azul</option>
<option>vermelho</option>
<option>preto</option>
</select></form>
</td>
</tr>
</table>

</body>

</html>

Editado Agosto 25, 2010 por mauricioms

ESerra · Agosto 24, 2010

Isso você vai fazer com JS.

Movendo PHP » JS.

Romero Dias · Agosto 24, 2010

Prezado,

Abaixo segue um código que vai te ajudar,

<html>
<head>

<script LANGUAGE="javascript">
function pegaValor()
{
    var objSelect = document.forms[0].escova;
    
    if(objSelect.options[objSelect.selectedIndex].value != '')
    {
        //carrega as cores no select, conforme o modelo de escova
        habilitarCor(objSelect.options[objSelect.selectedIndex].value);
    }
    else
    {
        //Caso o select de escovas estiver fazio
        //reseta o select de cores
        var objSelect = document.forms[0].cor;
        objSelect.options.length = 0;
    }
}



function habilitarCor(modelo)
{
    
    var objSelect = document.forms[0].cor;
    
    //Reseta o select de cores
    objSelect.options.length = 0;
    
    
    //define o array de cores caso modelo for escova-dente
    if(modelo == 'escova-dente')
    {
        var arrayCor = {azul : 'Azul',vermelho : 'Vermelho', preto : 'Preto'};
    }
    
    //Define o array de cores caso modelo for escova-cabelo
    if(modelo == 'escova-cabelo')
    {
        var arrayCor = {preto : 'Preto'};
    }
    
    
    //Preenche o select de cores com o array defindo na condição IF
    for (index in arrayCor)
    {
        objSelect.options[objSelect.options.length] = new Option(arrayCor[index],index);
    }
    
    
}

</script>

</head>

<body>

<form>
<select name="escova" onChange="pegaValor();">
    <option value=""></option>
    <option value="escova-dente">Escova Dente</option>
    <option value="escova-cabelo">Escova Cabelo</option>
</select>



<select name="cor">
</select>

</form>

</body>
</html>

Abraço

mauricioms · Agosto 24, 2010

valeu era exatamente isso que eu precisava...

mauricioms · Agosto 24, 2010

beleza romero, eu fiz o código mas agora estou com problemas porque preciso colocar mais duas opções que dependen da primeirao que preciso mudar para ele pegar os arrays da segunda opção para jogar na terceira e na quarta, eu ainda queria fazer a pessoa poder escolher 5 produtos por vez tenho que fazer 5 vezes o mesmo processo na mesma página ?

Editado Agosto 30, 2010 por mauricioms

mauricioms · Agosto 30, 2010

segue código, tentei fazer de várias maneiras e não consegui..

<html>
<head>

<script LANGUAGE="javascript">
function pegaValor()
{
    var objSelect = document.forms[0].tipo1;
    
    if(objSelect.options[objSelect.selectedIndex].value != '')
    {
        //carrega as cores no select, conforme o modelo de escova
        habilitarCodigo1(objSelect.options[objSelect.selectedIndex].value);
    }
    else
    {
        //Caso o select de escovas estiver fazio
        //reseta o select de cores
        var objSelect = document.forms[0].codigo1;
        objSelect.options.length = 0;
    }
}

function habilitarCodigo1(modelo)
{
    
    var objSelect = document.forms[0].codigo1;
    
    //Reseta o select de cores
    objSelect.options.length = 0;
    
    
    //define o array de cores caso modelo for escova-dente
    if(modelo == 'duplex')
    {
        var arrayCodigo1 = {001 : '001',002 : '002', ma56 : 'ma56',005 : '005',006 : '006', 007 : '007',008 : '008',010 : '010bp',011 : '011',012 : '012',013 : '013',014 : '014',016 : '016',017 : '017',018 : '018',067 : '067',009 : '009'};
    }
    
    //Define o array de cores caso modelo for escova-cabelo
    if(modelo == 'kraft')
    {
        var arrayCodigo1 = {a56vb : 'a56vb',a56 : 'a56',b70 : 'b70',a90 : 'a90',b90 : 'b90',c90 : 'c90',d90 : 'd90'};
    }
    if(modelo == 'plastica')
    {
        var arrayCodigo1 = {001 : '001',002 : '002', ma56 : 'ma56',005 : '005',006 : '006', 007 : '007',008 : '008',010 : '010bp',011 : '011',012 : '012',013 : '013',014 : '014',016 : '016',017 : '017',018 : '018',067 : '067',009 : '009'};
    }
    
    //Define o array de cores caso modelo for escova-cabelo
    if(modelo == 'caixa')
    {
        var arrayCodigo1 = {a56vb : 'a56vb',a56 : 'a56',b70 : 'b70',a90 : 'a90',b90 : 'b90',c90 : 'c90',d90 : 'd90'};
    }

    
    //Preenche o select de cores com o array defindo na condição IF
    for (index in arrayCodigo1)
    {
        objSelect.options[objSelect.options.length] = new Option(arrayCodigo1[index],index);
    }
    
    
}

</script>

<style type="text/css">
.style1 {
    font-family: Arial;
    font-size: x-small;
}
</style>

</head> 

<body>

<form>
<table style="width: 420px" cellspacing="0" cellpadding="0" align="left">
    <tr>
        <td class="style1" style="width: 64px">Quant.</td>
        <td class="style1" style="width: 115px">Tipo</td>
        <td class="style1" style="width: 79px">Código</td>
        <td class="style1" style="width: 71px">&nbsp;HotStamp</td>
        <td class="style1">&nbsp;Etiqueta</td>
    </tr>
    <tr>
        <td class="style1" style="width: 64px">
<input name="Text1" type="text" style="width: 56px"></td>
        <td class="style1" style="width: 115px">
<select name="tipo1" onChange="pegaValor();" style="width: 112px">
    <option value=""></option>
    <option value="duplex">DUPLEX</option>
    <option value="kraft">KRAFT</option>
<option value="plastica">PLASTICA</option>
<option value="caixa">CAIXA</option>
</select></td>
        <td class="style1" style="width: 79px">



<select name="codigo1" style="height: 22px">
</select></td>
        <td class="style1" style="width: 71px">



<select name="codigo2" style="height: 22px">
</select></td>
        <td class="style1">



<select name="codigo3" style="height: 22px">
</select></td>
    </tr>
    <tr>
        <td class="style1" style="width: 64px">&nbsp;</td>
        <td class="style1" style="width: 115px">&nbsp;</td>
        <td class="style1" style="width: 79px">&nbsp;</td>
        <td class="style1" style="width: 71px">&nbsp;</td>
        <td class="style1">&nbsp;</td>
    </tr>
</table>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

</form>

</body>
</html>

Entrar

formulário com seleção

Pergunta

mauricioms

Link para o comentário

Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

ESerra

Link para o comentário

Compartilhar em outros sites

Romero Dias

Link para o comentário

Compartilhar em outros sites

mauricioms

Link para o comentário

Compartilhar em outros sites

mauricioms

Link para o comentário

Compartilhar em outros sites

mauricioms

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades