How do I pass a program name from php/html, as a variable to javascript rather than hard coding it in the ' $.get' statement

Question

I have a dropdown that uses JQuery/Javascript within my php/html program. This works fine if I hard code the name of the program that runs the SQL to load data into the dropdown list. I would like this code to be re-usable rather than duplicate it for each dropdown list (I want 2 in the current instance) so I would like to know how to pass different program names as each dropdown list accesses different files. Example: ClubID dropdown requires data from clubs using clubsSearch.php but MemberTypeID requires data from memtyp using memtypSearch.php . Here is the Javascript including my latest effort to pass the program name as a variable:

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    
    $('.search-box input[type="text"]').on("click input", function()
    {
        /* Get input value on change */
        var srchName =  <?php echo $SearchName?>;
        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings(".result");
        if(inputVal.length){
            $.get(srchName, {term: inputVal}).done(function(data){
                // Display the returned data in browser
                resultDropdown.html(data);
            });
        } else{
            resultDropdown.empty();
        }
    });
    
    // Set search input value on click of result item
    $(document).on("click", ".result p", function(){
        $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
        $(this).parent(".result").empty();
    });
});
</script> 

If I use

$.get("clubsSearch.php", {term: inputVal}).done(function(data){

it works fine.

The relevant section of the form is:

    <div class="col-6 col-md-4">
        <div class="form-group <?php echo (!empty($ClubIDer)) ? 'has-error' : ''; ?>">
        <label>Club ID:</label>
        <div class="search-box">
             <input type="hidden"  name="clubID" value="<?php $SearchName = "\"clubsSearch.php\"";? 
                           >" >   
             <input type="text"  name="ClubID" autocomplete="off"  class="form-control" 
                          value="<?php echo $ClubID; ?>" >
             <?php echo $SearchName?>
                 <div class="result">
                 </div>
            <span class="help-block"><?php echo $ClubIDer;?></span>
            </div>                          
        </div>
  </div>  

The **$SearchName** displays as " clubsSearch.php " but in Chrome's developer tools I can see the javascript has not recognised the variable var srchName =; x and no dropdown list appears.

Can anyone tell me how to present the search name to the javascript as I am completely unfamiliar with it. Any assistance would be appreciated.

Answer 1

Pass the program name in the data- attr like

<select name="WHATEVER" id="WHATEVER" data-program="YOUR_PROGRAM_NAME">

in JS get it like

var srchName = $(this).attr("data-program");

Answer 2

Resolved: In the html <input id="ClubID" data-pgm="\"clubsSearch.php\""> and in the Javascript var srchName =input.dataset.pgm