Need table to populate with search results from search bar
Question: I have a webpage with a search bar and a bunch of dropdown menus but just the
search bar is important right now. Anyways I have it working where when I
click the go button after the search bar it brings up a table, but wont put
the searched item in the table as I thought it would. Im using a
SimpleHTTPServer through Python

    
    
    <form role="form" id="form">
            <fieldset>
                <div class="form-group">
                <div class="row">
                <label for="search"> </label>
                <div class="col-lg-7 col-lg-offset-2">
                <input type="text"
                    class="form-control" name="search" id="search"
                    placeholder="Search for..." />
                </div>
    
                    <div class="col-lg-2">
                    <br>
                    <button type="button" class="btn btn-success" id="submit">       Go!
                    </button> </div> </div> </div>
                </fieldset>
        </form> 
    

JS: $('#submit').click(function(e){ e.preventDefault();

    
    
             var search=$('#search').val();
             $.get('post2.html', function(returndata){
    
             $('#output').html(returndata);
    
             } );
    
    
        });
    
    <table class="table">
        <thead>
            <tr>
            <th> Previous Searches: </th>
            </tr>
        </thead>
    
            <tr>
            <script>document.write(search)</script>
            </tr>
    
    </table>
    


Answer: Your "search" is out of scope. It only exists in your anonymous function for
.click(). You somehow need to pass "search" into your HTML, but that's not
really possible with your current setup.

What I'd recommend is using something like Handlebars, which allows you to
define templated HTML with variable placeholders, compile them, and then
insert variable values. For example, you might define in your HTML:

    
    
    <script type="text/x-handlebars-template" id="table-data-template">
        <table class="table">
            <thead>
                <tr>
                    <th> Previous Searches: </th>
                </tr>
            </thead>
    
            <tr>
                {{data}}
            </tr>
        </table>
    </script>
    

In your JS, you'd do something like:

    
    
    $('#submit').click(function(e){ 
        e.preventDefault();
        var renderData = Handlebars.compile($("#table-data-template").html());
        var search=$('#search').val();
        $('#output').html(renderData({data: search});
    }
    

Super clean. But you'll have to spend some time reading up on Handlebars and
all that.

If you aren't doing a lot of this template-based work in your app and
therefore Handlebars might be overkill, you could simply define the HTML
template inside your JS like so:

    
    
    $('#submit').click(function(e){ 
        e.preventDefault();
    var search=$('#search').val();
    $('#output').html(
        "<table class='table'>
            <thead>
                <tr>
                    <th> Previous Searches: </th>
                </tr>
            </thead>
    
            <tr>" + search +     
            "</tr>
        </table>");
    

So literally writing out the string of HTML that would be injected in your
output and concating your search results in there. Not super clean, but if
you're only doing this once, gets the job done.

