GETフォームとボタンを使用したリクエスト

Question

現在、私はsendchat.phpに人が入力したいメッセージを送信するシンプルなフォームを持っています。問題は本当にiframeを使用してリフレッシュせずにしたいという問題です。誰かが、別のページに移動したり、リフレッシュしたりすることを意味しないという意味でフォーム提出を行う方法について、適切なコードで私に指摘できますか？

<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> 

Answer 1

ajaxを使用して、ページを更新せずにボタンをクリックすると投稿データを取得できます。

<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); 
}); 
}