Adicionar Valor em input onChange.

[iago04 0]

Bom dia, estou caçando algo na net que se assemelhe com minha necessidade, entretanto até agora não obtive êxito. A questão é que possuo um 'select' com minhas categorias de roupas, necessito que ao selecionar uma categoria o input código seja add com algum valor, como se fosse o prefixo do código. Por exemplo, se minha categoria for Social Masculino, ao mudar o valor da categoria, seria adicionado SC ao valor do input código.

  <label>Categoria.:</label>
                    <select class="formCont formE" name="categoria" id="categoria" onchange="add();">
                      <option value="" selected="selected">--Selecione a Categoria--</option>
                      <option value="Acessorios">Ascessórios</option>
                      <option value="Bolsas">Bolsas</option>
                      <option value="Daminhas">Daminhas</option>
                      <option value="Infantis masculino">Infantis Masculino</option>
                      <option value="Infantis femenino">Infantis Femenino</option> 
                      <option value="Faixas e Gravatas">Faixas e Gravatas</option> 
                      <option value="Faixas e Gravatas Infantis">Faixas e Gravatas Infantis</option>             
                      <option value="Gravatas Sociais">Gravatas Sociais</option> 
                      <option value="Gravatas Sociais Infantis">Gravatas Sociais Infantis</option> 
                      <option value="Gravatas de Noivos">Gravatas de Noivos</option>
                      <option value="Gravatas de Noivos Infantis">Gravatas de Noivos Infantis</option> 
                      <option value="Noivas">Noivas</option>
                      <option value="Noivos">Noivos</option>
                      <option value="Sapatos Masculinos">Sapatos Masculinos</option>
                      <option value="Sapatos Femeninos">Sapatos Femeninos</option>
                      <option value="Sapatos Masculinos Infantis">Sapatos Masculino Infantis</option>
                      <option value="Sapatos Femenino Infantis">Sapatos Femenino Infantis</option>
                      <option value="Socias Feminino">Socias Feminino</option>               
                      <option value="Socias Masculino">Socias Masculino</option>           
                    </select>
                    </div>
                	<div class="conjFormLabel">
                    	 <label>Código.:</label>
            	    <input class="formCont formC" name="codigo" id="codigo" type="text"/>
                    </div>        	
                    

 

Como faria isso com java script galera ?

[Vinicius Rangel 208]

2 opções.

 

Primeira é o ajax para você recuperar esse tal do código.

Segunda é passar esse código como valor nos option

 

seria algo assim

 

 

 

$('select').live('change', function(){

$('input').val($(this).val());
})

[iago04 0]

Vinícius não entendi muito bem sua primeira opção, e a segundo seria descartada, pois um dos meus campos da tabela eu salvo a categoria, a ideia seria uma cadeia de if(), onde se a categoria for 'tal' atribua o valor 'tal' ao input. Sacasse ?

[Henrique Barcelos 290]

Por que você não coloca esse código no atributo value das tags option? Nesse caso, nem do input você precisaria mais...

[iago04 0]

Por que você não coloca esse código no atributo value das tags option? Nesse caso, nem do input você precisaria mais...

 

Por que como eu estava explicando pra Vinicius, Henrique eu tbm salvo no banco a categoria da roupa, e esse 'prefixo' no código justamente auxiliaria na diferenciação das roupas.Eu poderia fazer direto no php.

if(($categoria =  $_POST['categoria']) = 'SC'{
   $categoria = 'Social Masculino' 
}

 

Só que com o onChange do select, acho que ficaria mais prático.

[Vinicius Rangel 208]

não precisa ser necessariamente no value, o html te permite criar novos "parametros"

 

 

 

<select>

<option value='Roupa1' data-tipo='SC'>
<option value='Roupa2' data-tipo='HB'>
</select>

e com isso ao invés de passar o

 

 

$(this).val();

 

como citei você passaria

 

 

$(this).attr('data-tipo');

[William Bruno 1501]

@Vinicius Rangel, não funciona não cara.

 

Vc pode sim "inventar" atributos data-* em html5, mas o comportamento do .value não "replica" para esse atributo inventado não.

 

No caso dele, teria que fazer um objeto de valores no primeiro codigo que vc sugeriu

var arr = {
    'Social Masculino': 'SC',
    'Social Feminino': 'SF'
};
$('select').on('change', function(){

    val = arr[$(this).val()];
    
    $('input').val( val );
});

porém o problema que eu ainda vejo nesse sistema, é que ele tá "gravando" uma string nas categorias e a menos q ele esteja trabalhando com um noSQL, essa modelagem não está seguindo as boas práticas de normalização.

[Vinicius Rangel 208]

Por isso você é o mod cara.

 

certinho..
ahuahuahuuahhuaahahu

 

vlw

[iago04 0]

 

@Vinicius Rangel, não funciona não cara.

 

Vc pode sim "inventar" atributos data-* em html5, mas o comportamento do .value não "replica" para esse atributo inventado não.

 

No caso dele, teria que fazer um objeto de valores no primeiro codigo que vc sugeriu

var val = {
    'Social Masculino': 'SC',
    'Social Feminino': 'SF'
};
$('select').on('change', function(){

    val = arr[$(this).val()];
    
    $('input').val( val );
});

porém o problema que eu ainda vejo nesse sistema, é que ele tá "gravando" uma string nas categorias e a menos q ele esteja trabalhando com um noSQL, essa modelagem não está seguindo as boas práticas de normalização.

Consegui resolver da seguinte forma:

function val() {
var cat = document.getElementById("categoria").value;

 if (cat == 'Acessorios') {
	 cat = 'AC';	
	 $('#codigo').val(cat);
	}	
 if (cat == 'Bolsas') { 
	 cat = 'BO';	
	 $('#codigo').val(cat);
	}
 if (cat == 'Daminhas') { 
	 cat = 'DA';	
	 $('#codigo').val(cat);
	}
 if (cat == 'Infantis Masculino') { 
	 cat = 'IM';	
	 $('#codigo').val(cat);
	}
 if (cat == 'Infantis Femenino') { 
	 cat = 'IF';	
	 $('#codigo').val(cat);
	}
 if (cat == 'Faixas e Gravatas') { 
	 cat = 'FG';	
	 $('#codigo').val(cat);
	}
 if (cat == 'Faixas e Gravatas Infantis') { 
	 cat = 'FGI';	
	 $('#codigo').val(cat);
	}
 if (cat == 'Gravatas Sociais') { 
	 cat = 'GS';	
	 $('#codigo').val(cat);
	}
 if (cat == 'Gravatas Sociais Infantis') { 
	 cat = 'GSI';	
	 $('#codigo').val(cat);
	}
 if (cat == 'Gravatas de Noivos') { 
	 cat = 'GN';	
	 $('#codigo').val(cat);
	}
 if (cat == 'Gravatas de Noivos Infantis') { 
	 cat = 'GNI';	
	 $('#codigo').val(cat);
	}
 if (cat == 'Noivas') { 
	 cat = 'NA';	
	 $('#codigo').val(cat);
	}
 if (cat == 'Noivos') { 
	 cat = 'NO';	
	 $('#codigo').val(cat);
	}
 if (cat == 'Sapatos Masculinos') { 
	 cat = 'SM';	
	 $('#codigo').val(cat);
	}
 if (cat == 'Sapatos Femeninos') { 
	 cat = 'SF';	
	 $('#codigo').val(cat);
	}
 if (cat == 'Sapatos Masculinos Infantis') { 
	 cat = 'SMI';	
	 $('#codigo').val(cat);
	}
 if (cat == 'Sapatos Femenino Infantis') { 
	 cat = 'SFI';	
	 $('#codigo').val(cat);
	}
 if (cat == 'Sociais Feminino') { 
	 cat = 'SF';	
	 $('#codigo').val(cat);
	}
 if (cat == 'Sociais Masculino') { 
	 cat = 'SM';	
	 $('#codigo').val(cat);
	} 
 }		
</script>

 

Muito obrigado pela atenção de todos!Só nãi entendi o que vc falou a respeito da string que estou salvando no select...o que isso influência na minha modelagem do banco ? E o que é noSql ?

[William Bruno 1501]

Nossa cara, não usa essa cadeia de if não!

 

Olha oque eu fiz lá, é muito mais bonito e performático

var arr = {
    'Social Masculino': 'SC',
    'Social Feminino': 'SF'
};
//..

    val = arr[$(this).val()];

 

Sobre a modelagem, sim influencia. Se vc está gravando: "Sociais Masculino", na coluna de categoria do teu produto, então vc está com uma modelagem SQL incorreta.

 

Está desrespeitando as Formas Normais. E isso pode te trazer diversos problemas, como por exemplo, se um dia resolverem mudar o nome da categoria de "Sociais Masculino", para "Social Masculino", ou "Sociais Masculinos", essa tua modelagem incorreta acarretará inconsistências nos registros.

 

 

noSQL são bancos de dados que não usam a linguagem SQL, como MongoDB, MariaDB...

[iago04 0]

Entendi, mas essas categorias são fixas...e a respeito de seu código, com certeza vc fez em 10 linhas o que eu fiz em 30, porém não consegui fazer funcionar aqui.Entendi a lógica mas n consegui adaptar ao meu código.

[William Bruno 1501]

tente assim:

var arr = {

'Social Masculino': 'SC',

'Social Feminino': 'SF'

};

$('#categoria').on('change', function(){

 

val = arr[$(this).val()];

 

$('#codigo').val( val );

});

[iago04 0]

Tentei pow, mas ñ rolou ai fui tentar colocar a function direto no onChange do select mas tbm n rolou:

var val = {
    'Sociais Masculino': 'SC',
    'Sociais Femenino': 'SF'
}
function add(){
	
    val = arr[$(this).val()];
    
    $('#codigo').val( val );
}

 

 

[William Bruno 1501]

tinha um errinho aqui:

var val = {

na verdade deveria ser:

var arr = {

=)