Question

So I have a test input and a submit button. I want to send the data via jQuery and retrieve the result from the post request and then display the value that the post request returns, without refreshing the page.

Here is my html:

<div id="middle">
    <form id="searchForm" action="/">
        <input placeholder="E.g. http://www.google.co.nz" id="url" type="text" name="forward_to"/>
        <input id="button" type="submit" name="shorten" value="Go"/>
    </form>

    <div id="result"></div>

</div>

Here is my php

if($query) {
    print("<div id='content'>http://www.website.co.nz/u/$short</div>");
} else {
    print("<div id='content'>Error</div>");
}

Is there anyway to do this?

Answer 1

$(document).ready(function(){
    $('#button').click(function(e){
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: '/',
            data: { query:  $('#url').val() },
            success: function(data) {
               $("#result").html(data);
            },
            error: function() {
              $("#result").html("Some error occurred.");
            }
        });
    });
});