Javascript code does not work when getting the value from button

Question

When I press a button I get the value of the 1st button. I want the value of the button that was pressed.

JavaScript

function GetHadess() {
        var title = $(".myButtonn").val();
        alert(title);    
}

The value of the button that was pressed should be shown in alert, but here value of the 1st button is shown.

HTML code

<tbody id="tbl">
<tr><td><input class="myButtonn" type="submit" name="title1" value=" bbb " onclick="GetHadess()"></td></tr>
<tr><td><input class="myButtonn" type="submit" name="title1" value=" bb " onclick="GetHadess()"></td></tr>
</tbody>

pass this to the function and use this as context to get the value. or create an event hanadler — guradio
– guradio, Commented Sep 15, 2017 at 7:28

Death-is-the-real-truth · Accepted Answer · 2017-09-15 07:43:32Z

3

You have to pass this context to the function so that it will know which button clicked,like below:-

function GetHadess(element) {
  var title = $(element).val();
  alert(title);    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody id="tbl">
  <tr>
    <td><input class="myButtonn" type="submit" name="title1" value=" bbb " onclick="GetHadess(this)">
    </td>
  </tr>
  <tr>
    <td><input class="myButtonn" type="submit" name="title1" value=" bb " onclick="GetHadess(this)">
    </td>
  </tr>
</tbody>

edited Sep 15, 2017 at 7:43

answered Sep 15, 2017 at 7:29

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

guradio · Accepted Answer · 2017-09-15 07:29:59Z

2

Use this context to tell which is the click button

$('.myButtonn').click(function() {

  alert($(this).val())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody id="tbl">
    <tr>
      <td><input class="myButtonn" type="submit" name="title1" value=" bbb " onclick="GetHadess()"></td>
    </tr>
    <tr>
      <td><input class="myButtonn" type="submit" name="title1" value=" bb " onclick="GetHadess()"></td>
    </tr>
  </tbody>
</table>

answered Sep 15, 2017 at 7:29

guradio

15.6k4 gold badges39 silver badges65 bronze badges

Comments

Himanshu Upadhyay · Accepted Answer · 2017-09-15 07:29:21Z

0

Change your code like this:

<tbody id="tbl">
<tr><td><input class="myButtonn" type="submit" name="title1" value=" bbb " onclick="GetHadess(this)"></td></tr>
<tr><td><input class="myButtonn" type="submit" name="title1" value=" bb " onclick="GetHadess(this)"></td></tr>
</tbody>


function GetHadess(this) {
        var title = this.val();
        alert(title);    
}

answered Sep 15, 2017 at 7:29

Himanshu Upadhyay

6,5571 gold badge23 silver badges34 bronze badges

Comments

ankesh jain · Accepted Answer · 2017-09-15 07:34:51Z

0

Instead of getting value using class, Pass event in the function and access value using event.target.value.

function GetHadess(e) {
        console.log(e.target.value);
        alert(e.target.value);    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody id="tbl">
<tr><td><input class="myButtonn" type="submit" name="title1" value=" bbb " onclick="GetHadess(event)"></td></tr>
<tr><td><input class="myButtonn" type="submit" name="title1" value=" bb " onclick="GetHadess(event)"></td></tr>
</tbody>

answered Sep 15, 2017 at 7:34

ankesh jain

1714 bronze badges

Collectives™ on Stack Overflow

Javascript code does not work when getting the value from button

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related