0

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>
UKTSLiam
  • 29
  • 5
  • 2
    To get automatic updates without refresh. You need to implement AJAX into your site. See here: http://stackoverflow.com/questions/16616250/form-submit-with-ajax-passing-form-data-to-php-without-page-refresh – GROVER. Jun 15 '16 at 02:15

1 Answers1

0

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);
});
}
kiong
  • 116
  • 6
  • Just for future ref, can you confirm what I would do if I wanted more than one data for example message and user. – UKTSLiam Jun 15 '16 at 02:35
  • the just add your variables to your data, separated by comma `data: {'message': $('input[name="message"]').val(), 'user': "me"},` – kiong Jun 15 '16 at 02:41