#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2000
    Location
    Norcross, GA
    Posts
    458
    Rep Power
    15

    Using javascript to write additional form elements based on user input


    Say I have a form that asks for a name and favorite color. There is a third elemet that asks for favorite food, but it is disabled (greyed out). Pretty basic html so far.

    Now, add to the form a checkbox beside the name field. If a user clicks this checkbox the greyed out element becomes active.

    Before the checkbox is selected the form looks like this:

    Code:
    <form action=test.cgi method=post>
    
    Name? <input type=text name=name> <input type=checkbox name=addelement value=yes> List your favorite food?
    
    Color? <input type=text name=color>
    
    Food? <input type=text name=food disabled>
    
    <input type=submit value=submit>
    
    </form>

    If the checkbox is selected the form looks like this:

    Code:
    <form action=test.cgi method=post>
    
    Name? <input type=text name=name> <input type=checkbox name=addelement value=yes> List your favorite food?
    
    Color? <input type=text name=color>
    
    Food? <input type=text name=food>
    
    <input type=submit value=submit>
    
    </form>

    The user can select and unselect the checkbox and the food input text box will select/deselect with each subsequent click.

    I've done something vaguely similar - but only to change a value in an existing textbox, not to change an option for a text box.

    Can this be done?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2000
    Location
    Norcross, GA
    Posts
    458
    Rep Power
    15
    This sort of works, but it rewrites the entire page...



    <form>
    Enter: <input type="text" value="hello" name=test>

    <SCRIPT LANGUAGE="JavaScript">
    <!--

    var count = 1;
    var text = "disabled";

    function changeit() {
    count = count +1;
    if (count%2 == 0) {
    var text = "disabled";
    document.write("<INPUT NAME='test' TYPE='text' SIZE='15' " + text + " value='test'>");
    } else {
    var text = "";
    document.write("<INPUT NAME='test' TYPE='text' SIZE='15' " + text + " value='test'>");
    }
    }

    //-->
    </script>

    <input type="checkbox" name=check value="yes" onclick="javascript: changeit();" >

    </form>
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    Christchurch, New Zealand
    Posts
    30
    Rep Power
    14
    Hey there

    You can toggle the disabled property of that Food text box depending on the clicked state of the checkbox like this:

    <script>
    function food(){
    if(document.formname.checkboxname.checked){
    document.formname.textboxname.disabled=false
    }
    else{
    document.formname.textboxname.disabled=true
    }
    }
    </script>

    Then, you can call the food() function onclick from the checkbox:

    <input type=checkbox name=addelement value=yes onclick="food()">

    Note that you'll need to give the form a name so that you can reference the textbox & checkbox.

  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2000
    Location
    Norcross, GA
    Posts
    458
    Rep Power
    15
    Thanks Mike, it works like a charm.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    Christchurch, New Zealand
    Posts
    30
    Rep Power
    14
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2000
    Location
    Norcross, GA
    Posts
    458
    Rep Power
    15
    Hmm....

    I thought of something else that I'd like to consider doing with this.

    Disabling the text box is not visably apparent to the average point & click user -- I'm thinking it would be a good idea to change the background color of the box to grey when the text boxes are deselected.

    Using... style="background:gray" ...would do the trick but again we have the problem of writing the info to the element on the fly. In my first try (above), using document.write wrote the modified form element in a new window.

    I wonder if there is another way to modify element properties on the fly, without reloading the entire page?
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    Christchurch, New Zealand
    Posts
    30
    Rep Power
    14
    Sure is

    You can change form element styles dynamically through javascript like this:

    e.g. 1

    document.formname.textname.style.backgroundColor="red"

    e.g. 2

    document.formname.textname.style.textDecoration="underline"


  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2000
    Location
    Norcross, GA
    Posts
    458
    Rep Power
    15
    Cool, I just was looking at the innerHTML tag. That seems to be a different way of doing the same thing - but your javascript example looks cleaner to me.

    Thanks again,
    - Mike

IMN logo majestic logo threadwatch logo seochat tools logo