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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Displaying values from drop-down menus as text

    Hi,
    I'm trying to create a letter generator type script where the values chosen from a number of drop-down menus will be echoed as plain text (either in a pop-up window or even in a text area if that's not possible) with my own static text in between the values. So for example the echoed text might be "Dear (drop-down menu 1 option), blah blah blah (drop-down menu 2 option)" etc. I've been looking everywhere for a piece of code or a script that would allow me to do this, but nothing I've tried so far either works or does what I want it to. I would be so appreciative if somebody could help me get this working.

    Thanks in advance,
    Aly.

    PS: An example of the type of script I'm looking for can be seen here: http://www.aussiebloggers.com.au/blogpost.html

  • #2
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    yes you just need GetElementByID probably or maybe innerHTML

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
    function add_to(id)
    {
     var to=document.getElementById(id).value;
     var string= "Dear " + to + " rest of text";
     document.getElementById('formatted_text').value=string;
    }
    </script>
    </head>
    <body>
    <form name="myform" method="post" action="">
    <select name="to" id="to">
    <option value="Tim">Tim
    <option value="Ted">Ted
    </select><input type="button" value="add" onclick="add_to('to');"><p>
    <textarea name="formatted_text" id="formatted_text"><p>
    <input type="submit" value="submit">
    </textarea>
    </form>
    </body>
    </html>
    Something like that would work. Actually does work i tested it. You might however need string replace functions to do this for multiple select boxes. Let me know if you do?
    Last edited by timgolding; 04-04-2009 at 04:36 PM.
    You can not say you know how to do something, until you can teach it to someone else.

  • #3
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you so much for your help, that's exactly what I was looking for!

    However, I'm still having problems...when I copy and paste the exact code you gave me into a HTML document it works fine, but whenever I add more than one drop-down (and extra fragments to the var string), it stops working. Is there a way to make the text area display the values for more than one box, all as a paragraph or something? (such as Dear (drop-down 1), blah blah (drop-down 2), etc etc (drop-down 3)". I would also need the text area to show line/paragraph breaks. Is this possible? Thank you so much for your help already though!

    By the way, here is the code from my attempt at adding a second drop-down, if that helps:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
    function add_to(id)
    {
     var to=document.getElementById(id).value;
     var string= "Dear " + to + " I am writing to request " + request + " rest of text";
     document.getElementById('formatted_text').value=string;
    }
    </script>
    
    </head>
    <body>
    <form name="myform" method="post" action="">
    Dear 
    <select name="to" id="to">
    <option value="Professor">Professor
    <option value="Doctor">Doctor
    <option value="Dean of Studies">Dean of Studies
    <option value="Overworked postgrad tutor">Overworked postgrad tutor
    <option value="Lazy faculty secretary">Lazy faculty secretary
    <option value="Abby">Abby
    </select>, <p>
    
    I am writing to request
    <select name="to" id="request">
    <option value="an extension for my assignment">an extension for my assignment
    <option value="a deferred exam">a deferred exam
    <option value="an automatic high disinction">an automatic high distinction
    <option value="a letter of recommendation to McDonalds">a letter of recommendation to McDonalds
    <option value="a sexual favour">a sexual favour
    <option value="tickets to the upcoming Jonas Brothers concert">tickets to the upcoming Jonas Brothers concert
    </select>
    
    <input type="button" value="add" onclick="add_to('to');"> <p>
    <textarea name="formatted_text" id="formatted_text">
    </textarea>
    
    </form>
    </body>
    </html>

  • #4
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    a sexual favour
    lol.

    Well yes you can add other select boxes to your code. All you need to do is get the value of each of the select boxes within your script. Like so.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
    function add_to()
    {
     var to=document.getElementById('to').value;
     var request=document.getElementById('request').value;
     var string= "Dear " + to + " I am writing to request " + request + " rest of text";
     document.getElementById('formatted_text').value=string;
    }
    </script>
    
    </head>
    <body>
    <form name="myform" method="post" action="">
    Dear 
    <select name="to" id="to">
    <option value="Professor">Professor
    <option value="Doctor">Doctor
    <option value="Dean of Studies">Dean of Studies
    <option value="Overworked postgrad tutor">Overworked postgrad tutor
    <option value="Lazy faculty secretary">Lazy faculty secretary
    <option value="Abby">Abby
    </select>, <p>
    
    I am writing to request
    <select name="request" id="request">
    <option value="an extension for my assignment">an extension for my assignment
    <option value="a deferred exam">a deferred exam
    <option value="an automatic high disinction">an automatic high distinction
    <option value="a letter of recommendation to McDonalds">a letter of recommendation to McDonalds
    <option value="a sexual favour">a sexual favour
    <option value="tickets to the upcoming Jonas Brothers concert">tickets to the upcoming Jonas Brothers concert
    </select>
    
    <input type="button" value="add" onclick="add_to();"> <p>
    <textarea name="formatted_text" id="formatted_text">
    </textarea>
    
    </form>
    </body>
    </html>
    That will work. Your code was almost correct you forgot to set value of request in the javascript. Plus the call to the function was passing the id to it as an argument then using that as a reference for the ID. This was pointless (my mistake) since we are to have reference to more than one id per call to the function so i took the argument part out of the script. So then we can get the value of any select box with

    Code:
    var variable=document.getElementById('nameofthatid').value
    Just make sure your ids and names are unique. In your script you had name="to" on both select boxes. But the names of form elements should be unique.

    Just a quick question. What are you intending to do with the value of the textarea. Is that to be sent to another page for processing. Maybe to be emailed to you?
    Last edited by timgolding; 04-05-2009 at 12:14 AM.
    You can not say you know how to do something, until you can teach it to someone else.

  • #5
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    For line breaks use \n

    For tabs use \t

    So your code on line 11 might look like this:

    Code:
    var string= "Dear " + to + ",\n\tI am writing to request " + request + " rest of text";
    or maybe this:

    Code:
    var string= "Dear " + to + ",\n\nI am writing to request " + request + " rest of text";
    \n\n for paragrpah break. It's simply two line breaks
    You can not say you know how to do something, until you can teach it to someone else.

  • Users who have thanked timgolding for this post:

    alydescends (04-05-2009)

  • #6
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you so much for your help! It works exactly as I wanted it to now. You're a lifesaver!

    Oh, and it doesn't have to be e-mailed to me or anything...it's just a letter generator that people can copy and paste the outcome of if they want.

  • #7
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    Cool in that case you might want to make the textarea a bit larger. http://www.w3schools.com/TAGS/tag_textarea.asp
    You can not say you know how to do something, until you can teach it to someone else.

  • #8
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the tip, I've done that already. I think it's all sorted now...thanks again!

  • #9
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    ok cool have fun with your script
    You can not say you know how to do something, until you can teach it to someone else.


  •  

    Posting Permissions

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