How can I getting textarea value using javascript

Question

I want to make submit event depend textarea value. cause i want to check textarea is vaild. so when I was using javascript function getElementByid, it result was placeholder value.

I just want to know how can I fix it.

<div class="clearfix">
    <div class="input">
        <textarea name="comment" id="comment" placeholder="<?php _e("Your Comment Here", "bonestheme"); ?>" tabindex="4" style="border:1px solid #cbcbcb; resize:none"></textarea>
    </div>
</div>

<div class="form-actions">
  <input class="btn-commnet" name="submit" type="submit" id="submit" tabindex="5" value="<?php _e("Submit Comment","bonestheme"); ?>" />
</div>

<?php endif; ?>

your question is unclear. Where is your javascript code.

aorfevre
– aorfevre

2015-06-26 17:13:15 +00:00
Commented Jun 26, 2015 at 17:13 — aorfevre
– aorfevre, Commented Jun 26, 2015 at 17:13

rnevius · Accepted Answer · 2022-06-16 07:19:04Z

17

You can use .value. Here's a demo:

var textarea = document.getElementById('test');
var result = document.getElementById('result');

function updateResult() {
    result.textContent = textarea.value;
}

textarea.addEventListener('keyup', updateResult);

<textarea id="test" placeholder="Some placeholder"></textarea>
<p id="result"></p>

edited Jun 16, 2022 at 7:19

answered Jun 26, 2015 at 17:21

rnevius

27.2k10 gold badges60 silver badges86 bronze badges

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

Comments

Goat · Accepted Answer · 2015-06-26 17:17:13Z

4

A little unclear as to what you need to do but if you just want to validate that the textarea value is something other then the placeholder text, you could add a handler to call on click of the button, something like:

<input class="btn-commnet" name="submit" type="submit" id="submit" tabindex="5" value="<?php _e("Submit Comment","bonestheme"); ?>" onclick="return ValidationEvent()"/>

then have a javascript function that checks the value prior to submitting..

function ValidationEvent() {
    commentElm = document.getElementById('comment');
    if(commentElm.value === commentElm.placeholder)
        return false;   
    return true;
}

This could be greatly simplified using Jquery.

answered Jun 26, 2015 at 17:17

Goat

1051 silver badge7 bronze badges

Comments

Puneet Chawla · Accepted Answer · 2015-06-26 17:21:13Z

3

Try below example. It's very easy. It doesn't return placeholder value it returns content that is written in textarea either you write static or dynamic. I just specify how to get simply textarea value instead of placeholder. If you want to set any validation then show me your java script code, so that i can give you better result.

<html>
<head>
<script type="text/javascript">
function abc()
{
  var getTextArea = document.getElementById("txtArea");
  var value = getTextArea.value;
  alert(value);//It will show you text area value
}
</script>
</head>
<body>
<textarea id="txtArea" placeholder="hello">
</textarea>
<input type="submit" onclick="abc()"/>
</body>
</html>

edited Jun 26, 2015 at 17:21

answered Jun 26, 2015 at 17:10

Puneet Chawla

6,0795 gold badges18 silver badges34 bronze badges

Comments

raddevus · Accepted Answer · 2023-03-10 22:05:35Z

2

Same great sample as the upvoted answer but I added a replacement of the \n with <br/>

Now if you hit enter at the end of each line you'll see something like:

var textarea = document.getElementById('test');
var result = document.getElementById('result');

function updateResult() {
    let changedText = replaceAllReturns(textarea.value);
    result.innerHTML = changedText;
}

textarea.addEventListener('keyup', updateResult);

function replaceAllReturns(inText){
    let outText = inText;
    while(outText.indexOf("\n") >=0){
      outText = outText.replace("\n","<br/>");
    }
    return outText;
}

<textarea id="test" placeholder="Some placeholder"></textarea>
<p id="result"></p>

answered Mar 10, 2023 at 22:05

raddevus

9,29610 gold badges78 silver badges99 bronze badges

Collectives™ on Stack Overflow

How can I getting textarea value using javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related