Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Textarea create new fields AND auto resize fields problem

    Hello, I have a problem I hope someone can help with ... I need a form where a user can enter data into a textarea and then click a button to create a new textarea beneath that if they have more subjects to enter. For neatness sake and numerous other reasons, I dont want scrollbars in the textareas - I want the textarea to be just 1 row tall but automatically resize to fit the text entered. Now I have found code to create the new fields and that works fine. I also have found code to do the resize and that works fine also. But I am trying to put them together and I can't get it to work. I am trying to create the textarea and call the resize function using the OnFocus and OnBlur methods. These work fine if coded direct into a textarea tag but I cannot get them working the way I need at all. I have been trying tons of stuff over the past few days and looking at tons of webpages but no luck so I thought I would see if anyone here could help. I am using IE6 and this only needs to work on IE as it is for internal use so support for netscape and all other browsers isnt needed.

    Below code is what Ive stripped out - The bare bones to try and do what I need ... Hope someone can help with this as I hardly have any hair left ... Many Thanks ...

    Code:
    <HTML><HEAD> 
    <SCRIPT TYPE="text/javascript" LANGUAGE="javascript">
    var MIN_ROWS = 1 ;
    var MAX_ROWS = 999 ;
    var MIN_COLS = 80 ;
    var MAX_COLS = 80 ;
    
    function changeTextAreaLength ( e ) {
    
        var txtLength = e.value.length;
        alert(txtLength);
        var numRows = 0 ;
        var arrNewLines = e.value.split("\n");
    
        for(var i=0; i<=arrNewLines.length-1; i++){
            numRows++;
            if(arrNewLines[i].length > MAX_COLS-5) {
                numRows += Math.floor(arrNewLines[i].length/MAX_COLS)
            }
        }
        if(txtLength == 0){
    	    e.cols = MIN_COLS ;
    	    e.rows = MIN_ROWS ;
    	} else {
    
    	    if(numRows <= 1) {
    	        e.cols = (txtLength % MAX_COLS) + 1 >= MIN_COLS ? ((txtLength % MAX_COLS) + 1) : MIN_COLS ;
    	    }else{
    	        e.cols = MAX_COLS ;    
    	        e.rows = numRows > MAX_ROWS ? MAX_ROWS : numRows ;
    	    }
    	}
    }
    </SCRIPT>   
    <sCRIPT TYPE="text/javascript" LANGUAGE="javascript">
    
    function addField (form, fieldName, fieldValue) {
     
       var txt1 = document.createElement("textarea");
           txt1.setAttribute("name",fieldName);                     
           txt1.setAttribute("value",fieldValue);
    	   txt1.setAttribute("cols","80");
           txt1.setAttribute("rows","1");
           txt1.setAttribute(onFocus,"myInterval = window.setInterval('changeTextAreaLength(document.CreateTurnover."+fieldName+")', 1) ;");
    	   txt1.setAttribute(onBlur,"window.clearInterval(myInterval) ;");
           document.getElementById('formName').appendChild(txt1);    
    // txt1.onFocus = function (){"myInterval = window.setInterval('changeTextAreaLength(document.formName.field1)', 1) ;"}
    // txt1.onBlur = function (){"window.clearInterval(myInterval) ;" }
    } 
    </SCRIPT>
    <SCRIPT>
    var i = 0;
    </SCRIPT>
    </HEAD>
    <BODY><FORM NAME="formName">
    <input type="hidden" name="fieldType" value="textarea">
    
    FieldName = <INPUT TYPE="text" NAME="fieldName" VALUE="field0" SIZE="10">
    
    <INPUT TYPE="button" VALUE="add field"
           ONCLICK="this.form.fieldName.value = 'field' + ++i; 
                    addField(this.form, this.form.fieldName.value,i);" ><br>
    </FORM>
    </BODY>
    </HTML>

  • #2
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi all, I have done more searching and trying things out and have found a bit of a different resize script that does the job nicely so my forms textareas resize and I can click a button to create new ones that also resize nicely. So, don't worry about the below request as I'm good now ... When I have the code tidied up and sorted out, I'll post it here for anyone else who would like to see it. (NB: If anyone does manage to work the above out anyway, it would be interesting to see the answer as I am trying to learn Javascript so all the info I can get would be good)

    Thanks.


  •  

    Posting Permissions

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