Web Analytics Made Easy - StatCounter Displaying values from drop-down menus as text - CodingForum

Announcement

Collapse
No announcement yet.

Displaying values from drop-down menus as text

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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
    Tags: None
  • #2
    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; Apr 4, 2009, 11:36 AM.
    You can not say you know how to do something, until you can teach it to someone else.

    Comment

    • #3
      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>

      Comment

      • #4
        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; Apr 4, 2009, 07:14 PM.
        You can not say you know how to do something, until you can teach it to someone else.

        Comment

        • #5
          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.

          Comment

          • #6
            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.

            Comment

            • #7
              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.

              Comment

              • #8
                Thanks for the tip, I've done that already. I think it's all sorted now...thanks again!

                Comment

                • #9
                  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.

                  Comment

                  Previous template Next
                  Working...
                  X