asked on 10/25/2007

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

Last Comment

bdichiara

10/26/2007

gops1

10/25/2007

Check this out

<html>
      <head>
            <title>Script Demo Gops®</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

10/25/2007

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

rayne101

10/26/2007

ASKER

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

10/26/2007

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.

rayne101

10/26/2007

ASKER

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

10/26/2007

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;
}

rayne101

10/26/2007

ASKER

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

bdichiara

10/26/2007

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.";
}