Almac Almac - 1 month ago 7
Ajax Question

How to post a search form using jQuery/Ajax and put results in a div?

I'm trying to post a search query to a local server and return the results into a div using Ajax. I'm following the formula from the documentation but cannot get an output. Also not getting any console log errors. The source code is from: Post a form using ajax and put results in a div

<form action="/" id="searchForm">
<input type="text" name="s" placeholder="Search...">
<input type="submit" value="Search">
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>
<p id="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<script>
$(document).ready(function () {

$("#searchForm").submit(function(event) {

// Stop form from submitting normally
event.preventDefault();

// Get some values from elements on the page:
var $form = $(this),
term = $form.find( "input[name='s']").val(),
url = $form.attr("action");

// Send the data using post
var posting = $.post( url, {s: term});

// Put the results in a div
posting.done(function(data) {
var content = $(data).find("#content");
$("#result").empty().append(content);
});
});
});
</script>

Answer

You can use the html() method, i.e.:

var content = data;
console.log(data);
$("#result").html(content);