提交ajax表單輸入按文本框

我有一個文本框，這是我的消息文本框。目前，我的ajax表單通過點擊一個按鈕來工作。我猜是因爲按鈕的名字。提交ajax表單輸入按文本框

我想要它，所以當我在我的文本框中按Enter時，它會提交表單，但不刷新頁面。

在輸入時添加一些jquery使我的頁面刷新。

下面是我刷新頁面當前狀態的代碼。一個按鈕我的工作狀態將包含在此的形式：

<form class="chat-form form -dark" method="POST" onsubmit="return submitchat();"> 
     <input class="form-control" type="text" name="chat" id="chatbox" placeholder="Type something.." /> 
     <input type='submit' name='send' id='send' class='btn btn-send' value='Send' /> 
    </form>

我的PHP腳本是：

<form class="chat-form form -dark" method="POST" onsubmit="return submitchat();"> 
     <input class="form-control entryMsg" type="text" name="chat" id="chatbox" placeholder="Type something.." /> 
    </form>

我的JavaScript/jQuery是：`

<script> 
    // Javascript function to submit new chat entered by user 
    function submitchat(){ 
      if($('#chat').val()=='' || $('#chatbox').val()==' ') return false; 
      $.ajax({ 
       url:'chat/chat.php', 
       data:{chat:$('#chatbox').val(),ajaxsend:true}, 
       method:'post', 
       success:function(data){ 
        $('#result').html(data); // Get the chat records and add it to result div 
        $('#chatbox').val(''); //Clear chat box after successful submition 
        document.getElementById('result').scrollTop=document.getElementById('result').scrollHeight; // Bring the scrollbar to bottom of the chat resultbox in case of long chatbox 
       } 
      }) 
      return false; 
    }; 

    // Function to continously check the some has submitted any new chat 
    setInterval(function(){ 
     $.ajax({ 
       url:'chat/chat.php', 
       data:{ajaxget:true}, 
       method:'post', 
       success:function(data){ 
        $('#result').html(data); 
       } 
     }) 
    },1000); 

    // Function to chat history 
    $(document).ready(function(){ 
     $('#clear').click(function(){ 
      if(!confirm('Are you sure you want to clear chat?')) 
       return false; 
      $.ajax({ 
       url:'chat/chat.php', 
       data:{username:"<?php echo $_SESSION['username'] ?>",ajaxclear:true}, 
       method:'post', 
       success:function(data){ 
        $('#result').html(data); 
       } 
      }) 
     }) 
    }) 
</script> 
<script> 
    $(document).ready(function() { 
     $('.entryMsg').keydown(function(event) { 
      if (event.keyCode == 13) { 
       this.form.submit(); 
       return false; 
      } 
     }); 
    }); 
</script>`

來源

2017-07-07 Benza

HTTPS：/ /stackoverflow.com/a/155263/4229270 – Sinto

添加一個keydown函數來運行該函數。

$("#txtSearchProdAssign").keydown(function (e) { 
 
    
 
    if (e.keyCode == 13) { 
 
    console.log("put function call here"); 
 
    e.preventDefault(); 
 
    submitchat(); 
 
    } 
 
    
 
}); 
 

 
function submitchat(){ 
 
    console.log("SUBMITCHAT function"); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<form type="post"> 
 
<input type="text" id="txtSearchProdAssign"> 
 
</form>

來源

2017-07-07 07:44:13 Icewine

是的，但這甚至不讓我輸入任何內容到文本框中。 – Benza

你走了。更新。 – Icewine

:)非常感謝你。 – Benza

變化的功能至此

function submitchat(e){ 
    e.preventDefault(); 
// rest code 
}

來源

2017-07-07 07:43:13 Exprator

沒有做任何事情。 – Benza

從下面的代碼，你可以在用戶按下後調用AJAX功能輸入按鈕

$('#msg').keypress(function(e){ 

     if(e.keyCode == 13){ 
      var keyword = this.value; 
      console.log(keyword); 
      if(keyword.length>0){ 

       $.ajax({ 
        url: 'aj_support_chat.php', 
        method: 'POST', 
        data: {holder: 'chat_start',type: 'in',keyword: keyword,}, 
        success: function(res){ 
         console.log(res) 
         return false; 
        }  
       }); 
      } 
     } 
});

，你也可以檢查輸入的文字有一定的價值或者不

來源

2017-07-07 08:18:07 Pritamkumar

提交ajax表單輸入按文本框

回答

相關問題