CODEWITHSUNDEEP
javascriptphpjqueryajax
Banana
Banana

Reputation: 824

Set focus on dynamically created input field after enter press

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?

Upvotes: 1

Views: 1000

Answers (1)

maximz101
maximz101

Reputation: 678

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.

Upvotes: 1

Related Questions