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 ($('ments').val().length > 0) {
$('form').attr('action', '?Email');
}
});
HTML:
<form action="?AddToQuote" method="POST">
<textarea name="ments" class="ments"></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.
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 ($('.ments').val().length > 0) {
$('form').attr('action', '?Email');
}
});
HTML:
<form action="?AddToQuote" method="POST">
<textarea name="ments" class="ments"></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.
- 2 well this runs when the document is ready, so since you dont enter text in the textarea until after the dom loads, the code executes before there is any text – egucciar Commented Nov 12, 2013 at 16:30
- do it on the submit function of the form instead – nathan hayfield Commented Nov 12, 2013 at 16:30
5 Answers
Reset to default 3You 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 $ment = $('.ments');
$ment.on( 'change', function( event ) {
if( $('.ments').val().length > 0 ) {
$( 'form' ).attr( 'action', '?Email' );
$ment.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 bination 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.
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 :
$('.ments').on('keyup', function() {
// Do your IF statement here
});
Do it on the submit event of the form. This way it will only check it one time.
$('form').submit(function(){
if( $('.ments').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 ments to email.
Have you tried this? http://www.jqeasy./jquery-character-counter/
Also, did you try calling your form through an ID instead as ('form') ?
$('#theformid').attr('action', '?Email');
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>