add a button below textarea in powerportals using jquery

112
March 10, 2022, at 11:40 PM

I was wondering if there is away to add a button below a textarea using jquery. I have generated html like below in power portals page.

<textarea rows="7" cols="20" maxlength="2000" id="description" class="textarea form-control "></textarea>

I would like to add a button just below it. I am using the code below but it is not displaying the button at all.

$(document).ready(function () {
$("#description").append("<button type='button' id='btnSave' class='btn' 
style='color:#fff;background-color:#36f;border-color:36f;' 
onclick='savefunction'>Save</button><br><br>");
});
Answer 1

You cannot put html inside textarea, you can only put text inside it. If you want to display a button within a text area, you can try appending the button on the parent of text area. and position the button accordingly.

$(document).ready(function () {
$("#textwrapper").append("<button onclick='savefunction' id='btnSave' type='button' style='color: #fff; background: #36f; border-color:#36f; display:block; margin-left:auto;'>Save</button><br><br>");
});
* {
  box-sizing: border-box;
}
.textarea-wrapper {
  position: relative; 
  display:inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="textwrapper" class="textarea-wrapper">
<textarea rows="7" cols="20" maxlength="2000" id="description" class="textarea form-control "></textarea>
</div>

Rent Charter Buses Company
READ ALSO
Separate panel for Tree view with multi-select checkbox having extra white space

Separate panel for Tree view with multi-select checkbox having extra white space

I am making multi-select tree view with jquery and I need to separate the list to left and right layoutAnd for the separating part, I found a way to do it

139
How to number rows with multiple condition using arrayformula on spreadsheet

How to number rows with multiple condition using arrayformula on spreadsheet

Column Number is the numbers of column Integer starts on 1 and so on, and if there is multiple number on the column Integer so will the Number make multiple number too

115
Adding a number with a plus button

Adding a number with a plus button

I want to make a button that will ad a number to existing fieldMy code:

99
Select author automatically in Wordpress importer

Select author automatically in Wordpress importer

If you're importing posts to Wordpress and the author is already on the new Wordpress, there is no default way to select the author in the list

132