How to detect in jquery which button element was clicked inside a php loop?

Question

So my code is something like this:-

for($i=0;$i<$length;$i++){
?>
<div id="scoreDiv">
    <input type="text"  name="myscore"  placeholder="Enter your score" required>
    <input type="text"  name="oppoScore"  placeholder="Your opponent score" required>
    <input id="submitScore" type="submit" value="submit" >
</div>
<?php
}
?>

In Jquery I want to detect which button was clicked and based on that button I want to take the input field entered by user.

id of submit need to convert to class and then use jquery this — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Feb 9, 2017 at 7:16
Add the same class to all buttons, create onclick event for that class that reads this id. — Peon
– Peon, Commented Feb 9, 2017 at 7:29

Death-is-the-real-truth · Accepted Answer · 2017-02-09 07:20:46Z

You can do it like below (one example):-

$(document).ready(function(){
  $('.submitScore').click(function(e){
       e.preventDefault();
      alert($(this).prev().attr('name'));
    
    });
  
});

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

                <input type="text"  name="myscore"  placeholder="Enter your score" required>
                <input type="text"  name="oppoScore"  placeholder="Your opponent score" required>
                <input class="submitScore" type="submit" value="submit" >

        </div>
<div id="scoreDiv">

                <input type="text"  name="myscore1"  placeholder="Enter your score1" required>
                <input type="text"  name="oppoScore1"  placeholder="Your opponent score1" required>
                <input class="submitScore" type="submit" value="submit" >

        </div>

Note:- class is treated as group-selector while id is treated as individual-selector in Jquery.Thanks

Christos · Accepted Answer · 2017-02-09 07:21:24Z

You could try something like the below:

$(function(){

    $(".js-btn").on("click",function(){
        var btn = $(this);
        var txtBoxes = btn.siblings('input');
        console.log($(txtBoxes[0]).val());
        console.log($(txtBoxes[1]).val());
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scoreDiv">
    <input type="text"  name="myscore"  placeholder="Enter your score" required>
    <input type="text"  name="oppoScore"  placeholder="Your opponent score" required>
    <input id="submitScore" type="submit" value="submit" class="js-btn" >
</div>
<div id="scoreDiv">
    <input type="text"  name="myscore"  placeholder="Enter your score" required>
    <input type="text"  name="oppoScore"  placeholder="Your opponent score" required>
    <input id="submitScore" type="submit" value="submit" class="js-btn" >
</div>
<div id="scoreDiv">
    <input type="text"  name="myscore"  placeholder="Enter your score" required>
    <input type="text"  name="oppoScore"  placeholder="Your opponent score" required>
    <input id="submitScore" type="submit" value="submit" class="js-btn" >
</div>
<div id="scoreDiv">
    <input type="text"  name="myscore"  placeholder="Enter your score" required>
    <input type="text"  name="oppoScore"  placeholder="Your opponent score" required>
    <input id="submitScore" type="submit" value="submit" class="js-btn" >
</div>

mith · Accepted Answer · 2017-02-09 07:31:21Z

Since id should be unique, Use class attribute instead of id and try below code:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="application/javascript">
    $(document).ready(function () {
        $('.submitScore').on('click',function () {
            var div_el = $(this).parent('.scoreDiv');
            var myscore = div_el.find('input[name="myscore"]').val();
            var oppoScore = div_el.find('input[name="oppoScore"]').val();

            alert(myscore+'----'+oppoScore);
            return false;
        })
    });
</script>
</head>





<?php
for($i=0;$i<5;$i++){
?>
<div class="scoreDiv">

<input type="text"  name="myscore"  placeholder="Enter your score" required>
<input type="text"  name="oppoScore"  placeholder="Your opponent score" required>
<input class="submitScore" type="submit" value="submit" >

</div>
<?php
}
?>

Collectives™ on Stack Overflow

How to detect in jquery which button element was clicked inside a php loop?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related