script não executa

[Biel. 9]

Boa noite a todos. Direto ao ponto. Pessoal no select principal ao selecionar um item qualquer e em seguida selecionar um item qualquer do select 1 ou select 2 ou select 3 e clicar no botão enviar o script não executa.
Agora se eu remover   <option value=""></option> de todos os select o script executa normalmente. 

Nota: Gostaria que quando o botão enviar fosse pressionado o script fosse executado. Quero que todos os select tenha em primeiro lugar este colega  <option value=""></option> Obrigado

 

<pre>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$("#id_tipo_contacto").on('change', function(){
    $('.formulario').hide();
    $('#' + this.value).show();
});

});//]]> 

</script>

<form action="executou.php" method="post" name="form1"  id="form1" > 
select principal
<select name="selecione" id="id_tipo_contacto" required>
    <option value=""></option>
    <option value="camisa">camisa</option>
    <option value="bermuda">bermuda</option>
    <option value="acessoriosescolar">acessoriosescolar</option>
</select>

<div id="camisa" class="formulario" >
select 1
<select name="comprar" required>
    <option value=""></option>
    <option value="camisa1" >camisa1</option> 
    <option value="camisa2" >camisa2</option> 
</select>
</div>

<div id="bermuda" class="formulario" style="display:none;">
select 2
<select name="comprar" class="select_auto" required>
    <option value=""></option>
    <option value="bermuda1" >bermuda1</option> 
    <option value="bermuda2" >bermuda2</option> 
</select>
</div>

<div id="acessoriosescolar" class="formulario" style="display:none;">
select 3
<select name="comprar" required>
    <option value=""></option>
    <option value="caneta">caneta</option>
    <option value="lapis">lapis</option>
    <option value="borracha">borracha</option> 
     
</select>
</div>

<input type="submit"  value="enviar"  />
</form>

</pre>

 

[hargon 64]

Remova o required dos campos "comprar".

[Biel. 9]

15 minutos atrás, hargon disse:

Remova o required dos campos "comprar".

Hargon , obrigado por postar. Sua resposta está dentro da minha pergunta, mas ainda não é isso que quero fazer. Coloquei o required justamente com <option value=""></option>  para forçar o colega a selecionar qualquer outro item. O que quero fazer é importante ter  <option value=""></option> em todos os selects   Obrigado!

[hargon 64]

Mas veja bem, você tem 3 campos com o mesmo name, isso não é correto.

 

Quando você coloca um deles como required, você não pode ocultá-lo, pois você obriga que ele seja preenchido.

[Biel. 9]

22 minutos atrás, hargon disse:

Mas veja bem, você tem 3 campos com o mesmo name, isso não é correto.

 

Quando você coloca um deles como required, você não pode ocultá-lo, pois você obriga que ele seja preenchido.

Realmente 3 campos com o mesmo nome não é uma prática comum, mas é uma forma que uso de impedir que na hora do cadastro o colega selecione o item errado. Da forma que estou tentando fazer é impossível selecionar o item errado. Se eu colocasse tudo junto em só select assim

<option value="camisa1" >camisa1</option> 
<option value="camisa2" >camisa2</option>

<option value="bermuda1" >bermuda1</option> 
<option value="bermuda2" >bermuda2</option> 

<option value="caneta">caneta</option>
<option value="lapis">lapis</option>
<option value="borracha">borracha</option> 

com  certeza o colega poderia com facilidade selecionar o item errado. 

Este é o motivo porque estou usando 3 campos com o mesmo nome 

 

 

Hargon o codigo está funcionando normalmente, o problema é este colega  <option value=""></option> que tem que existir em todos os selects . Se eu remover este colega  <option value=""></option> de todos os selects a coisa funciona, mas não da forma correta . Este colega <option value=""></option>  tem que existir de todo jeito em todos os selects e quando o botão enviar for pressionado a coisa tem que funcionar senão a coisa não vai pra frente. Obrigado

[Biel. 9]

Hargon tenho outro exempo que vi na internet e o dilema é o mesmo. Se eu remover  <option value=""></option> dos três selects abaixo a coisa funciona normalmente. Agora se os três selects tiver <option value=""></option> 

o script não executa quando o botão enviar é pressionado . Veja: 

 

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
alteraDiv = function (){

		if($('#id_tipo_contacto').val() == 1){
        $("#empresa").show();
        $("#casamento").hide();
		}
    
    if($('#id_tipo_contacto').val() == 2){
        $("#empresa").hide();
        $("#casamento").show();
		}   
}

});//]]> 

</script>

<form action="executou.php" method="post" name="form1"  id="form1" > 

  <select name="id_tipo_contacto" id="id_tipo_contacto" required onChange="alteraDiv()">
   <option value=""></option>
    <option value="1"> empresa</option>
    <option value="2"> casamento</option>
    
</select>


<div id="empresa" style="display:none;">
<select name="comprar" required >
    <option value="" ></option> 
    <option value="camisa1" >camisa1</option> 
    <option value="camisa2" >camisa2</option>
</select>
</div>

<div id="casamento" style="display:none;">
<select name="comprar" required >
    <option value="" ></option> 
    <option value="bermuda1" >bermuda1</option> 
    <option value="bermuda2" >bermuda2</option> 
</select>
</div>
 

<br />
<br />

<input type="submit"  value="enviar"  />
</form>

 

[hargon 64]

15 minutos atrás, Biel. disse:

Realmente 3 campos com o mesmo nome não é uma prática comum, ma sé uma forma que uso de impedir que na hora do cadastro o colega selecione o item errado. Da forma que estou tentando fazer é impossível selecionar o item errado. Se eu colocasse tudo junto em só select a poderia com facilidade selecionar o item errado. 

Este é o motivo porque estou usando 3 campos com o mesmo nome 

 

 

Mas a questão é que você confunde o interpretador de javascript, ele não sabe o motivo que você está usando dois, três campos com o mesmo nome, por isso você tem o problema com required.

Faça a validação com Javascript ao invés de usar required. Quando você dá o .show() na div, você sabe onde está o campo select que deve ser validado, neste caso é só criar a validação para ser executada ao clicar no botão.

 

Não remova o <option value=""></option> , pois se remover, o navegador vai entender que sempre existe um selecionado, logo vai prevalecer o último, mesmo que ele esteja oculto.

[Biel. 9]

4 minutos atrás, hargon disse:

 

Mas a questão é que você confunde o interpretador de javascript, ele não sabe o motivo que você está usando dois, três campos com o mesmo nome, por isso você tem o problema com required.

Faça a validação com Javascript ao invés de usar required. Quando você dá o .show() na div, você sabe onde está o campo select que deve ser validado, neste caso é só criar a validação para ser executada ao clicar no botão.

 

Não remova o <option value=""></option> , pois se remover, o navegador vai entender que sempre existe um selecionado, logo vai prevalecer o último, mesmo que ele esteja oculto.

Hargon quando removo  <option value=""></option> de todos os selects e clico no botão enviar a ação é executada e os dados são cadastrados normalmente no banco de dados, sendo assim validar os campos com javascript não vai resolver o problema . A questão ainda é <option value=""></option>  que vai em todos os selects. Sem  <option value=""></option>  nos selects o scritp é executado normalmente quando o botão enviar é pressionado. ao meu ver o script tem que ser executado com ou sem <option value=""></option> . Já fiz aqui dezenas de cadastros sem <option value=""></option> nos selects e o resultado foi triste.  Por isso que quero usar  <option value=""></option> de todo jeito em todos os selects e separar também os campos 

<option value="camisa1" >camisa1</option> 
<option value="camisa2" >camisa2</option>

<option value="bermuda1" >bermuda1</option> 
<option value="bermuda2" >bermuda2</option> 

<option value="caneta">caneta</option>
<option value="lapis">lapis</option>
<option value="borracha">borracha</option>

Qualquer ajuda é bem vinda. Meu conhecimento em javascript é limitadissimo, mas é perguntando que se aprende. Obriagado!

[hargon 64]

Executei o script acima removendo os options.

 

O resultado ao selecionar camisa2  e enviar foi

array(2) { ["selecione"]=> string(6) "camisa" ["comprar"]=> string(6) "caneta" }

Não consigo entender quando você diz que funciona e grava corretamente no banco de dados.

Ao colocar o option e enviar os dados, ele sempre está pegando o último valor, porque o select oculto tem um valor vazio.

 

Adaptei seu código para uma forma que acho que vai te ajudar, você só precisa tratar no PHP, pois mesmo os campos vazios são enviados, então você terá que procurar qual não está vazio.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var selecionado = "";
$("#id_tipo_contacto").on('change', function(){
    $('.formulario').hide();
    $('#' + this.value).show();
    selecionado = this.value;
});
$('#form1').submit(function(){
    if (selecionado == "") {
        return false;
    } else if (($('#' + selecionado + ' select[name="comprar[]"] option:selected' ).val() == "") || ($('#' + selecionado + ' select[name="comprar[]"] option:selected' ).val() === undefined)) {
        return false;
    }
    
});
});//]]> 
</script>

<pre>
<form action="executou.php" method="post" name="form1"  id="form1" > 
select principal
<select name="selecione" id="id_tipo_contacto" required>
    <option value=""></option>
    <option value="camisa">camisa</option>
    <option value="bermuda">bermuda</option>
    <option value="acessoriosescolar">acessoriosescolar</option>
</select>
<div id="camisa" class="formulario" >
select 1
<select name="comprar[]" >
    <option value=""></option>
    <option value="camisa1" >camisa1</option> 
    <option value="camisa2" >camisa2</option> 
</select>
</div>
<div id="bermuda" class="formulario" style="display:none;">
select 2
<select name="comprar[]" class="select_auto" >
    <option value=""></option>
    <option value="bermuda1" >bermuda1</option> 
    <option value="bermuda2" >bermuda2</option> 
</select>
</div>
<div id="acessoriosescolar" class="formulario" style="display:none;">
select 3
<select name="comprar[]" >
    <option value=""></option>
    <option value="caneta">caneta</option>
    <option value="lapis">lapis</option>
    <option value="borracha">borracha</option> 
     
</select>
</div>
<input type="submit"  value="enviar"  />
</form>
</pre>