How can I use 'onkeydown' and 'onclick' with jquery?

Question

I have this code in my php page:

<div id="chatarea">
  <div id="jqarea">
    <div class="chatboxcontent"></div>
  </div>
</div>
<div class="chatbox">
  <p>
    <input type="text" name="digit" id="digit" size="50" onkeydown="javascript:checkChatBoxInputKey(event,document.getElementById('digit').value,'<?php echo $cuser ?>')" />
  </p>
  <p>
    <button class="btn" title="send" type="button" onclick="filltxtarea(document.getElementById('digit').value,'<?php echo $cuser ?>')">
      <span>Send</span>
    </button>
  </p>
</div>

In my javascript file I have this function:

function filltxtarea(desctext, uchat) {
    $(".chatboxcontent").append('<div class=chatboxmessage><span class="chatboxmessagefrom">' + uchat + ': </span><span class="chatboxmessagecontent">' + desctext + '</span></div>');
    $('#digit').val('');
    $('#digit').focus();
    alert("ok2");
    jQuery.ajax({
        type: 'POST',
        url: 'chat.php',
        dataType: 'json',
        data: {
            "newrow": "desctext"
        },
        success: function(response) {
            alert(response);
        }
    })
}

function checkChatBoxInputKey(event, desctext, uchat) {
    if (event.keyCode == 13 && event.shiftKey == 0) {
        alert("ok1");
        filltxtarea(desctext, uchat);
    }
}

The code works for onclick but I have a problem with the onkeypressdown . When I use the Enter key it writes in the chat area, but when complete the filltxtarea function deletes the chatboxcontent text. Why is that happening?

Answer 1

This solution below was tested and it works fine.

First:

Remove onkeydown event of digit. It should be like this:

 <input type="text" name="digit" id="digit" size="50"  />

Remove onclick event of the button and set the id property.

<button class="btn" id="btnClick" title="send" type="button" >

create a input hidden in your html to store $cuser php var

<input type="hidden" name="cuser" id="cuser" val="<?php echo $cuser ?>" />

Replace your javascript to the following:

 $(document).ready(function(){       
    $("#digit").keydown(function(event){
            if (event.keyCode == 13 && event.shiftKey == 0) {
                alert("ok1");
                filltxtarea($("#digit").val());
            }
    });

    $("#btnClick").click(function(){
        filltxtarea($("#digit").val());
    });

    function filltxtarea(desctext) {
        var uchat = $("#cuser").val();
        $(".chatboxcontent").append('<div class=chatboxmessage><span class="chatboxmessagefrom">' + uchat + ': </span><span class="chatboxmessagecontent">' + desctext + '</span></div>');
        $('#digit').val('');
        $('#digit').focus();
        alert("ok2");
        jQuery.ajax({
            type: 'POST',
            url: 'chat.php',
            dataType: 'json',
            data: {
                "newrow": "desctext"
            },
            success: function(response) {
                alert(response);
            }
        })
    }

 });

Any doubts please let me know.

Hope it help.