www.webdeveloper.com
Results 1 to 14 of 14

Thread: Default value n textarea?

  1. #1
    Join Date
    Sep 2007
    Posts
    60

    Default value n textarea?

    Hi guys

    I am currently using the following script in my page.

    -----------------------------------------------
    <form action="" method="get">

    <div>
    <label><input type="checkbox" onclick="updateArea(this)">How many previous owners has this car had? </label>
    <label><input type="checkbox" onclick="updateArea(this)">When is the next service and MOT due? </label>
    <label><input type="checkbox" onclick="updateArea(this)">Is the car still for sale? </label>
    <label><input type="checkbox" onclick="updateArea(this)">Can I arrange a viewing or test drive? </label>
    <label><input type="checkbox" onclick="updateArea(this)">Do you do part exchange? </label>
    <label><input type="checkbox" onclick="updateArea(this)">Do you have any additional pictures? </label>
    <label><input type="checkbox" onclick="updateArea(this)">Has this car got a full service history? </label>
    <label><input type="checkbox" onclick="updateArea(this)">Do you offer finance? </label>
    <label><input type="checkbox" onclick="updateArea(this)">Do you offer warranty? </label>
    <label><input type="checkbox" onclick="updateArea(this)">What's the lowest cash price you'd offer? </label>
    <script type="text/javascript">
    <!--
    document.write('<textarea rows="10" id="area" name="textname" cols="54"></textarea>')

    function updateArea (e) {
    document.getElementById('area').value = '';
    for (var i=0; i<e.form.elements.length; i++){if (e.form.elements[i].type == 'checkbox' && e.form.elements[i].checked) {document.getElementById('area').value += e.form.elements[i].nextSibling.data; document.getElementById('area').value += '';}};
    }
    // -->
    </script>

    <input type="submit">Submit</button>
    </div>
    </form>

    -----------------------------------------------

    It basically allows the user to select a checkbox which then passes the values of the checkbox into a text box.

    The script works just fine but I need there to be a default value in the textarea and then if the user selects a checkbox then the values are added after. I have tried this...

    ---------------------------
    document.write('<textarea rows="10" id="area" name="textname" cols="54">Some text here</textarea>')
    ---------------------------

    and although "Some text here" does initially appear, it disappears when a checkbox is selected. Ideally, it would not disappear.

    Is this possible? If so, how would I achieve this? Any help would be fully appreciated

    Best regards

    Rod from the UK

  2. #2
    Join Date
    Dec 2002
    Location
    Calgary, Canada
    Posts
    6,119
    I think if all you want is to retain the existing value (Some text here) in the text area, then just comment out the following line in your javascript
    document.getElementById('area').value = '';
    Change the above line to
    //document.getElementById('area').value = '';
    Save your document and run it again...you need to explain your question with more detail as what exactly is the ultimate goal that you want to achieve.
    There are potentially many ways to do things but essentially, you will need to explain in detail.
    HTH
    Cheers

    Khalid

    Message Posting Guidelines In These Forums, Please read these before posting any question.
    Web site: webapplikations.com
    Web Resources Page:Web Resources

  3. #3
    Join Date
    Sep 2007
    Posts
    60
    Excellent - thanks for all your help Khalid!

    Best regards

    Rod from the UK

  4. #4
    Join Date
    Sep 2007
    Posts
    60
    Hi Khalid

    I take it back, that didn't work, it just continually adds the value each time you tick, untick and the tick the checkbox.

    Any ideas?

    Best regards

    Rod from the UK

  5. #5
    Join Date
    Dec 2002
    Location
    Calgary, Canada
    Posts
    6,119
    As I said ur question needed more elaboration...I guess(pls confirm) what you want is:
    1. Regardless of user click on any check box, default value in text area will always remain in it.
    2. When user clicks on any check box, it's text value should appear in the text area.
    3. You do not want to duplicate any data
    If that's the case then the code you are using is had a tiny issue, Let me help you with that.
    First and foremost You should not use document.write, instead, use documents id and change its value and move the code to in the head section of the page unless if there is a specific reason for you to have javascript code in body

    If you look at the code you will see whenever function updateArea is called, it clears the content of the textarea by using this code
    document.getElementById('area').value = '';
    And then the loop runs through all checkboxes and adds there values to text area, for those which checked.
    But this always removes the default value as well. So what you really want is at every iteration(when updateArea is called, you want to make sure before the checkboxes are looped through, default value is set in the text area. For this purpose, I declared a global variable tarea and set default value to it(this is where u can change whatever default value you want). Secondly I added a line in the body tags onload event so that when page is loaded first time you will see the default value in text area
    Then in the updateArea I set this variables value to text area as its preliminary value before it goes and loops through the check boxes.
    As I said earlier this is again on my understand that that's what you are trying to do..

    Code:
    <head>
        <title>Your Web Page Title</title>
        <script type="text/javascript">
            <!--
            //set default value of the text area at page load
            var tarea = "Some default value\n";
    
            function updateArea (e) {
                document.getElementById('area').value = tarea;
                for (var i=0; i<e.form.elements.length; i++){
                    if (e.form.elements[i].type == 'checkbox' && e.form.elements[i].checked) {
                        document.getElementById('area').value += e.form.elements[i].nextSibling.data+"\n";
                        document.getElementById('area').value += '';
                    }
                }
            }
            // -->
        </script>
    </head>
    <body onload="document.getElementById('area').value = tarea;">
        <form action="" method="get">
    
            <div>
                <label><input type="checkbox" onclick="updateArea(this)">How many previous owners has this car had? </label><br/>
                <label><input type="checkbox" onclick="updateArea(this)">When is the next service and MOT due? </label>     <br/>
                <label><input type="checkbox" onclick="updateArea(this)">Is the car still for sale? </label>                <br/>
                <label><input type="checkbox" onclick="updateArea(this)">Can I arrange a viewing or test drive? </label>    <br/>
                <label><input type="checkbox" onclick="updateArea(this)">Do you do part exchange? </label>                  <br/>
                <label><input type="checkbox" onclick="updateArea(this)">Do you have any additional pictures? </label>      <br/>
                <label><input type="checkbox" onclick="updateArea(this)">Has this car got a full service history? </label>  <br/>
                <label><input type="checkbox" onclick="updateArea(this)">Do you offer finance? </label>                     <br/>
                <label><input type="checkbox" onclick="updateArea(this)">Do you offer warranty? </label>                    <br/>
                <label><input type="checkbox" onclick="updateArea(this)">What's the lowest cash price you'd offer? </label> <br/>
    
                <textarea rows="10" id="area" name="textname" cols="54"></textarea>
    
                <input type="submit">Submit</button>
            </div>
        </form>
    </body>
    There are usually multiple ways of doing things, so always clearly detail the requirements, that will make your job way easier to write code and get the task completed.
    HTH
    Cheers

    Khalid

    Message Posting Guidelines In These Forums, Please read these before posting any question.
    Web site: webapplikations.com
    Web Resources Page:Web Resources

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356
    Good solution "Khalid Ali".
    Alternative version here allows easier addition of questions without modifying HTML.
    In this version, the script goes before the last </body> tag, not in the <head> section.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <meta charset="UTF-8" />
    <head>
    <title>Your Web Page Title</title>
    </head>
    <body onload="document.getElementById('area').value = tarea;">
    <form action="" method="get" onsubmit="return false">  <!-- change onsubmit= if form goes to server -->
    <div id="qlist"></div><p>
    <textarea rows="10" id="area" name="textname" cols="54">
    Some default value
    </textarea>
    
    <input type="submit" value="Submit">
    </form>
    <script type="text/javascript">
    //set default value of the text area at page load
    var tarea = "Some default value\n";
    var qList = [
       "How many previous owners has this car had?",
       "When is the next service and MOT due?",
       "Is the car still for sale?",
       "Can I arrange a viewing or test drive?",
       "Do you do part exchange?",
       "Do you have any additional pictures?",
       "Has this car got a full service history?",
       "Do you offer finance?",
       "Do you offer warranty?",
       "What's the lowest cash price you'd offer?",
    ];
    
    function updateArea (e) {
      var str = tarea;
      var sel = document.getElementById('qlist').getElementsByTagName('input');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked) { str += qList[i]+'\n'; }
      } document.getElementById('area').value = str;
    }
    
    window.onload = function() {
      var str = '';
      for (var i=0; i<qList.length; i++) {
        str += '<label><input type="checkbox" onclick="updateArea(this)">'+qList[i]+'</label><br/>';
      } document.getElementById('qlist').innerHTML = str;
    }
    </script>
    </body>
    </html>

  7. #7
    Join Date
    Sep 2007
    Posts
    60
    Hi guys

    Thank you so much for your help.

    Both approaches works excellently for what I need!

    However, I do have one other issue that I didn't see coming.

    At the moment if the user selects a checkbox the value of that checkbox is added to the textarea, which is fine. However, if the user then manually ads a sentence to the text area and then goes on to check another checkbox then the sentence they manually added disappears.

    Basically, I need the user to be able to add their own free text to the textarea without it disappearing if a checkbox is selected. The value of the checkbox should simply be added after.

    is this possible?

    Again, any help would be fully appreciated

    Best regards

    Rod from the UK

  8. #8
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,213
    I would suggest that you use a regexp to replace the check box text in the textarea, that way any input by the user should remain untouched.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  9. #9
    Join Date
    Sep 2007
    Posts
    60
    Hi 127.0.0.1

    Unfortunately, I have no idea how to do that. Any help would be fully appreciated

    Best regards

    Rod from the UK

  10. #10
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,213
    Your text you want to replace, like that which is added or removed from the text area, instead of rewriting the content again and again, you replace the rewrite event with a replace() method, if you google that replace() you will find examples of how it works.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  11. #11
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356
    Why not create a second textarea for user input only that would be added to the end (or start)
    of the checkbox created textarea section?

  12. #12
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    Quote Originally Posted by rjoseph View Post
    At the moment if the user selects a checkbox the value of that checkbox is added to the textarea, which is fine. However, if the user then manually ads a sentence to the text area and then goes on to check another checkbox then the sentence they manually added disappears.

    Basically, I need the user to be able to add their own free text to the textarea without it disappearing if a checkbox is selected. The value of the checkbox should simply be added after.
    The easiest way (i.e. least amount of JS) would be to create 2 textarea boxes. The first displays the value of the selected checkboxes and would not allow for user input. The second would allow for user input, such as by using the textarea attribute readonly or disabled (NOTE: not sure how compatible this is with IE 9 and under).

    An alternate approach would be to allow for just 1 textarea. After each checkbox is clicked, it appears in the textarea on a new line each time (also helps with readability). You can read the textarea value line by line, compare whether it matches with the checkbox values and if not, store it in a variable. Since it is now easily accessible, you can easily manipulate it.

  13. #13
    Join Date
    Sep 2007
    Posts
    60
    Excellent - thanks guys

    Best regards

    Rod from the UK

  14. #14
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356

    Question

    Quote Originally Posted by rjoseph View Post
    Excellent - thanks guys

    Best regards

    Rod from the UK
    What did your final solution look like?
    Something like this?

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <meta charset="UTF-8" />
    <head>
    <title>Your Web Page Title</title>
    </head>
    <body onload="document.getElementById('area').value = tarea;">
    <form action="" method="get" onsubmit="return false">  <!-- change onsubmit= if form goes to server -->
    <div id="qlist"></div><p>
    <p>Additional comments<br>
    <textarea rows="5" id="addedarea" name="textname" cols="54"></textarea>
    <br><textarea rows="10" id="area" name="textname" cols="54">Some default value</textarea>
    
    <input type="submit" value="Submit">
    </form>
    <script type="text/javascript">
    //set default value of the text area at page load
    var tarea = "Some default value\n";
    var qList = [
       "How many previous owners has this car had?",
       "When is the next service and MOT due?",
       "Is the car still for sale?",
       "Can I arrange a viewing or test drive?",
       "Do you do part exchange?",
       "Do you have any additional pictures?",
       "Has this car got a full service history?",
       "Do you offer finance?",
       "Do you offer warranty?",
       "What's the lowest cash price you'd offer?",
    ];
    
    function updateArea (e) {
      var str = tarea;
      var sel = document.getElementById('qlist').getElementsByTagName('input');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked) { str += qList[i]+'\n'; }
      }
      str += '\n'+document.getElementById('addedarea').value;
      document.getElementById('area').value = str;
    }
    
    window.onload = function() {
      var str = '';
      for (var i=0; i<qList.length; i++) {
        str += '<label><input type="checkbox" onclick="updateArea(this)">'+qList[i]+'</label><br/>';
      } document.getElementById('qlist').innerHTML = str;
    }
    </script>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles