Echo PHP Variable to Button Value Then Send Button Value to Input text

Question

Hello I am wanting to echo a PHP Variable to a buttons value then send the buttons value to an input text. I was able to echo the button with the variable but when I click the button it does nothing. I'm not sure why, because when I do this without the PHP just the script, and inputs it works perfectly. I am just missing something I know it, I can't find much info on how to pass php to a button then pass the button value to an input text.

Here's the script that passes the button value to the input text:

$( document ).ready(function() {
var $theButtons = $(".button");
var $theinput = $("#theinput");
$theButtons.click(function() {
    $theinput.val(this.value);
});
});

Here's the PHP that echos the variable as a button:

        require "config.php";  // database connection



    $in=$_GET['txt']; 
    if(!ctype_alnum($in)){  // 
    echo "Search By Name, or Entry ID";
    exit;
    }

    $msg="";
    $msg="";
    if(strlen($in)>0 and strlen($in) <20 ){ 
    $sql="select name, entry, displayid from item_template where name like '%$in%' LIMIT 10"; // the query
    foreach ($dbo->query($sql) as $nt) {
    //$msg.=$nt[name]."->$nt[id]<br>";
    $msg .="<table style='table-layout:fixed;'> // Just the start of my table
    <tr>
    <td>Name</td>
    <td>Entry ID</td>
    <td>Display ID</td>
    </tr>
    <tr>
    <td align=center><a href=http://wowhead.com/item=$nt[entry]>
    $nt[name]</a>
    </td>
    <td>$nt[entry]</td>
    <td>
    <input type=button class=button value=$nt[displayid]> // The Value I need echoed out in a button is $nt[displayid]
    </td>
    </tr>
    </table>"; // end of my table}
}
$msg .='';
echo $msg;

Not that it matters but here is the input text

<input type="text" id="theinput"/>

Answer 1

Ok, here goes...

1. Use event delegation in your JavaScript to handle the button clicks. This will work for all present and future buttons

   jQuery(function($) {
       var $theInput = $('#theinput');
       $(document).on('click', '.button', function() {
           $theInput.val(this.value);
       });
   });
   

2. Less important but I have no idea why you're producing a complete table for each record. I'd structure it like this...

   // snip
   
   if (strlen($in)>0 and strlen($in) <20 ) :
   // you really should be using a prepared statement
   $sql="select name, entry, displayid from item_template where name like '%$in%' LIMIT 10";
   ?>
   <table style="table-layout:fixed;">
   <thead>
   <tr>
       <th>Name</th>
       <th>Entry ID</th>
       <th>Display ID</th>
   </tr>
   </thead>
   <tbody>
   <?php foreach ($dbo->query($sql) as $nt) : ?>
   <tr>
       <td align="center">
           <a href="http://wowhead.com/?item=<?= htmlspecialchars($nt['entry']) ?>"><?= htmlspecialchars($nt['name']) ?></a>
       </td>
       <td><?= htmlspecialchars($nt['entry']) ?></td>
       <td>
           <button type="button" class="button" value="<?= htmlspecialchars($nt['displayid']) ?>"><?= htmlspecialchars($nt['displayid']) ?></button>
       </td>
   </tr>
   <?php endforeach ?>
   </tbody>
   </table>
   
   <?php endif;
   

Answer 2

Make it easy on yourself and try to make your code easy to read. I personally prefer to write my html cleanly and outside of echo statements like so:

Html

if (strlen($in) > 0 and strlen($in) < 20) {
    $sql = "select name, entry, displayid from item_template where name like '%{$in}%' LIMIT 10"; // the query
    foreach ($dbo->query($sql) as $nt) {
        //$msg.=$nt[name]."->$nt[id]<br>";
        ?>
        <table style="table-layout:fixed;">
            <tr>
                <td>Name</td>
                <td>Entry ID</td>
                <td>Display ID</td>
            </tr>
            <tr>
                <td align="center">
                    <a href="http://wowhead.com/item=<?=$nt['entry'];?>"><?=$nt['name'];?></a>
                </td>
                <td><?=$nt['entry'];?></td>
                <td>
                    <input type="button" class="button" value="<?=$nt['displayid'];?>">
                </td>
            </tr>
        </table>
        <?php
    }
}

Javascript

$( document ).ready(function() {
    var $theButtons = $(".button");
    var $theinput = $("#theinput");
    $theButtons.click(function() {
        // $theinput is out of scope here unless you make it a global (remove 'var')
        // Okay, not out of scope, but I feel it is confusing unless you're using this specific selector more than once or twice.
        $("#theinput").val(jQuery(this).val());
    });
});