[JScript] - Validação de combos

Má :) · Agosto 26, 2009

Olá pessoas! =)

Vou tentar explicar detalhadamente o que eu pretendo fazer:

Tenho dois combos:

- Instância 1 (lista de instâncias X e W)

- Instância 2 (lista de instâncias Y e Z)

Vou escolher um valor para cada instância,

Ao fazer isso para cada valor das instâncias escolhidas, vai gerar um combo para cada instância, com os valores dos bancos contidos nestas intâncias;

- Instância 1 (Instância X) --> Banco 1 ; Banco 2 ; Banco 3

- Instância 2 (Instância Y) --> Banco 4 ; Banco 5 ; Banco 6

Aí, vou ter que escolher um banco para cada instância, para depois fazer as devidas comparações,

o que eu queria fazer, é verificar se esses dois combos criados no tempo da escolha (onChange) tiveram algum valor selecionado, para então submeter estes dados a outro formulário.

Sendo que, na lista de intâncias tem mais de uma instância, ou seja, eu tenho que ter mais de uma lista de bancos pré-definida (como está no código).

--> Instância 1:

Opções:

-> Instância X (tem uma lista de bancos)

-> Instância W (tem uma lista de bancos)

Que seria isso:

<h4>INSTÂNCIA</h4>
<select name="list_instance1" size=1 onchange="instance_1(this.value);" >
<option>[Selecione uma instância]</option>
<option value="instance1">Instância 1</option>
<option value="instance2">Instância 2</option>
</select>

<div id="instance1" style="display:none;">
<h4>BANCO</h4>
<select name="list_db_instance1">
<option>[Selecione um banco]</option>
<option value="1">Instância 1 - BD 1</option>
<option value="2">Instância 1 - BD 2</option>
<option value="3">Instância 1 - BD 3</option>
<option value="4">Instância 1 - BD 4</option>
</select>

</div>

<div id="instance2" style="display:none;">
<h4>BANCO</h4>
<select name="list_db_instance2">
<option>[Selecione um banco]</option>
<option value="1">Instância 2 - BD 1</option>
<option value="2">Instância 2 - BD 2</option>
<option value="3">Instância 2 - BD 3</option>
<option value="4">Instância 2 - BD 4</option>
</select>

</div>

Escolhidas as intâncias, necessita-se escolher os bancos... Eu fiz assim (mal e porcamente falando): Se form.list_db_instance1.select = true || form.list_db_instance2.select = true é porque algum banco de alguma instância foi selecionado, então, o combo de bancos referente a primeira instância não estaria vazio, e fiz da mesma maneira para o outro. Mas ele fala que é nulo (dando aquele erro que eu citei). Enfim, acho que é isso! Alguma idéia de como fazer isso? Meu código completo é :

<html>

<head>
<title>Comparação de bancos</title>
</head>

&lt;script>

function instance_1(option1) {
                                 var list_db1 = document.getElementById(option1)
                                                 if(document.form_comp_bd.list_instance1.value == option1){
                                                 document.getElementById('db_instance1').innerHTML = list_db1.innerHTML
                                                 }
}

function instance_2(option2) {
                                 var list_db2 = document.getElementById(option2)
                                                 if(document.form_comp_bd.list_instance2.value == option2){
                                                 document.getElementById('db_instance2').innerHTML = list_db2.innerHTML
                                                 }
}

function OraCompDataCheck() {

  var i;
  var inst1 = false;
  var inst2 = false;
    var db1a = false;
  var db2a = false;
    var db1b = false;
  var db2b = false;
    var db1 = false;
    var db2 = false;
    
  for (i = 1; i < document.form_comp_bd.list_instance1.options.length; i++){
      if (document.form_comp_bd.list_instance1.options[i].selected == true) {
          inst1 = true;
          break;
       }
  }

  for (i = 1; i < document.form_comp_bd.list_instance2.options.length; i++){
       if (document.form_comp_bd.list_instance2.options[i].selected == true) {
           inst2 = true;
           break;
       }
  }

    for (i = 1; i < document.form_comp_bd.list_db_instance1.options.length; i++){
      if (document.form_comp_bd.db_instance1.options[i].selected == true) {
          db1a = true;
          break;
       }
  }

  for (i = 1; i < document.form_comp_bd.list_db_instance2.options.length; i++){
       if (document.form_comp_bd.db_instance3.options[i].selected == true) {
           db2a = true;
           break;
       }
  }
    
    for (i = 1; i < document.form_comp_bd.list_db_instance1.options.length; i++){
      if (document.form_comp_bd.db_instance2.options[i].selected == true) {
          db1b = true;
          break;
       }
  }

  for (i = 1; i < document.form_comp_bd.list_db_instance2.options.length; i++){
       if (document.form_comp_bd.db_instance4.options[i].selected == true) {
           db2b = true;
           break;
       }
  }
    
    if ( (db1a || db1b) ){
         db1 = true;
    }
    
    if ( (db2a || db2b) ){
         db2 = true;
    }
    
  if ( ! (inst1 && inst2 && db1 && db2) ) {
     alert ('Escolha uma opção para cada campo.');
     return false;
  }
}

</script> 

<h3 align="center">Comparação de bancos</h3>

<form name="form_comp_bd" action="ok.htm" method="post" onSubmit="return OraCompDataCheck()">

<table border="0" align="center">
<tr>
<td width="200px" align="center">

<h4>INSTÂNCIA</h4>
<select name="list_instance1" size=1 onchange="instance_1(this.value);" >
<option>[Selecione uma instância]</option>
<option value="instance1">Instância 1</option>
<option value="instance2">Instância 2</option>
</select>

<div id="instance1" style="display:none;">
<h4>BANCO</h4>
<select name="list_db_instance1">
<option>[Selecione um banco]</option>
<option value="1">Instância 1 - BD 1</option>
<option value="2">Instância 1 - BD 2</option>
<option value="3">Instância 1 - BD 3</option>
<option value="4">Instância 1 - BD 4</option>
</select>

</div>

<div id="instance2" style="display:none;">
<h4>BANCO</h4>
<select name="list_db_instance2">
<option>[Selecione um banco]</option>
<option value="1">Instância 2 - BD 1</option>
<option value="2">Instância 2 - BD 2</option>
<option value="3">Instância 2 - BD 3</option>
<option value="4">Instância 2 - BD 4</option>
</select>

</div>

</td>

<td width="200px" align="center">

<h4>INSTÂNCIA</h4>
<select name="list_instance2" size=1 onchange="instance_2(this.value);">
<option>[Selecione uma instância]</option>
<option value="instance3">Instância 3</option>
<option value="instance4">Instância 4</option>
</select>

<div id="instance3" style="display:none;">
<h4>BANCO</h4>
<select name="list_db_instance3">
<option>[Selecione um banco]</option>
<option value="1">Instância 3 - BD 1</option>
<option value="2">Instância 3 - BD 2</option>
<option value="3">Instância 3 - BD 3</option>
<option value="4">Instância 3 - BD 4</option>
</select>

</div>

<div id="instance4" style="display:none;">
<h4>BANCO</h4>
<select name="list_db_instance4">
<option>[Selecione um banco]</option>
<option value="1">Instância 4 - BD 1</option>
<option value="2">Instância 4 - BD 2</option>
<option value="3">Instância 4 - BD 3</option>
<option value="4">Instância 4 - BD 4</option>
</select>

</div>

</td>

</tr>

<tr>
<td width="200px" align="center"><div id="db_instance1"></div></td>
<td width="200px" align="center"><div id="db_instance2"></div></td>
</tr>

</table>
<p>
<table align="center">
<tr>
<td>
<input type="submit" value="Enviar">
</td>
</tr>
</table>

</form>

</html>

.Andreia. · Agosto 26, 2009

o que eu queria fazer, é verificar se esses dois combos criados no tempo da escolha (onChange) tiveram algum valor selecionado, para então submeter estes dados a outro formulário.

você pode usar o selectedIndex:

if (obj_combo.selectedIndex>=0)

Má :) · Agosto 26, 2009

Entendi. Mas o meu problema é o seguinte:

Os demais combos são criados no tempo da execução, então, é como se eles fossem nulos ou não existissem.

Está dando este erro:

Erro: 'list_db_instance1' não está definido

E o código que tenho agora é:

<html>

<head>
<title>Comparação de bancos</title>
</head>

<script>

function instance_1(option1) {
                                 var list_db1 = document.getElementById(option1)
                                                 if(document.form_comp_bd.list_instance1.value == option1){
                                                 document.getElementById('db_instance1').innerHTML = list_db1.innerHTML
                                                 }
}

function instance_2(option2) {
                                 var list_db2 = document.getElementById(option2)
                                                 if(document.form_comp_bd.list_instance2.value == option2){
                                                 document.getElementById('db_instance2').innerHTML = list_db2.innerHTML
                                                 }
}

function OraCompDataCheck() {

  var i;
  var inst1 = false;
  var inst2 = false;
    
  for (i = 1; i < document.form_comp_bd.list_instance1.options.length; i++){
      if (document.form_comp_bd.list_instance1.options[i].selected == true) {
          inst1 = true;
          break;
       }
  }

  for (i = 1; i < document.form_comp_bd.list_instance2.options.length; i++){
       if (document.form_comp_bd.list_instance2.options[i].selected == true) {
           inst2 = true;
           break;
       }
  }


  if (! (list_db_instance1.selectedIndex > 0) ){
         alert ('Escolha um banco para a primeira instância');
    }
    
    
    if (! (list_db_instance2.selectedIndex > 0) ){
         alert ('Escolha um banco para a segunda instância');
    }
    
    if ( ! (inst1 && inst2) ) {
     alert ('Escolha duas intâncias para a comparação.');
     return false;
  }

}    


</script> 

<h3 align="center">Comparação de bancos</h3>

<form name="form_comp_bd" action="ok.htm" method="post" onSubmit="return OraCompDataCheck()">

<table border="0" align="center">
<tr>
<td width="200px" align="center">

<h4>INSTÂNCIA</h4>
<select name="list_instance1" size=1 onChange="instance_1(this.value);" >
<option>[Selecione uma instância]</option>
<option value="instance1">Instância 1</option>
<option value="instance2">Instância 2</option>
</select>

<div id="instance1" style="display:none;">
<h4>BANCO</h4>
<select name="list_db_instance1">
<option>[Selecione um banco]</option>
<option value="1">Instância 1 - BD 1</option>
<option value="2">Instância 1 - BD 2</option>
<option value="3">Instância 1 - BD 3</option>
<option value="4">Instância 1 - BD 4</option>
</select>

</div>

<div id="instance2" style="display:none;">
<h4>BANCO</h4>
<select name="list_db_instance1">
<option>[Selecione um banco]</option>
<option value="1">Instância 2 - BD 1</option>
<option value="2">Instância 2 - BD 2</option>
<option value="3">Instância 2 - BD 3</option>
<option value="4">Instância 2 - BD 4</option>
</select>

</div>

</td>

<td width="200px" align="center">

<h4>INSTÂNCIA</h4>
<select name="list_instance2" size=1 onChange="instance_2(this.value);">
<option>[Selecione uma instância]</option>
<option value="instance3">Instância 3</option>
<option value="instance4">Instância 4</option>
</select>

<div id="instance3" style="display:none;">
<h4>BANCO</h4>
<select name="list_db_instance2">
<option>[Selecione um banco]</option>
<option value="1">Instância 3 - BD 1</option>
<option value="2">Instância 3 - BD 2</option>
<option value="3">Instância 3 - BD 3</option>
<option value="4">Instância 3 - BD 4</option>
</select>

</div>

<div id="instance4" style="display:none;">
<h4>BANCO</h4>
<select name="list_db_instance2">
<option>[Selecione um banco]</option>
<option value="1">Instância 4 - BD 1</option>
<option value="2">Instância 4 - BD 2</option>
<option value="3">Instância 4 - BD 3</option>
<option value="4">Instância 4 - BD 4</option>
</select>

</div>

</td>

</tr>

<tr>
<td width="200px" align="center"><div id="db_instance1"></div></td>
<td width="200px" align="center"><div id="db_instance2"></div></td>
</tr>

</table>
<p>
<table align="center">
<tr>
<td>
<input type="submit" value="Enviar">
</td>
</tr>
</table>

</form>

</html>

Entrar

[JScript] - Validação de combos

Pergunta

Má :)

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

.Andreia.

Link para o comentário

Compartilhar em outros sites

Má :)

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades