SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Default value in textarea?

    Hi guys

    I am currently using the following script in my page.

    Code:
    <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...

    Code:
    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 UKK
    Last edited by Pullo; Feb 25, 2014 at 01:24. Reason: Added code tags

  2. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You need to save the text in the text area then add the new text to the saved string then write the new modified string to the text area again.

  3. #3
    SitePoint Enthusiast bronze trophy \\.\'s Avatar
    Join Date
    Oct 2013
    Location
    UK
    Posts
    72
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <textarea rows="10" id="area" name="textname" cols="54">XXXXX</textarea>
    should form part of the form and not be written in to the page, if you want to set a default text in the text area then set it in HTML if the text needs to remain static to start with, via JavaScript or written in using PHP if you need to have the texts changed.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,815
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    document.write is as dead as Netscape 4. All browsers more modern than that provide better ways to interact with the HTML that can run after the page finishes loading.

    Move the JavaScript to just before the </body> tag and hard code the content of the document.write where you want it to appear.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Guys

    I am now trying this:

    Code:
    <script type="text/javascript">
     <!--
     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>
     
     <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 additonal 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>
    
    <textarea rows="10" id="area" name="textname" cols="54">Some text here</textarea>
     
     <input type="submit">Submit
     </div>
     </form>
    However, it still does not work. As soon as I select a checkbox the "Some text here" text disappears.

    Any ideas?

    Best regards

    Rod from the UK
    Last edited by Pullo; Feb 25, 2014 at 01:23. Reason: Added code tags

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys

    I sussed it. I just needed to comment out the following line:

    //document.getElementById('area').value = '';

    Thanks for your help

    Best regards

    Rod from the UK

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys

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

    Any ideas?

    Best regards

    Rod from the UK

  8. #8
    SitePoint Enthusiast bronze trophy \\.\'s Avatar
    Join Date
    Oct 2013
    Location
    UK
    Posts
    72
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    What browser are you using to test it in?

    I have chrome, opera and firefox and it adds when ticked and removes the element when unticked.

    I don't use MSIE unless I have no option, so I didn't test in that browser.

  9. #9
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys

    I was able to add the default value 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>
    <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>
    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
    Last edited by Pullo; Feb 25, 2014 at 01:23. Reason: Added code tags

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,815
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Your code now defines code for the window.onload event twice and it doesn't need to have anything defined for that event.

    With JavaScript correctly placed at the bottom of the page almost all JavaScript can then run immediately.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  11. #11
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Stephen

    Thanks for your response

    Unfortunately, I'm no sure what you mean.

    Are you suggesting I revert to my original script? If so, how would I overcome my latest issue?

    Any help would be fully appreciated

    Best regards

    Rod from the UK

  12. #12
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rjoseph244510 View Post
    Thanks for your response. Unfortunately, I'm no sure what you mean.
    Your script has two onload handlers. The first is within the body tag.
    Code:
    onload="document.getElementById('area').value = tarea;"
    The second is in your javascript .
    Code:
    window.onload = function() { ......
    You need to combine the two so that they don't get in each other's way like this.
    Remove the handler from the body tag then rewrite the window.onload handler

    Code:
    window.onload = function() 
    	 {  var str = '';
    	    for (var i=0; i<qList.length; i++) 
    	      { str += '<input type="checkbox" onclick="updateArea(this)">'+qList[i]+'<br/>'; }
    	    document.getElementById('qlist').innerHTML = str;
    	    document.getElementById('area').value = tarea;
    	   }
    The quickest way to solve the manual entry of items into the text area is to make it readonly. This way nobody can enter anything and your script works as it is. You do this like this:
    Code:
    <textarea rows="10" id="area" name="textname" cols="54" readonly>Some default value</textarea>
    If you want manual entry, create another text box and ask them to put it in there. Then you can check if it is populated and add it to the list before submitting the form.

    I notice that when the form is submitted it sends carriage return and linefeed characters because you are using "\n" within your strings. You might want to consider whether you need to remove these before submitting the form.

  13. #13
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent - Thanks guys!

    Best regards

    Rod from the UK


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
  •