使用表单和按钮获取请求

So currently I have a simple form that sends to sendchat.php the message the person wants to type.. The issue being I dont really want to use iframes to make it work WITHOUT refresh.. Can someone point me with the right code on how to do a form submit in the BACKGROUND meaning no going to another page or refresh.

<form target="chat" action="sendchat.php" method="GET">
  <input type="text" class="form-control" id="message" maxlength="255" name="message" type="submit" placeholder="Enter your message or use !help for help."><br>
    <div class="col-xs-6 text-right">
        <button type="submit button" class="btn bg-teal-400 btn-labeled btn-labeled-right"><b><i class="icon-circle-right2"></i></b> Send Message</button>
    </div>
  </form>

<style> .iframe { display: none; border-color: rgba(225, 225, 225, 0); border-width: 0px; } </style>
        <iframe style="" name="chat" width="0px" height="0px" id="chat" onload="clearTextarea();"></iframe>

You may use ajax to get the post data upon clicking the button without refreshing the page.

<form target="chat" action="sendchat.php" method="GET">
<input type="text" class="form-control" id="message" maxlength="255" name="message"  placeholder="Enter your message or use !help for help."><br>
<div class="col-xs-6 text-right">
    <button type="button" class="btn bg-teal-400 btn-labeled btn-labeled-right"><b><i class="icon-circle-right2" onclick="save_chat()"></i></b> Send Message</button>
</div>
</form>
function save_chat(){
$.ajax({
    type: 'POST',
    url: 'sendchat',
    data: {'message': $('input[name="message"]').val()},
    success: function (data)
    {
        //do nothing
    },
    error: function (xhr, ajaxOptions, thrownError)
    {
        alert(xhr.status);
        alert(thrownError);
});
}