Submit Ajax Formular bei Eingabe drücken in Textfeld

Question

Ich habe ein Textfeld, das meine Nachricht Textfeld ist. Im Moment funktioniert meine Ajax-Form per Knopfdruck. Ich rate weil der Name der Taste.

Ich will es so, dass, wenn ich in meinem Textfeld Enter drücken, es das Formular übermittelt, aber ohne die Seite zu aktualisieren.

Das Hinzufügen einiger jquery bei enter macht meine Seite aktualisieren.

Unten ist der Code für den aktuellen Zustand meiner Aktualisierungsseite. Mein Arbeitszustand mit einem Knopf statt mit dieser Form enthalten:

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

Mein PHP-Skript ist:

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

Mein Javascript/Jquery ist: `

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

Answer 1

Fügen Sie eine Keydown-Funktion hinzu, um die Funktion auszuführen.

$("#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>

Answer 2

Änderung der Funktion dazu

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

Answer 3

von unten Code, den Sie Ajax-Funktion nach Benutzer drücken Enter-Taste

$('#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; 
        }  
       }); 
      } 
     } 
}); 

Sie überprüfen eingegebenen Text kann auch einen gewissen Wert hat nennen kann oder nicht