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

Not A Robot · Accepted Answer · 2021-03-22 09:54:12Z

1

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>

edited Mar 22, 2021 at 9:54

answered Mar 22, 2021 at 7:21

Not A Robot

2,7002 gold badges20 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ihtisham Khan Over a year ago

Thanks for the answer, it always showing 'Please write some comment' in console and go to next line

Ihtisham Khan Over a year ago

This is working fine now but how to prevent new line, look at updated fiddle jsfiddle.net/shami003/2g9n7cq0/21

Not A Robot Over a year ago

@IhtishamKhan I have updated by code, please look, and it it helps you then accept this as answer

Ihtisham Khan Over a year ago

Thank you for the quick response :)

Clinchy · Accepted Answer · 2021-03-22 07:33:43Z

1

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

edited Mar 22, 2021 at 7:33

answered Mar 22, 2021 at 7:09

Clinchy

566 bronze badges

2 Comments

Ihtisham Khan Over a year ago

Hey, thanks for the answer but I wanted that submit only when the #commentDescription is 'focused and there is some input text'

Ihtisham Khan Over a year ago

It won't work that way, I tested it. on('focusin') is triggered when only you focus textarea, after that event code there won't work

Bernhard Beatus · Accepted Answer · 2021-03-22 14:14:11Z

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

edited Mar 22, 2021 at 14:14

answered Mar 22, 2021 at 7:30

Bernhard Beatus

1,2161 gold badge8 silver badges8 bronze badges

3 Comments

Ihtisham Khan Over a year ago

Your solution is somehow working. I have added "e.preventDefault();" to prevent adding new line. Now this is working in fiddle but not in my view cause this form is appended using jquery and I have used '$(document).on('focusin','#commentDescription' ,function(e){ $('.comment-submit').slideDown(500); $(this).css({ 'border-bottom-left-radius': '0', 'border-bottom-right-radius': '0' }); });

Ihtisham Khan Over a year ago

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

Ihtisham Khan Over a year ago

So how can I use this logic using this bind

Collectives™ on Stack Overflow

Trigger submit button using jQuery

3 Answers 3

4 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related