Textarea value vanishes!

JavaScript
1

Ok. I overdosed on the javascript for this Contact Us form but it’s really buging me that I can’t see the problem.:rolleyes::injured:
Please lend a hand. Any help greatly appreciated.
The HTML


<label for="message">Message*</label>
<textarea id="message" onkeyup="cnt(this,document.contact.words)">Please Make any enquiries here..</textarea><br /><br /><br /><br />
<label for="words">Words*</label>
<input id="words" size="5" onkeyup="cnt(this,document.contact.message)" value="0"/>
<input id="submit" name="submit" class="button" type="submit"

The Script Verbose sorry!


//------------------------------#message--------------------------//

function cnt(w,x){
var y=w.value;
var r = 0;
a=y.replace(/\\s/g,' ');
a=a.split(' ');
for (z=0; z<a.length; z++) {if (a[z].length > 0) r++;}
x.value=r;
} 

var words=document.getElementById('words');
words.setAttribute('readonly','readonly');

var message=document.getElementById('message');
/*addEvent(message,'mousedown',function(){message.value=' ';},false);*/
// I blocked this to see if it was the problem, it's not.
addEvent(message,'focus',function(){
var gloria=document.getElementById('gloria');
gloria.innerHTML='This is a Requierd Field, you only have 50 words to enquire about us and our products.';
},false);

addEvent(message,'change',function(){checkmessage();},false);
addEvent(message,'blur',function(){checkmessage();},false);

function checkmessage(){
var message=document.getElementById('message');
alert(message.value); // all alerts fire regardless of case???
var words=document.getElementById('words');
var gloria=document.getElementById('gloria');
gloria.innerHTML='Snra. Gloria Marks.';
if(words.value<8){
alert(message.value); // all alerts fire regardless of case???
gloria.innerHTML='You have not expressed a valid enquiry. 8 word minimum.';
return false;
}
if(words.value>50){
gloria.innerHTML='You have passed your enquiry limit of 50 words.';
alert(message.value); // all alerts fire regardless of case???
return false;
}
if(message.value=''){
gloria.innerHTML='This is a Requierd Field, you have 50 words to enquire about Mexicali Rose or www.boutiquewholesaleitems.com.';
message.value='error';
return false;
}
else{
alert(message.value); // fires the value once then fires blank?? as the text vanishes?? 
gloria.innerHTML='Thank you '+firstname.value+'. We will check your enquiry.';
return true;
}
}

I’ve looked at it so long I can’t see the forest for the trees:shifty:

2

ulricht609 Thanks, I still act like 16 and wish I was 21.:lol:
We missed the comparison ops but for any one else, this works with the addEvent func from Steve Chapman/felgal at About com not shown.
THE HTML


<label for="message">Message*</label>
<textarea id="message">
Please Make any enquiries here..</textarea><br />
<br /><br /><br />
<label for="words">Words*</label>
<input id="words" size="5" value="0"/>
<!--Short & sweet, non obtrusive js, not sure about missing Requierd tags-->
<!--for onsubmit, though the form is short, one field is not Requierd-->
<!--might use setAttribute requierd to be completely unobtrusive?-->
<!--if it is a valid cross browser solution and doesn't affect sql Ajax etc.-->

THE EXTERNAL.JS Still verbose


//------------------------------#message--------------------------//

function cnt(w,x){
var w=document.getElementById('message');
var x=document.getElementById('words');
var y=w.value;
var r = 0;
var a=y.replace(/\\s/g,' ');
a=a.split(' ');
for (z=0; z<a.length; z++) 
{
if (a[z].length > 0) 
{
r++;
}
}
x.value=r;
} 

var words=document.getElementById('words');

words.setAttribute('readonly','readonly');//works?? Cross browser??

var message=document.getElementById('message');

addEvent(message,'keyup',function(){cnt();},false);//works!!

addEvent(message,'focus',function(){message.value=' ';},false);//works!!

addEvent(message,'keydown',function(){
var gloria=document.getElementById('gloria');
gloria.innerHTML='This is a Requierd Field, you only have 50 words to enquire about us and our products.';
},false);

addEvent(message,'change',function(){checkmessage();},false);//works!!

function checkmessage(){
var message=document.getElementById('message');
var words=document.getElementById('words');
var gloria=document.getElementById('gloria');
gloria.innerHTML='Snra. Gloria Marks.';
if(words.value<=10){
message.value='Error!';
gloria.innerHTML='You have not expressed a valid enquiry. 10 word minimum.'; 
return false;
}
if(words.value>50){
message.value='Error!';
gloria.innerHTML='You have passed your enquiry limit of 50 words.'; 
return false;
}
if(message.value==0){//Comparison '==' not '=' :eye:
message.value='Error!';
gloria.innerHTML='This is a Requierd Field, you have 50 words to enquire about Mexicali Rose or www.boutiquewholesaleitems.com.';
return false;
}
else{
gloria.innerHTML='Thank you '+firstname.value+'. We will check your enquiry.';
return true;
}
}

Thanks again ulricht609 & spikeZ I’m guessing it was Webdeveloper or Dani Web that allowed the post resolved form field but I guess they have all decided to kick that in the head, maybe an icon with a tick marked correct would do but the thumbs up should work if it shows up on the mother board of the forum?

3

@ Heinz Stapff : Congrats on the big 5 0,

cmparison operators in the ifs( they should be ==

cant believe i didn’t see that T_T

How do you mark this post resolved?

lol, i don’t really know :stuck_out_tongue:

:slight_smile: glad i could help some

4

You dont :slight_smile:

Many happy returns for yesterday, a great milestone to celebrate!
:hbday:

Spike

5

ulricht609 I got it and took the onkeyup out of the HTML. It was the cmparison operators in the ifs( they should be ==. Will post back latter. How do you mark this post resolved?:lol::rofl:

6

ulricht609
OK. I copied and pasted exactly as you posted. Thanks for that again. W in cnt function or ‘message’ is ok but //X.value (I’m guessing, should be ‘words’) throws an error ‘null’ in the cnt func itself like so:


function cnt(w,x){
//var w=document.getElemetById('message');
//var x=document.getElementById('words');
//should allow me to take onkeyup out of HTML??
//and use addEvent(message,'keyup',function(){cnt();},false);??
var y=w.value;
var r = 0;
a=y.replace(/\\s/g,' ');
a=a.split(' ');
for (z=0; z<a.length; z++) 
{
if (a[z].length > 0) 
{
r++;
}
}
//var x=document.getElementById('words'); could be here??
x.value=r;//Error:X=null?
checkmessage();// should be onchange addEvent(message,'change'??
}

It’s my big 50 today, so I’ll check it out but won’t post till latter. Thanks for you’re direction. 4 eyes are allways better than 2:eye:

7

ulricht609 Thanks for the responce. I’ll check it out. I tried to use addEvent on the keyup for words and message to take them out of the html and may have screwed up their syntax. Luckily I had it posted here, otherwise I would be spending another hour just to get the HTML onkeyup right.:injured:

8

<html>
<head>
<title>Untitled Page</title>
<script type=“text/javascript”>
//------------------------------#message--------------------------//

    function cnt(w,x){
        var y=w.value;
        var r = 0;
        a=y.replace(/\\s/g,' ');
        a=a.split(' ');
        for (z=0; z&lt;a.length; z++) 
        {
            if (a[z].length &gt; 0) 
            {
                r++;
            }
        }
        x.value=r;
        checkmessage();
    } 

    //var words=document.getElementById('words');
    //words.setAttribute('readonly','readonly');

    //var message=document.getElementById('message');
    /*addEvent(message,'mousedown',function(){message.value=' ';},false);*/
    // I blocked this to see if it was the problem, it's not.
    //message.addEventListener('focus',
    //    function(){
    //        var gloria=document.getElementById('gloria');
    //        gloria.innerHTML='This is a Requierd Field, you only have 50 words to enquire about us and our products.';
    //        }
    //        , false);

    //message.addEventListener('change',function(){checkmessage();},false);
    //message.addEventListener('blur',function(){checkmessage();},false);

    function checkmessage(){
        var message=document.getElementById('message');
        //alert(message.value); // all alerts fire regardless of case???
        
        var words=document.getElementById('words');
        var gloria=document.getElementById('gloria');
        gloria.innerHTML='Snra. Gloria Marks.';
        
        if(words.value&lt;8){
            //alert(message.value); // all alerts fire regardless of case???
            gloria.innerHTML='You have not expressed a valid enquiry. 8 word minimum.';
            return false;
        }
        if(words.value&gt;50){
            gloria.innerHTML='You have passed your enquiry limit of 50 words.';
            //alert(message.value); // all alerts fire regardless of case???
            return false;
        }

// if(message.value=‘’){
// gloria.innerHTML=‘This is a Requierd Field, you have 50 words to enquire about Mexicali Rose or www.boutiquewholesaleitems.com.’;
// //message.value=‘error’;
// return false;
// }
// else{
// //alert(message.value); // fires the value once then fires blank?? as the text vanishes??
// gloria.innerHTML=‘Thank you ‘+firstname.value+’. We will check your enquiry.’;
// return true;
// }//cnt(this,document.contact.words)
}
</script>
</head>
<body>
<form id=“form1”>
<div>
<input id=“firstname” size=“20” value=“name”/>
<label id=“message_lbl”>Message*</label>
<textarea id=“message” onkeyup=“cnt(document.getElementById(‘message’),document.getElementById(‘words’));” rows=“10” cols=“20”>Please Make any enquiries here…</textarea>
<br />
<br />
<br />
<br />
<label id=“words_lbl”>Words*</label>
<input id=“words” size=“5” value=“0”/ readonly=“readonly”>
<input id=“submit” name=“submit” class=“button” type=“submit” />
<div id=“gloria”>gloria* </div>
</div>
</form>
</body>
</html>

is this the functionality u were looking for