CODEWITHSUNDEEP
javascriptjquerydom-eventsjquery-events
Tigerman55
Tigerman55

Reputation: 231

How to check the length of a Textarea

I am trying to calculate if a textarea has a length of more than zero, then run a piece of code. I can't get this to work for some reason. I would appreciate help.

Here is my code:

Javascript (including jQuery):

$(document).ready(function () {
    if ($('.comments').val().length > 0) {
        $('form').attr('action', '?Email');
    }
});

HTML:

<form action="?AddToQuote" method="POST">
    <textarea name="comments" class="comments"></textarea>
    <input type="submit" value="submit" />
</form>

I have tried a lot of different Javascript, none of it is working. Does a Javascript if statement run once the HTML page has loaded? I am positive that the line within the if statement works without the if statement, I have tested it already.

Upvotes: 1

Views: 4758

Answers (5)

nathan hayfield
nathan hayfield

Reputation: 2685

Do it on the submit event of the form. This way it will only check it one time. 

$('form').submit(function(){
  if( $('.comments').val() ) {
    $('form').attr('action', '?Email');
   } 
});

or i like to add a hidden input:

$('form').append('<input type="hidden" name="email" value="1">');

or you could just check on the server side if there are any comments to email.

Upvotes: 1

Jestino Sam
Jestino Sam

Reputation: 23

Well you can try the following code. Hope it helps you. I have written the code in JS. You need to call the function on the load of page. Hope this helps!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function display()
{
var txt = document.getElementById("myarea").value;
var len = txt.length;
if (len > 0){
    document.write("Sucess"); // if len > 0 do some action
}
else
    document.write(txt); //else condition
}
</script>
</head>
<body>
<textarea id="myarea" rows="4" cols="25">
Hello! How are you??
</textarea>
</body>
</html>

Upvotes: 0

feeela
feeela

Reputation: 29932

You need to execute that line each time the textarea contents get updated. Thus you need to set up the logic on the DOM ready event but evaluate the condition on each content change in the textarea:

$( document ).ready( function() {

    var $comment = $('.comments');
    $comment.on( 'change', function( event ) {

        if( $('.comments').val().length > 0 ) {
            $( 'form' ).attr( 'action', '?Email' );
            $comment.off( 'change' );
        }

    } );

} );

As suggested by @destroydaworld you could also use the keyup event if it is really necessary that the check should be evaluated after each single charcter typed in by the used. This is normally used in combination with character counting. But in your case – as you are trying to add some URL parameter – I guess it is sufficient to listen to the change event.

Upvotes: 3

D4V1D
D4V1D

Reputation: 5849

Your if statement will be executed when the DOM is ready, that is to say when your page is fully loaded. Of course, your textarea is empty at that stage. So your if statement will never be true. You should add an event listener to your textarea like so :

$('.comments').on('keyup', function() {
     // Do your IF statement here
});

Upvotes: 1

Jaypee
Jaypee

Reputation: 1280

Have you tried this? http://www.jqeasy.com/jquery-character-counter/

Also, did you try calling your form through an ID instead as ('form') ?

$('#theformid').attr('action', '?Email');

Upvotes: 0

Related Questions