1

I'm just learning PHP and now i'm trying to combine it with ajax and javascript.

Right now i have a table, which is populated dynamically with a data pulled from the mysql database via PHP. In addition to data pulled from database, there are three additional columns where the results can be entered (for each player row there is an input field in the column). What i want to do is to post data on enter click and move focus to input field below it (not next to it).

This is the PHP part:

echo "<table class='table table-hover table-bordered'>"; 
echo "<thead><th class='col-md-1'>Class</th><th class='col-md-1'>Number</th><th class='col-md-3'>Name</th><th class='col-md-1'>Age</th><th class='col-md-1'>Club</th><th class='col-md-1'>m1</th><th class='col-md-1'>m2</th><th class='col-md-1'>m3</th><th class='col-md-1'>Best</th></thead><tbody>";
while ($player = mysql_fetch_assoc($getGroupPlayers)){
    //Loop over players in group! 
    $ageCountry = makeAgeCountry($player['age'],$player['country']);
    echo "<tr><td>".$player['class']."</td><td>".$player['number']."</td><td>".$player['name']."</td><td>".$ageCountry."</td><td>".$player['club']."</td>
    <td class='res1'>
        <input type='name' class='form-control inputfield' id='".$player['p_id']."-res1"."' name='".$player['p_id']."-res1"."'>
    </td>
    <td class='res2'>
        <input type='name' class='form-control inputfield' id='".$player['p_id']."-res2"."' name='".$player['p_id']."-res2"."'>
    </td>
    <td class='res3'>
        <input type='name' class='form-control inputfield' id='".$player['p_id']."-res3"."' name='".$player['p_id']."-res3"."'>
    </td>
    <td>
        <div id='".$player['p_id']."-best"."'></div>
    </td></tr>";
    $counter += 1;
}
echo "</tbody></table>";

Followed this to make the javascript part.

$(document).ready(function() {
    function sendData(elementId) {
       $.ajax({
            url: "handlelivetournament.php",
            type: "post",
            data: "msg="+$('#'+elementId).val(),
            success: function(){   
                alert($('#'+elementId).val());
            },


            error:function(){
                alert("failure");

            }
        });


    }

    $('.inputfield').keypress(function(e) {
    if(e.keyCode == 13) {
        sendData(this.id);
        switch_focus_to_row_below();
    }});
});

Now i'd like to switch focus to an input field in the same column but in the row below. The issue is that i do not know the id of the element. Is something like this possible? And if it is, once it's in the final row of the column could it switch to next column's first input field?

Community
  • 1
  • 1
Banana
  • 814
  • 1
  • 8
  • 28
  • try loading the javascript with the php script. whenever you adda a new field, attach a javascript for that particular field. – Prashanth Benny Jan 08 '17 at 12:14
  • you could also have a reference to the answer of [this](http://stackoverflow.com/questions/11277989/how-to-get-the-focused-element-with-jquery) question for a more cleaner approach! – Prashanth Benny Jan 08 '17 at 12:17
  • One idea i had was to select all the classes who have 'res1' / 'res2' / 'res3' as a name. Though i'm not sure they would come in the order i'd need. – Banana Jan 08 '17 at 12:29

1 Answers1

1

If you cannot use a custom ID for some reason, you can use classes. For each input add a unique class. For example, "r1c1" for row 1 column 1 and so on. You can then

  1. get the current unique class for the focused input field.
  2. add 1 to row part,
  3. get the new input and set the focus to it.
maximz101
  • 678
  • 1
  • 8
  • 20