How to select exactly the searched element in jQuery independent of classes or ids?

Question

How to select exactly the searched element in jQuery independent of classes or ids?

Navigation

#1 by (4 votes)
#2 by (4 votes)

1

If you run the code, the second form is influenced by the first one and does not take the data for itself. Of course this is a flaw in my jQuery. The first form works perfectly, the second one always takes the last value sent by the first one.

I need each one to send their data regardless of the estado class if it is repeated in both forms. This information is then sent to an Ajax that will query the database.

These forms share the same page and have the same classes by simply exchanging the form id. What it seems is that it always executes the form that comes first and then stops executing just because the selects have the same class.

Can you help me?

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><formid="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>

php jquery ajax

asked by anonymous 21.10.2014 / 19:26

2 answers

4

When you use a selector like var estado = $(".estado").val(); it will always get the first found value, even if there is more in the DOM.

What you need to do is to use it as your function already passes the "right element":

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><formid="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>

In fact this could be done without jQuery:

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

link

21.10.2014 / 19:31

Concatenate parts of variable names Using val () in script causes me to lose line breaks

score 4 · Accepted Answer

In your role you should refer to the element you have received and not find it by the CSS class:

Example in JSFiddle

function buscar_cidades(e){

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

  alert(estado);
}

In the same way you can optimize the function to avoid successive searches on the DOM by jQuery:

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

  alert(estado);
}

Note: As mentioned in the @Sergio response, you have to take into account that when using the CSS class to find the element, what is returned is the first element of the DOM that contains this element class, which the value that your alert() gives is always the same.