How to Display Specific value when I click Specific button

Question

When I click all the button output will be same (i.e 1).I want to display specific value of specified button for EXAMPLE:- When I click button 1 then It must display output as 1 and when I click 2 it must display output as 2.please help me.

<?php
    for ($i=0; $i < 10 ; $i++) { 
    echo '<br><button value="'.$i.'" class="my_remark_btn">'.$i.'</button>';
 }
?>

<script type="text/javascript">

    $('.my_remark_btn').click(function(){
        remark_aftr_click();  
    });

     function remark_aftr_click(){
        var k = $(".my_remark_btn").val();  
         $.ajax({url: "my_remark_act.php",
             cache: true,
             type: "POST",
             data: {go:k},
            success: function(data_remark_mi){
                alert(data_remark_mi);
           }
         });
      }

</script>

my_remark_act.php:-

<?php echo $_POST['go']; ?>

var k = $(this).val(); use this instead of var k = $(".my_remark_btn").val(); — M A SIDDIQUI
– M A SIDDIQUI, Commented Jan 12, 2017 at 6:30

Death-is-the-real-truth · Accepted Answer · 2017-01-12 06:57:22Z

2

$('body').append("<button data-value='val' class='my_remark_btn'>val</button>")

$(document).on('click', '.my_remark_btn', function() {
alert($(this).attr('data-value'))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Button has no value.
Use data attribute like data-value.
Get it like $(this).attr('data-value') using this context for clicked button.
Use event delegation for dynamically added elements.

edited Jan 12, 2017 at 6:57

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

answered Jan 12, 2017 at 6:34

guradio

15.6k4 gold badges39 silver badges65 bronze badges

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

3 Comments

guradio Over a year ago

@Anant because it was input type button this time it is button element. as you can see in the php echo <button value="'.$i.'" class="my_remark_btn">'.$i.'</button>

Death-is-the-real-truth Over a year ago

Man button can have value and you can get it through .attr('value'). I have checked it at my local end

guradio Over a year ago

button can have value of course but is it a valid attribute for button?can you show me something so i can clarify my post @Anant

Sanjay · Accepted Answer · 2017-01-12 07:14:45Z

2

Try This Example.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>

$( document ).ready(function() {
    $("button").click(function() {
        alert(this.id); // or alert($(this).attr('id'));
    });
});
  </script>
</head>
<body>
    <button id="some_id1"></button>
<button id="id2"></button>
<button id="id3"></button>
<button id="id4"></button>
<button id="id5"></button>
</body>
</html>

edited Jan 12, 2017 at 7:14

answered Jan 12, 2017 at 6:32

Sanjay

2,5131 gold badge16 silver badges29 bronze badges

Comments

Arun CM · Accepted Answer · 2017-01-12 06:40:32Z

1

You can use JQuery. try the below code.

      // this will fire for all button having class '.my_remark_btn'
      $('.my_remark_btn').click(function(){

           // using $(this) you will get the current element
            var value = $(this).val();
            console.log(value);
      });

In you code you are accessing value by var k = $(".my_remark_btn").val(); , This will only return value of the first button with class my_remark_btn.

answered Jan 12, 2017 at 6:40

Arun CM

3,4452 gold badges31 silver badges35 bronze badges

Comments

GROVER. · Accepted Answer · 2017-01-12 06:46:17Z

Have a try of this

jQuery

$('.my_remark_btn').click(function(){ // when a button is clicked
    var value = $(this).value; // get the value of that specific button
    alert(value); // alert the value to the page (to make sure it is correct)
    remark_aftr_click(value);  // run function, with value as a parameter
});

function remark_aftr_click(val){  
    $.ajax({
        url: "my_remark_act.php",
        cache: true,
        type: "POST",
        data: {go: val}, // post data to Ajax with CORRECT value
        success: function(data){
            alert(data); // alert returned data
        }
    });
}

Why your code was not working:

When you were retrieving the value of .my_remark_btn before, you were only ever getting the value of the first element with that specific class.

How you can get it to work:

Instead, you need to pass the value as a parameter within your function (while using this as a selector to get the value of that specific button).

Hope this helps :-)

Death-is-the-real-truth · Accepted Answer · 2017-01-12 06:52:54Z

0

You need $(this).attr("value") like below:-

<script type="text/javascript">
    $('.my_remark_btn').click(function(){
        var k = $(this).attr("value");
        $.ajax({url: "my_remark_act.php",
             cache: true,
             type: "POST",
             data: {go:k},
            success: function(data_remark_mi){
                alert(data_remark_mi);
            }
         });
     });
</script>

Example:-

$('.my_remark_btn').click(function(){
  var k = $(this).attr("value");
  alert(k);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button value ="1" class="my_remark_btn">1</button><br>
<button value ="2" class="my_remark_btn">2</button>

edited Jan 12, 2017 at 6:52

answered Jan 12, 2017 at 6:32

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

1 Comment

Death-is-the-real-truth Over a year ago

@Nirik Shan Glad to help you :):)

Collectives™ on Stack Overflow

How to Display Specific value when I click Specific button

5 Answers 5

3 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related