evento onchange

Thiago Duarte · Setembro 14, 2013

Olá, preciso de fazer um evento onchange em jquery de forma que quando altere um plano não mexa no outro, eu fiz um mas ficou dando erro http://pastebin.com/6T04UmuM

teria que mudar 2 valor de cada plano, exemplo, alterou o pagamento para trimestral: iria mudar Pagamento trismestral de R$ 78,90 e valor em cima de R$ 20,00 ... alguem pode ajudar

 <h2>Plano1</h2>
  <form name="frmChange">  
   <select style="width:160px">
     <option value="Anual de R$ 98,90">Anual – 10% desconto</option>
     <option value="Semestral de R$ 88,90">Semestral – 6% desconto</option>
     <option value="Trimestral de R$ 78,90">Trimestral – 3% desconto</option>
     <option selected="selected" value="Mensal">Mensal</option>
   </select>
 </form>
 <span class="preco">R$ 14,90</span>
 <div id="exibeValor"></div>

Snowden · Setembro 15, 2013

Você de atribuir um elemento nos select que diferenciem um do outro, a mesma coisa com a div que exibe o resultado, ponha nomes diferentes.

dai... Você pode fazer assim

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

var name = $(this).attr('name'), value = $(this).va();

if( name == 'a' )

$('#resultadoA').html( value );

else if( name == 'b' )

$('#resultadoB').html( value );

});

Thiago Duarte · Setembro 15, 2013

Você de atribuir um elemento nos select que diferenciem um do outro, a mesma coisa com a div que exibe o resultado, ponha nomes diferentes. dai... Você pode fazer assim $('select').change(function(){ var name = $(this).attr('name'), value = $(this).va(); if( name == 'a' ) $('#resultadoA').html( value ); else if( name == 'b' ) $('#resultadoB').html( value ); });

Olá, obrigado pela resposta mas não entendi muito bem,

onde iria ficar esse name=a no html e esse resultadoA ???

abração ai

Eu coloquei do jeito que vc falou e não funcionou, postei nesse link http://pastebin.com/6T04UmuM

o que tem de errado ai ?

onde eu colocaria o valor principal que não seria no select?

Snowden · Setembro 15, 2013

Remova essa linha " $().ready(function() { ".

Depois altere essa linha " var name = $(this).attr('id'), value = $(this).val(); ".

entenda que a variável "name" setada acima, é igual ao nome dos "id" que você pois nos select.

e a variável "value" é igual a opção que o usuário selecionar.

sendo assim " if ( name == 'plano-basico' ) { $('#plano1').html( value ); } ".

queria poder explica melhor, mais to On pelo celular.

Thiago Duarte · Setembro 15, 2013

Remova essa linha " $().ready(function() { ". Depois altere essa linha " var name = $(this).attr('id'), value = $(this).val(); ". entenda que a variável "name" setada acima, é igual ao nome dos "id" que você pois nos select. e a variável "value" é igual a opção que o usuário selecionar. sendo assim " if ( name == 'plano-basico' ) { $('#plano1').html( value ); } ". queria poder explica melhor, mais to On pelo celular.

Olá amigo, resolvi fazer dessa forma que achei que fica mais fácil, olha http://pastebin.com/6T04UmuM

Agora só precisava que ao invés de aparecer em baixo a mesma coisa do option assim "Trimestral – 3% desconto" , deveria aparecer assim: "Pagamento Anual R$ 98,00"

observe que criei um data-title='teste' dentro do option para testar e não funcionou, sabe o que errei ?

Obrigado ai pela ajuda amigão

Snowden · Setembro 16, 2013

<script>
  function handleOnChange(select_element)
  {
    var tform = select_element.form;
    if (tform)
    {
      document.getElementById("valor").innerHTML = select_element.value;
      document.getElementById("tipo").innerHTML = select_element.getElementsByTagName("option")[select_element.selectedIndex].innerHTML.split(" ")[0];     
    }
  }
</script>
</head>
<body>
  <h2>Plano1</h2>
  <form onsubmit="return false">  
   <select onchange="handleOnChange(this)" style="width:160px">
    <option value="R$ 98,90">Anual – 10% desconto</option>
    <option value="R$ 88,90">Semestral – 6% desconto</option>
    <option value="R$ 78,90">Trimestral – 3% desconto</option>
    <option value="R$ 14,90" selected >Mensal</option>
  </select>
  <div>Pagamento <label id="tipo">Mensal</label> <strong id="valor">R$ 14,90</strong></div>
</form>

a forma com jQuery

<script>
$(function(){
	$('select').change(function(){ 
	var tipo = $(this).attr('id'), value = $(this).val();
		if( tipo == 'plano1' )
			$('#valorPlano1').html( value );
		else if( name == 'plano2' )
			$('#valorPlano2').html( value );
	}); 
});
</script>
</head>
<body>
  <h2>Plano1</h2>
  <form name="frmChange">  
   <select id="plano1" style="width:160px">
     <option value="Anual de R$ 98,90">Anual – 10% desconto</option>
     <option value="Semestral de R$ 88,90">Semestral – 6% desconto</option>
     <option value="Trimestral de R$ 78,90">Trimestral – 3% desconto</option>
     <option selected="selected" value="Mensal de R$ 14,90">Mensal</option>
   </select>
 </form>
 Pagamento <div id="valorPlano1">Mensal de R$ 14,90</div>

Thiago Duarte · Setembro 16, 2013

<script>
  function handleOnChange(select_element)
  {
    var tform = select_element.form;
    if (tform)
    {
      document.getElementById("valor").innerHTML = select_element.value;
      document.getElementById("tipo").innerHTML = select_element.getElementsByTagName("option")[select_element.selectedIndex].innerHTML.split(" ")[0];     
    }
  }
</script>
</head>
<body>
  <h2>Plano1</h2>
  <form onsubmit="return false">  
   <select onchange="handleOnChange(this)" style="width:160px">
    <option value="R$ 98,90">Anual – 10% desconto</option>
    <option value="R$ 88,90">Semestral – 6% desconto</option>
    <option value="R$ 78,90">Trimestral – 3% desconto</option>
    <option value="R$ 14,90" selected >Mensal</option>
  </select>
  <div>Pagamento <label id="tipo">Mensal</label> <strong id="valor">R$ 14,90</strong></div>
</form>

a forma com jQuery

<script>
$(function(){
	$('select').change(function(){ 
	var tipo = $(this).attr('id'), value = $(this).val();
		if( tipo == 'plano1' )
			$('#valorPlano1').html( value );
		else if( name == 'plano2' )
			$('#valorPlano2').html( value );
	}); 
});
</script>
</head>
<body>
  <h2>Plano1</h2>
  <form name="frmChange">  
   <select id="plano1" style="width:160px">
     <option value="Anual de R$ 98,90">Anual – 10% desconto</option>
     <option value="Semestral de R$ 88,90">Semestral – 6% desconto</option>
     <option value="Trimestral de R$ 78,90">Trimestral – 3% desconto</option>
     <option selected="selected" value="Mensal de R$ 14,90">Mensal</option>
   </select>
 </form>
 Pagamento <div id="valorPlano1">Mensal de R$ 14,90</div>

Olá amigo, fiz uns ajustes e está quase lá agora, acho que vc errou quando colocou else if( name == 'plano2' ) era isso mesmo? não é else if( tipo == 'plano2' ) ?

eu fiz uns ajustes aqui, olha só...

<script>
$(function(){
  $('select').change(function(){ 
  var tipo = $(this).attr('id'), value = $(this).val();
    if( tipo == 'plano1' )
      $('#valorPlano1').html( value );
    else if( tipo == 'plano2' )
      $('#valorPlano2').html( value );
  }); 
});
</script>
</head>
<body>
  <h2>Plano1</h2>
  <form name="frmChange">  
   <select id="plano1" style="width:160px">
     <option value="Anual de R$ 98,90">Anual – 10% desconto</option>
     <option value="Semestral de R$ 88,90">Semestral – 6% desconto</option>
     <option value="Trimestral de R$ 78,90">Trimestral – 3% desconto</option>
     <option selected="selected" value="Mensal">Mensal</option>
   </select>
 </form>
 <span id="valorPleco1">R$ 14,90</span><br>
 Pagamento <span id="valorPlano1">Mensal</span>


<h2>Plano2</h2>
<form name="frmChange">  
   <select id="plano2" style="width:160px">
     <option value="Anual de R$ 98,90">Anual – 10% desconto</option>
     <option value="Semestral de R$ 88,90">Semestral – 6% desconto</option>
     <option value="Trimestral de R$ 78,90">Trimestral – 3% desconto</option>
     <option selected="selected" value="Mensal">Mensal</option>
   </select>
 </form>
 <span id="valorPleco1">R$ 19,90</span><br>
 Pagamento <span id="valorPlano2">Mensal</span>

Precisava alterar o valor principal tbm, 14,90 quando for mensal e trimestral 13,90 e vai alterando e no valor de baixo está normal

sabe como fazer isso?

Snowden · Setembro 16, 2013

Olá amigo, fiz uns ajustes e está quase lá agora, acho que vc errou quando colocou else if( name == 'plano2' ) era isso mesmo? não é else if( tipo == 'plano2' ) ?

SIM! falha minha.

Precisava alterar o valor principal tbm, 14,90 quando for mensal e trimestral 13,90 e vai alterando e no valor de baixo está normal

sabe como fazer isso?

 <option selected="selected" value="Mensal de R$14,90">Mensal</option>

aff man, que dificuldade...rss

o que tiver que mudar agora mude so dentro dos "value" dos option.

que ao ser selecionado esses campos...

<span id="valorPleco1">R$ 19,90</span><br>
 Pagamento <span id="valorPlano2">Mensal</span>

mudam. Okay?

Thiago Duarte · Setembro 16, 2013

 <option selected="selected" value="Mensal de R$14,90">Mensal</option>

Não pode ser assim, o value tem que ser apenas Mensal

Não pode criar um valor dentro do option e depois colocar para alterar?

tem que alterar de R$ 14,90 para R$ 13, 90 assim em diante entendeu amigão?

abs

Thiago Duarte · Setembro 18, 2013

To com o codigo mais atualizado.

<script>
$(function(){
  $('select').change(function(){ 
  var tipo = $(this).attr('id'), value = $(this).val();
  
    var valor = value.split('de');
    
    if( tipo == 'plano1' )
      $('#valorPlano1').html(value),
      $('#valorPleco1').html(valor[1]);
    else if( tipo == 'plano2' )
      $('#valorPlano2').html(value),
    $('#valorPleco2').html(valor[1]);
     }); 
});
</script>
</head>
<body>
  <h2>Plano1</h2>
  <form name="frmChange">  
   <select id="plano1" style="width:160px">
     <option data-title="R$ 9,90" value="Anual de R$ 98,90">Anual – 10% desconto</option>
     <option data-title="R$ 11,90" value="Semestral de R$ 88,90">Semestral – 6% desconto</option>
     <option data-title="R$ 12,90" value="Trimestral de R$ 78,90">Trimestral – 3% desconto</option>
     <option data-title="R$ 13,90" selected="selected" value="Mensal">Mensal</option>
   </select>
 </form>
 <span id="valorPleco1"> R$ 14,90</span><br>
 Pagamento <span id="valorPlano1">Trimestral de R$ 78,90</span>

Preciso só pagar o valor dentro do data-title e fazer aparecer dentro do <span id="valorPleco1"> R$ 14,90</span><br>

Sabe como fazer isso?

angelorubin · Setembro 21, 2013

Olá,

Tenta isso:

$(function(){
  $('#plano1').on('change',function(){ 
  	var valor = $('option:selected').attr('data-title');
	$('#valorPleco1').text(valor);
  })
});

Arquivado

evento onchange

Recommended Posts

Thiago Duarte 23

Compartilhar este post

Link para o post

Compartilhar em outros sites

Snowden 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Duarte 23

Compartilhar este post

Link para o post

Compartilhar em outros sites

Snowden 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Duarte 23

Compartilhar este post

Link para o post

Compartilhar em outros sites

Snowden 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Duarte 23

Compartilhar este post

Link para o post

Compartilhar em outros sites

Snowden 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Duarte 23

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Duarte 23

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

Passar Hora para Campo Input automaticamente

Outstanding Сasual Dating - Verified Ladies

Pergunta: Search Sexy Womans in your city for night

Fóruns

Tempo Real

Informação importante