Q:

Auto filling a form and submitting based on a ajax search answer

This problem has been frustrating me for a few days, and as I have found some help here for other problems on my project, it seems that someone could provide insight that I am overlooking.
I admit I am very new to sql, javascript, jquery, ajax, css, and php.  I did 3 years of Computer science in college (15 years ago) While coding and logic don't change much, its syntax and handshakes, and where the computing is happening that I have either forgotten, overlooked, or am ignorant.
I have completed an ajax based search submission.
this search displays the target php in a div labeled .Admin
this works excellently.
Its answer is a display of a tree and the nodes above and below the searched node.
I want to make each node in the tree a clickable link to the search results for its own node.
In the php result I coded it to write in a html call to a javascript function and it generates a unique id for each , as well as its own function call. (whether or not that is a good idea its what i tried) I would think that it is then easy to get javascript to fill out the form with the created link using information it knows and resubmit as no refresh is needed to search again. I tried having the php write this script so that it is developed with the page, and I have tried writing the script and including it in the parent page, so that it is already loaded... I'm not sure where it should go or how it should be written.  
I may be missing an integral part, or I'm trying to do more than I am supposed to with the code or not completely grasping where the operation is happening and need to rethink it entirely.
I will try to include all relevant code, if its not enough, I will happily add. Thanks in advance.
CallSearch.js
    $(document).ready(function() {
        $('#Search').submit(function(event) {
            $.ajax({
                type        : 'POST', 
                url         : 'MenuSearch.php',
                data        : $( this ).serialize()
            })
            .done(function(results) {
                $(".Admin").html(results);
            });
        event.preventDefault();
        }); 
    });

Menu.php (where my search form is)
    <script src="/JS/CallSearch.js"></script>
     ...
    <li><a>Search</a> <input type= "text" name="Search" id="search_name" class="search-group">
                <ul>
                    <li><input type="radio" name="Table"  id="TableRegion" value="R" class="search-group" checked><label for="TableRegion">Region</label></li>
                    <li><input type="radio" name="Table"  id="TableGrape" value="G" class="search-group"><label for="TableGrape">Grape</label></li>
                    <li><input type="radio" name="Table"  id="TableWine" value="W" class="search-group"><label for="TableWine">Wine</label></li>
                    <li><button type="submit" id="SubmitSearch">Submit</button></li>
                </ul>
            </li>
        </form>
    ...

MenuSearch.php
    define('DB_SERVER', 'localhost');
    define('DB_USERNAME', 'Webpage');
    define('DB_PASSWORD', 'Guest');
    define('DB_DATABASE', 'database');
    $db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
    ...
    $sqlp ="SELECT * FROM region a JOIN Regionclosure b ON a.idregion=b.parent WHERE b.child= $idReg ORDER BY b.Depth DESC;";
    ...
    $resultp = mysqli_query($db, $sqlp);
            $string ="";
            while($row = mysqli_fetch_assoc($resultp)){
                $Reg = $row["RegName"];
                $Parent= $row["Parent"];
                echo $string . "|___";
                if($_SESSION["Level"] == 'A' or $_SESSION["Level"] == 'C') 
                    echo $Parent . " - ";
                echo  "<a href='#' id='$Reg'>" . $Reg . "</a><br>";
                echo "
                    <Script>
                        $('#$Reg').click(function(){ searchforReg('$Reg'); return false; });
                    </script>";
                $string .= "&nbsp;&nbsp;&nbsp;";
            };

I have tried multiple iterations of a function for "searchforReg('$Reg'); to no avail... i feel like it should be something like :
    function "searchforReg(Region){
    SearchData= "Table=R&Search="+$(Region).val;
    (function() {
        $.ajax({
            type        : 'POST', 
            url         : 'MenuSearch.php',
            data        :  SearchData
        })
        .done(function(results) {
            $(".Admin").html(results);
        });
    event.preventDefault();
        });
    });

This however results in activating the "action" search failing to send the answer to the  and opens the php (with no CSS... gasp.. its just not pretty) I feel like a simple javascript should be able to handle it, but i tried all of the different ways i could think of (or look up) to make it work to no avail.
I realize I am playing in the "deep end," and I'm in my "water wings" so if you could have mercy and push me to the edge, I would appreciate it.

A:

First, the process of printing a click handler for each link is overkill. Instead, just give each link a class and set up a single handler for any link of that class. In menusearch.php:
echo  "<a href='#' id='$Reg' class='reg_link'> $Reg </a><br>";
$string .= "&nbsp;&nbsp;&nbsp;";

Side note - in PHP, if you echo with "double" quotes, variables will be rendered, so no need to concatenate. That's why $Reg is just hanging out. If you echo with 'single' quotes, the string is interpreted literally. 
Then in menu.php, we have a bit of javascript:
<script>    

    /* This is a non-standard listener, bound to the body so that any
    dynamically added elements pulled in via ajax, but not in the original document can still be found.
    Also, this can be shortened to a single line, but I split it up for clarity.
    The single-line version is commented out.  */

    $(document.body).on('click', '.reg_link', function(){
        //searchforReg($(this).attr('id'));
        var id = $(this).attr('id'); //get the id of clicked element
        searchforReg(id); //trigger function
    });

    function searchforReg(Region){
        var SearchData= "Table=R&Search="+Region;
        //If you're not familiar with console.log, it's a huge help in debugging
        //console.log('searchData = ', SearchData);
        $.ajax({
            type        : 'POST', 
            url         : 'MenuSearch.php',
            data        :  SearchData
        })
        .done(function(results) {
            $(".Admin").html(results);
        });
    }
</script>

Finally, I'm guessing you have some $_POST handling in MenuSearch.php for that data, but I don't see that above so I'll assume it's working...

