Recolher valor do próprio
Tu estás a anexar o evento change
ao campo que referes ser o que pretendes recolher o value
, pelo que para recolheres o value
dele mesmo, basta referires-te ao objeto this
ou a sua representação em jQuery $(this)
:
$('.dataFimVigenciaPlanoVigente').on('change', function(e){
var $this = $(this),
meuValor = $this.val();
//...
Ver a resposta do @Borachio nesta tua pergunta.
A tua linha:
var dataFimVigenciaPlanoVigente = $this.parent('td').find('.dataFimVigenciaPlanoVigente').val();
É desnecessária pois estás a arrancar do campo, subir ao elemento pai td
, localizar o próprio campo e depois extrair o seu value
. Podes reduzir a linha para:
var dataFimVigenciaPlanoVigente = $this.val();
Assunto relacionado: Qual a diferença entre $(this) e $this e this?.
Cache de elementos
Para o elemento com a classe dataFimVigenciaPlanoVigente
, estás a colocar a sua referência no DOM em cache, contudo, para localizares o seu elemento pai estás constantemente a realizar uma pesquisa.
O teu código poderia passar para:
$('.dataFimVigenciaPlanoVigente').on('change', function(e){
var $this = $(this),
$wrap = $(this).parent('td');
// ...
E depois para usar:
var nomeCanalVenda = $wrap.find('.nomeCanalVenda').val();
Duas vezes o mesmo valor
Ao recolheres os valores dos vários input
, existe um que estás a recolher duas vezes para duas variáveis distintas:
// Aqui por ID ao input dataInicioVigenciaAssociacaoPlano
var dataInicioVigenciaPlanoVigente = $this.parent('td').find('#dataInicioVigenciaAssociacaoPlano').val();
// ...
// Aqui por Class ao input dataInicioVigenciaAssociacaoPlano
var dataInicioAntesDeAlteracao = $this.parent('td').find('.dataInicioVigenciaAssociacaoPlano').val();
Trabalhar com "irmãos"
Dado estares a trabalhar com elementos irmãos, não tens necessidade de localizar o parent
, podes fazer uso do método siblings()
que te devolve os elementos "irmãos":
Onde tens:
var nomeCanalVenda = $this.parent('td').find('.nomeCanalVenda').val();
Passarias a ter:
var nomeCanalVenda = $this.siblings('.nomeCanalVenda').val();
Menos código, melhor entendimento.
$('.dataFimVigenciaPlanoVigente').on('change', function(e){
var $this = $(this);
var dataFimVigenciaPlanoVigente = $this.val(),
nomeCanalVenda = $this.siblings('.nomeCanalVenda').val(),
dataInicioVigenciaPlanoVigente = $this.siblings('.dataInicioVigenciaAssociacaoPlano').val(),
codigoCanalVenda = $this.siblings('.codigoCanalVenda').val(),
dataInicioAntesDeAlteracao = $this.siblings('.dataInicioAntesDeAlteracao').val(),
dataFimAntesDeAlteracao = $this.siblings('.dataFimAntesDeAlteracao').val();
// Apenas para debug
$("#valoresObtidos").html("Valores obtidos: " + dataFimVigenciaPlanoVigente +" "+ nomeCanalVenda +" "+ dataInicioVigenciaPlanoVigente +" "+ codigoCanalVenda +" "+ dataInicioAntesDeAlteracao +" "+ dataFimAntesDeAlteracao);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<table>
<tr>
<td>
<input type="hidden" name="canalVendaVO.codigo" id="codigoCanalVenda" class="codigoCanalVenda" value="1" />
<input type="hidden" name="canalVendaVO.nome" id="nomeCanalVenda" class="nomeCanalVenda" value="2" />
<input type="hidden" name="dataInicioVigenciaAssociacaoPlano" id="dataInicioVigenciaAssociacaoPlano" class="dataInicioVigenciaAssociacaoPlano" value="3" />
Até
<input type='text' data-mask="data" data-date-type="default" size='10' maxlength='10' value="4" id="dataFimVigenciaAssociacaoPlano" class="dataFimVigenciaPlanoVigente" />
<input type="hidden" name="dataInicioAntesDeAlteracao" id="dataInicioAntesDeAlteracao" class="dataInicioAntesDeAlteracao" value="5" />
<input type="hidden" name="dataFimAntesDeAlteracao" id="dataFimAntesDeAlteracao" class="dataFimAntesDeAlteracao" value="6" />
</td>
</tr>
</table>
</form>
<!-- apenas para debug -->
<div id="valoresObtidos"></div>
Multiplas variáveis
Quando pretendes declarar múltiplas variáveis em JavaScript, não tens necessidade de estar constantemente a escrever var
, podes fazer uso do separador ,
da seguinte forma:
var dataFimVigenciaPlanoVigente = $this.val(),
nomeCanalVenda = $this.siblings('.nomeCanalVenda').val(),
dataInicioVigenciaPlanoVigente = $this.siblings('.dataInicioVigenciaAssociacaoPlano').val(),
codigoCanalVenda = $this.siblings('.codigoCanalVenda').val(),
dataInicioAntesDeAlteracao = $this.siblings('.dataInicioAntesDeAlteracao').val(),
dataFimAntesDeAlteracao = $this.siblings('.dataFimAntesDeAlteracao').val();
IDs repetidos
No teu código, o mesmo está a aplicar id
aos input
, mas como tens esses input
dentro de um ciclo, o que vai acontecer é que vais acabar por ficar com os IDs repetidos na página.
De acordo com as normas, um id
é um seletor único, sendo uma forma de referenciar um único objeto. Já as classes são seletores comuns sendo as mesmas uma forma de referências múltiplos elementos de uma só vez.
Por exemplo, onde tens:
<input type="hidden" name="canalVendaVO.codigo" id="codigoCanalVenda" class="codigoCanalVenda" value='<s:property value="canalVendaVO.codigo" />' />
Deverás alterar para:
<input type="hidden" name="canalVendaVO.codigo" class="codigoCanalVenda" value='<s:property value="canalVendaVO.codigo" />' />
A ideia é remover todos os id
desses campos que vão ser repetidos pelo ciclo evitando assim resultados imprevisíveis por parte do JavaScript.
Código otimizado
O teu código com as correções e sugestões em cima referidas fica conforme em baixo apresentado:
Com uso do parent
$('.dataFimVigenciaPlanoVigente').on('change', function(e){
var $this = $(this),
$wrap = $this.parent();
var dataFimVigenciaPlanoVigente = $this.val(),
nomeCanalVenda = $wrap.find('.nomeCanalVenda').val(),
dataInicioVigenciaPlanoVigente = $wrap.find('.dataInicioVigenciaAssociacaoPlano').val(),
codigoCanalVenda = $wrap.find('.codigoCanalVenda').val(),
dataInicioAntesDeAlteracao = $wrap.find('.dataInicioAntesDeAlteracao').val(),
dataFimAntesDeAlteracao = $wrap.find('.dataFimAntesDeAlteracao').val();
});
Exemplo no JSFiddle.
Com uso do siblings
$('.dataFimVigenciaPlanoVigente').on('change', function(e){
var $this = $(this);
var dataFimVigenciaPlanoVigente = $this.val(),
nomeCanalVenda = $this.siblings('.nomeCanalVenda').val(),
dataInicioVigenciaPlanoVigente = $this.siblings('.dataInicioVigenciaAssociacaoPlano').val(),
codigoCanalVenda = $this.siblings('.codigoCanalVenda').val(),
dataInicioAntesDeAlteracao = $this.siblings('.dataInicioAntesDeAlteracao').val(),
dataFimAntesDeAlteracao = $this.siblings('.dataFimAntesDeAlteracao').val();
});
Exemplo no JSFiddle.
dataFimVigenciaPlanoVigente
ao qual estás a anexar um evento dechange
?