CODEWITHSUNDEEP
jqueryajaxformsmagento
Rodrigo Domingues
Rodrigo Domingues

Reputation: 61

Show textarea field in the same page with AJAX

I trying to show the value of a textarea input while typing using keyup in my showContent div (I will add more code later). But I'm not good with Ajax and/or JQuery and would like some help.

The form in formPage.phtml (I don't know if because it's a phtml file that matters):

<form id="answer_form" class="form" method="post">
   <textarea class="input-text" id="content" name="content" id="answer_content" title="Content"></textarea>
   <div id="showContent"><span></span></div>
</form>

I want to show it's content in the showContent div while it's being typed, in other words, after every letter.

Thanks a lot!

Upvotes: 2

Views: 173

Answers (3)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

I suggest the use of input event instead of keyup since it's more efficient when you track the user input's :

$('body').on('input', '#content', function(){
    $('#showContent').text( $(this).val() );
})

Hope this helps.

$('body').on('input', '#content', function(){
    $('#showContent').text($(this).val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="answer_form" class="form" method="post">
  <textarea class="input-text" id="content" name="content" id="answer_content" title="Content"></textarea>
  <div id="showContent"><span></span></div>
</form>

Upvotes: 3

shafiq.rst
shafiq.rst

Reputation: 1296

You can do as follow

$(document).on('keyup','#content',function(){
      $("#showContent").html($(this).val());
});


$(document).on('keyup','#content',function(){
	  $("#showContent").html($(this).val());
	});					
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="answer_form" class="form" method="post">
  <textarea class="input-text" id="content" name="content" id="answer_content" title="Content"></textarea>
  <div id="showContent"><span></span></div>
</form>

Upvotes: 2

shahzeb akram
shahzeb akram

Reputation: 926

I hope it will solve your problem

<form id="answer_form" class="form" method="post">
            <textarea onkeyup="setContent()" class="input-text" id="content" name="content" id="answer_content" title="Content"></textarea>
            <div id="showContent"><span></span></div>
</form>

<script>
function setContent(){
       $("#showContent").html($("#content").val());
}
</script>

Upvotes: 3

Related Questions