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