SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Textarea value vanishes!

    Ok. I overdosed on the javascript for this Contact Us form but it's really buging me that I can't see the problem.
    Please lend a hand. Any help greatly appreciated.
    The HTML
    HTML Code:
    <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!
    Code:
    //------------------------------#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

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    South Africa
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <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<a.length; z++)
    {
    if (a[z].length > 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<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;
    // }//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

  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    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.

  4. #4
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    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
    Last edited by Heinz Stapff; Sep 6, 2011 at 07:48. Reason: checkmessage();// should be onchange addEvent(message,'change'??

  5. #5
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    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?

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    South Africa
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @ 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 :P

    glad i could help some

  7. #7
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,805
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Heinz Stapff View Post
    How do you mark this post resolved?
    You dont

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


    Spike
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  8. #8
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    ulricht609 Thanks, I still act like 16 and wish I was 21.
    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
    HTML Code:
    <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
    Code:
    //------------------------------#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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •