CODEWITHSUNDEEP
jqueryajaxload
anthony
anthony

Reputation: 127

How to use html form retrieved by jquery load function

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>

Upvotes: 1

Views: 1563

Answers (1)

SilverSurfer
SilverSurfer

Reputation: 4365

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>

Upvotes: 2

Related Questions