Jump to content
Fórum Script Brasil
  • 0

Ocultar <input> Ao Selecionar Num <select>


Beraldo
 Share

Question

No sistema que estou fazendo, o usuário deverá marcar um determinado código no <select> ou inserir o código desejado na área de texto. Para evitar que haja o "preenchimento dos dois campos", estou tentando fazer uma função que, quando o usuário marcar um valor em um, desabilita o outro, ou seja, quando houver valor no <select>, desabilitar o <input> e, qunado houver valor no <input>, desabilitar o <select>.

O único problema é a minha pequena experiência com JavaScript. :(

O que fiz até agora é isto (um script para testes):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" language="javascript">
function Ocultar(){
    var ref_select = document.getElementById('ref_select');
    var ref_input = document.getElementById('ref_input');
    
    if (ref_select.options.value == '')
      ref_input.disabled="false";    
        else
          ref_input.disabled="true";
    
    if (ref_input.value == '')
      ref_select.disabled="false";
        else
          ref_select.disabled="true";
}
</script>
<title>Teste</title>
</head>
<body>
<form action="">
<select name="ref" id="ref_select" onchange="Ocultar();">
<option value="">&nbsp;</option>
<option value="teste">Teste</option>
</select>
<br /><br />
<input type="text" name="ref" id="ref_input" onkeyup="Ocultar();" />
</form>
</body>
</html>

Nesse script, quando eu seleciono um valor no <select> ou digito um valor no <input>, ambos os campos ficam desabilitados.

Por que isso está acontecendo? O que estou fazendo de errado?

Valeu

[]'s

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

e ai Roberto, é que ele cai tambem no if:

if (ref_input.value == '')

então ele bloqueia os dois, tenta assim:

if (ref_select.options.value != "")
	ref_input.disabled = true;
else
	ref_input.disabled = false;

if (ref_input.value != "")
	ref_select.disabled = true;
else
	ref_select.disabled = false;

Link to comment
Share on other sites

  • 0

Oi, Andréia.

Agora, ao selecionar "teste" no <select>, desabilita somente o <input>. Até aí, beleza; correto.

Mas, se eu voltar o "teste" para o "", o <input> continua desabilitado. E, se eu digitar algo no <input>, ambos ficam desabilitados.

Resolvi fazer um troço confuso.... cada idéia que tenho... :P

[]'s

Link to comment
Share on other sites

  • 0

Consegui!!!! :D

Era mais simples do que pudéssemos imaginar.

Apenas precisava-se trocar:

if (ref_select.options.value != "")
por:
if (ref_select.value != "")
O código JS ficou assim, então, para quem precisar:
<script type="text/javascript" language="javascript">
function Ocultar(){
    var ref_select = document.getElementById('ref_select');
    var ref_input = document.getElementById('ref_input');
    
if (ref_select.value != "")
ref_input.disabled = true;
else
ref_input.disabled = false;

if (ref_input.value != "")
ref_select.disabled = true;
else
ref_select.disabled = false;
}
</script>

Valeu

[]'s

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share



  • Forum Statistics

    • Total Topics
      151k
    • Total Posts
      649.1k
×
×
  • Create New...