Tomislav Nikolić Tomislav Nikolić - 19 days ago 6
Javascript Question

JQuery returning name of input

Alright so I've been working on this system that should return the value of the name attribute inside the tag but no matter what button I click I still get the name of the first one...



$(document).ready(function() {

$(".vehicles-sub").click(function() {
$('.popup_content').show();
$('.black_overlay').show();
var name = $("button").attr("name");
alert(name);

});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vehicles_case_form">
<div class='vehicle_top_form'>
<h1>Vehicle Four</h1>
<hr/>
</div>

<div class='vehicles_bottom_form'>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever...</p>
</div>

<div class='vehicles_button_form'>
<button class="vehicles-sub" type="submit" name="submit_vehicles_first"> <!-- first name -->
<i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i>&nbsp;PURCHASE
</button>
</div>

</div>

<div class="vehicles_case_form">
<div class='vehicle_top_form'>
<h1>Vehicle Five</h1>
<hr/>
</div>

<div class='vehicles_bottom_form'>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever...</p>
</div>

<div class='vehicles_button_form'>
<button class="vehicles-sub" type="submit" name="submit_vehicles_second"> <!-- second name -->
<i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i>&nbsp;PURCHASE
</button>
</div>
</div>





Now the problem is, whenever I click the button it will always alert
submit_vehicles_first
.

Answer

Use $(this) instead to refer to the current clicked button :

var name = $(this).attr("name");

Hope this helps.

$(document).ready(function() {

  $(".vehicles-sub").click(function() {
    $('.popup_content').show();
    $('.black_overlay').show();
    var name = $(this).attr("name");
    alert(name);

  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vehicles_case_form">
  <div class='vehicle_top_form'>
    <h1>Vehicle Four</h1>
    <hr/>
  </div>

  <div class='vehicles_bottom_form'>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever...</p>
  </div>

  <div class='vehicles_button_form'>
    <button class="vehicles-sub" type="submit" name="submit_vehicles_first"> <!-- first name -->
      <i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i>&nbsp;PURCHASE
    </button>
  </div>

</div>

<div class="vehicles_case_form">
  <div class='vehicle_top_form'>
    <h1>Vehicle Five</h1>
    <hr/>
  </div>

  <div class='vehicles_bottom_form'>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever...</p>
  </div>

  <div class='vehicles_button_form'>
    <button class="vehicles-sub" type="submit" name="submit_vehicles_second"> <!-- second name -->
      <i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i>&nbsp;PURCHASE
    </button>
  </div>
</div>
<br><br><br><br><br><br>