1

Se executarem o código verão que o segundo formulário é influenciado pelo primeiro e não pega os dados referente a ele próprio. Claro que isso é uma falha no meu jQuery. O primeiro formulário funciona perfeitamente, já o segundo pega sempre o último valor enviado pelo primeiro.

Eu preciso que cada um envie seus dados independente da classe estado se repetir nos dois formulários. Esta informação é posteriormente enviada para um Ajax que fará uma consulta no banco de dados.

Estes formulários dividem a mesma página e tem as mesmas classes trocando simplesmente o id do formulário. O que parece é que ele sempre executa o formulário que vier primeiro e depois para de executar justamente pelo fato dos selects terem a mesma classe.

Podem me ajudar?

function buscar_cidades(e){
	
  var formid = $(e).closest("form").attr("id");
  var estado = $(".estado").val();
  
  alert(estado);
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form id="fpf" class="" method="post" action="">
  <select name="estado" class="estado" onchange="buscar_cidades(this)">
    <option value=""></option>
    <option value="000001">AC</option>
    <option value="000002">AL</option>
    <option value="000003">AM</option>
  </select>
</form>

<form id="fpj" class="" method="post" action="">
  <select name="estado" class="estado" onchange="buscar_cidades(this)">
    <option value=""></option>
    <option value="000001">AC</option>
    <option value="000002">AL</option>
    <option value="000003">AM</option>
  </select>
</form>

1
  • 1
    Tu estás a ir buscar o valor selecionado pelo name... Visto que tens duas select com o mesmo nome, vai dar buraco. Tens de ir buscar a select pertencente ao form Commented 21/10/2014 às 17:31

2 Respostas 2

4

Na tua função deves referir-te ao elemento que recebeste e não localizar o mesmo pela classe de CSS:

Exemplo no JSFiddle

function buscar_cidades(e){

  var formid = $(e).closest("form").attr("id");
  var estado = $(e).find('option:selected').val();

  alert(estado);
}

De igual forma podes otimizar a função para evitar sucessivas pesquisas no DOM por parte do jQuery:

function buscar_cidades(meuSelect){
  var $this  = $(meuSelect),
      formId = $this.closest("form").attr("id"),
      estado = $this.find('option:selected').val();

  alert(estado);
}

Nota: Já referido na resposta do @Sergio, tens que ter em conta que ao usar a classe de CSS para localizar o elemento, o que é devolvido é o primeiro elemento do DOM que contém essa classe, motivo o qual o valor que o teu alert() dá é sempre o mesmo.

4

Quando usa um seletor como var estado = $(".estado").val(); ele vai sempre pegar o primeiro valor encontrado, mesmo que haja mais no DOM.

O que precisa é usar assim, visto que a sua função já passa o "elemento certo":

var estado = $(e).val(); // ou mesmo somente e.value

function buscar_cidades(e){
	
  var formid = $(e).closest("form").attr("id");
  var estado = $(e).val();
  
  alert(estado);
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form id="fpf" class="" method="post" action="">
  <select name="estado" class="estado" onchange="buscar_cidades(this)">
    <option value=""></option>
    <option value="000001">AC</option>
    <option value="000002">AL</option>
    <option value="000003">AM</option>
  </select>
</form>

<form id="fpj" class="" method="post" action="">
  <select name="estado" class="estado" onchange="buscar_cidades(this)">
    <option value=""></option>
    <option value="000001">AC</option>
    <option value="000002">AL</option>
    <option value="000003">AM</option>
  </select>
</form>

Na verdade isto podia ser feito sem jQuery:

function buscar_cidades(e) {
    var formid = e.form.id;
    var estado = e.value;
    alert(formid + ' - ' + estado);
}

http://jsfiddle.net/yqay7mk2/

2
  • 2
    Obrigado pela sua resposta sempre pertinente e completíssima. Commented 21/10/2014 às 17:41
  • 1
    @MarcosVinicius Esta devia ser a resposta aceite dado estar mais completa e ter sido colocada primeiro ;)
    – Zuul
    Commented 21/10/2014 às 17:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .