Avatar of rayne101
rayne101 asked on

Populating textarea from checkbox and dropdown response

I have a form with multiple checkboxes and dropdowns that I would like to populate in a textarea field.  Here is an example:

Name (text field)
1.  Ethnicity (dropdown list)
2.  Need Assistance (checkbox)

Textarea would populate with the following:
Name(text field)  is an Ethnicity(dropdown) who needs assistance(checkbox).

Thanks
JavaScript

Avatar of undefined
Last Comment
bdichiara

8/22/2022 - Mon
gops1

Check this out

<html>
      <head>
            <title>Script Demo Gops&reg;</title>
            <style>body, table,input, select,span{font-family:verdana;font-size:xx-small;}</style>
            <script language="javascript">
                  function populate(f){
                        var txt="";
                        txt+=f.nm.value+" is an Ethnicity ";
                        txt+=f.race.selectedIndex>0?f[f.race.selectedIndex].value +" ":" Not Selected ";
                        txt+=f.assist.checked?" who needs assistance":" who does not need any assistance";
                        f.summry.value=txt;

                  }
            </script>
      </head>
      <body>
            <form name="txt">
                  <input type="text" value="" name="nm"><br>
                  <select id="selObj" name="race">
                        <option value="">--Choose Race--</option>
                        <option value="Race1">Race 1</option>
                        <option value="Race2">Race 2</option>
                        <option value="Race3">Race 3</option>
                  </select><br>
                  <input type="checkbox" value="yes" name="assist"><br>
                  <textarea name="summry" rows="10" cols="60"></textarea><br>
                  <input type="button" value="Populate" onClick="populate(this.form)">
            </form>
      </body>
</html>
ASKER CERTIFIED SOLUTION
bdichiara

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
rayne101

bdichiara
What would the code look like if  the checkbox is not selected and nothing should be populated to the textarea?  Also, I have at least four addition dropdown menus do I place those in the first if statement and keep nesting or can I create a new if statement?

Thanks
bdichiara

The way I did it was nest them all based on the Name field. If they haven't entered their name yet, then the text doesn't even make sense, so if you wanted to add more below the if statment - if(nameField.value != ""){ then it will only work if they have entered their name.

As for your other question, I'm quite confused:
"What would the code look like if  the checkbox is not selected and nothing should be populated to the textarea?"

Based on this line:
string += (assistField.checked == true) ? " needs assistance" : " does not need any assistance";
IF the checkbox is checked, add " needs assistance" otherwise, add " does not need any assistance". If you want another option there, i suggest radio buttons (Yes, No, N/A) or something like that.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
ASKER
rayne101

string += (assistField.checked == true) ? " needs assistance" : " does not need any assistance";
IF the checkbox is checked, add " needs assistance" otherwise, add " does not need any assistance".

If it isn't checked than nothing appears.  I don't want the " does not need any assistance" to show. I tried to eliminate the : " does not need any assistance"; from the code but I receive an error.
bdichiara

oh! Let me just modify it for you so it will make sense. try this:

function updateTA(){
      var textArea = document.getElementById("content");
      var nameField = document.getElementById("the_name");
      var ethnicField = document.getElementById("ethnicity");
      var assistField = document.getElementById("assist");
      var string = "";
      if(nameField.value != ""){
            string += nameField.value;
            if(ethnicField.value != ""){
                  string += " is a(n) " + ethnicField.value;
                  // or use
                  //string += " is a(n) " + ethnicField[ethnicField.selectedIndex].innerHTML;
            }
            if(assistField.checked == true){
                  string += (ethnicField.value != "") ? " who needs assistance." : " needs assistance.";
            }
      }
     
      textArea.value = string;
}
ASKER
rayne101

Can you please explain these lines of code and what it means.  What does the ? and : do?

            if(assistField.checked == true){
                  string += (ethnicField.value != "") ? " who needs assistance." : " needs assistance.";
            }

Thanks
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
bdichiara

That is just shorthand for an if statement
This line:
string += (ethnicField.value != "") ? " who needs assistance." : " needs assistance.";

is the same as:
if(ethnicField.value != ""){
   string += " who needs assistance.";
} else {
   string += " needs assistance.";
}