Trigger submit button using jQuery

Question

I have tried that code that I posted on fiddle.

I want to trigger that save button when enter key is pressed, the save button submits the form using ajax. It should trigger the save button when text > 0 in the span.

$(document).on('focusin', '#commentDescription', function(e) {
  $('.comment-submit').slideDown(500);
  $(this).css({
    'border-bottom-left-radius': '0',
    'border-bottom-right-radius': '0'
  });
});

$(document).on('focusout', '#commentDescription', function(e) {
  if ($('#commentDescription').text().length === 0) {
    $('.comment-submit').slideUp(500);
    $(this).css({
      'border-bottom-left-radius': '5px',
      'border-bottom-right-radius': '5px'
    });
  }
});

.form-container {
  background-color: #d0d2ff;
  padding: 30px;
}

.textarea {
  font-family: inherit;
  font-size: inherit;
  padding: 1px 6px;
  display: block;
  width: 100%;
  overflow: hidden;
  resize: both;
  min-height: 30px;
  line-height: 20px;
  border-radius: 3px;
  padding-top: 4px;
  background-color: white;
  resize: none;
}

.textarea[contenteditable]:empty::before {
  content: "Write a comment...";
  color: gray;
}

.modal-content {
  background-color: #f4f5f7;
}

.textarea:focus {
  outline-color: rgb(223 223 223 / 0%);
  outline: 0;
}

.comment-submit {
  width: 99%;
  background-color: white;
  padding: 3px 10px 8px 6px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

.btn-comment-submit {
  padding: 0.215rem 0.800rem
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="form-container">


  <form id="commentSubmitForm">
    <span class="textarea" role="textbox" name="description" id="commentDescription" contenteditable></span>
    <input type="hidden" name="key" id="commentTaskId" value='1'>
    <div class="comment-submit" style="display: none;">
      <button class="btn btn-success btn-xs btn-comment-submit" id="submit" type="submit">Save</button>
    </div>
  </form>
</div>

JSFiddle Code

Answer 1

Now it's fired if the text of the textarea is > 0

$(document).on('focusin', '#commentDescription', function(e) {
  $('.comment-submit').slideDown(500);
  $(this).css({
    'border-bottom-left-radius': '0',
    'border-bottom-right-radius': '0'
  });
  $('#commentDescription').bind('keypress', function(event) {
    if ((event.keyCode == 13) && (event.target.textContent != '')) {
      event.preventDefault();
      $("#submit").click();
    }
  });
});

Answer 2

You need the keycode for the enter button.

Keycode for Enter Key is 13

When the user presses the Enter Key then you can use

 event.keyCode === 13

to find if the user has pressed the Enter Key or not.

Now to prevent the new line when Enter Key is pressed, we can do this with CSS also.

.textarea br {
  display: none
}

Code:

$(document).on('focusin', '#commentDescription', function(e) {
  $('.comment-submit').slideDown(500);
  $(this).css({
    'border-bottom-left-radius': '0',
    'border-bottom-right-radius': '0'
  });
});

$(document).on('focusout', '#commentDescription', function(e) {
  if ($('#commentDescription').text().length === 0) {
    $('.comment-submit').slideUp(500);
    $(this).css({
      'border-bottom-left-radius': '5px',
      'border-bottom-right-radius': '5px'
    });
  }
});

$("#commentDescription").keyup(function(event) {
   
   if (event.keyCode === 13) {
       var spanContent = $('#commentDescription').text();
       
       if(spanContent.length > 0){
          //$("#submit").click();
          console.log("Form Submitted")
       }
       else{
         console.log("Please write some comment.")
       }
   }                                                                        
 });

.form-container {
  background-color: #d0d2ff;
  padding: 30px;
}

.textarea {
  font-family: inherit;
  font-size: inherit;
  padding: 1px 6px;
  display: block;
  width: 100%;
  overflow: hidden;
  resize: both;
  min-height: 30px;
  line-height: 20px;
  border-radius: 3px;
  padding-top: 4px;
  background-color: white;
  resize: none;
}

.textarea[contenteditable]:empty::before {
  content: "Write a comment...";
  color: gray;
}
.textarea br {
   display: none
}

.modal-content {
  background-color: #f4f5f7;
}

.textarea:focus {
  outline-color: rgb(223 223 223 / 0%);
  outline: 0;
}

.comment-submit {
  width: 99%;
  background-color: white;
  padding: 3px 10px 8px 6px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

.btn-comment-submit {
  padding: 0.215rem 0.800rem
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="form-container">
  <form id="commentSubmitForm">
    <span class="textarea" role="textbox" name="description" id="commentDescription" contenteditable></span>
    <input type="hidden" name="key" id="commentTaskId" value='1'>
    <div class="comment-submit" style="display: none;">
      <button class="btn btn-success btn-xs btn-comment-submit" id="submit" type="submit">Save</button>
    </div>
  </form>
</div>

Answer 3

You can do that by adding event on that (Edited)

$(document).on('focusin', '#commentDescription', function(e) {
    $('.comment-submit').slideDown(500);
    $(this).css({
        'border-bottom-left-radius': '0',
        'border-bottom-right-radius': '0'
    });

    if($('#commentDescription').val()) {
        $("#commentDescription").keyup(function(event) {
            if (event.keyCode === 13) {
                $("#submit").click();
            }                                                                        
        });
    }
});