How to use html form retrieved by jquery load function

Question

I have this search form in a different file called webpage_search.html.

<ul class="search">
    <li>
        <form  action="webpage_srch_rslts.php" method="GET">
        <select style="height:30px;" class="col-sm-3" name="selection_id" id="selection_id">
        <option value="Movies">Search by title</option>
        <option value="Actors">Search by actor</option>
        <option value="Directors">Search by director</option>
        </select>
    </li>
    <li>
        <input style="width:272px; height:30px;" type="text" name="query" />
    </li>
    <li>
        <input style="height:30px;" type="submit" value="Search"/>
    </form>
    </li>
</ul>

When I have this code directly added to my page it works, the search works when I hit the submit button.

But when I try to load this content separately from a different file using jquery.load function then it only displays the form on the page but nothing happens when I hit the submit button.

Code I'm using for loading the form content into my div search_menu:

<script>
        /* global $ */
        $(document).ready(function() { 
            $('#search_menu').load('webpage_search.html');
        });
</script>

SilverSurfer · Accepted Answer · 2017-09-06 09:01:01Z

2

I recommend you use ajax() syntax cause load() is actually deprecated:

$(document).ready(function() { 
    $.ajax({
           url: "webpage_search.html", 
           success: function(result){
                $("#search_menu").html(result);
           }
    })
})

Also change place where form tag open and close:

<ul class="search">
<form  action="webpage_srch_rslts.php" method="GET">
    <li>
        <select style="height:30px;" class="col-sm-3" name="selection_id" id="selection_id">
        <option value="Movies">Search by title</option>
        <option value="Actors">Search by actor</option>
        <option value="Directors">Search by director</option>
        </select>
    </li>
    <li>
        <input style="width:272px; height:30px;" type="text" name="query" />
    </li>
    <li>
        <input style="height:30px;" type="submit" value="Search"/>
    </li>
</form>
</ul>

edited Sep 6, 2017 at 9:01

answered Sep 6, 2017 at 8:54

SilverSurfer

4,3647 gold badges27 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use html form retrieved by jquery load function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related