www.webdeveloper.com
Results 1 to 6 of 6

Thread: Noob question most likely - dynamic form

  1. #1
    Join Date
    Dec 2008
    Posts
    3

    Noob question most likely - dynamic form

    Hey all, first post here wanted to get some input on a specific problem I've been running into. I've just started to get into javascript and it seems I've hit my first wall.

    Code:
    <html>
    <head>
    <title>Paper Stock Example</title>
    
    <!-- This script is for the stock area -->
    
    <script language="javascript">
    
    function Display(which) {
      ma=document.getElementById("Premium");
      em=document.getElementById("Regular");
      ph=document.getElementById("Economy");
      if (which=="Premium") ma.style.display="block";
        else ma.style.display="none";
      if (which=="Regular") em.style.display="block";
        else em.style.display="none";
      if (which=="Economy") ph.style.display="block";
        else ph.style.display="none";
    }
    
    <!-- This script is for the ink area -->
    
    function extraFields(which) {
      oneZeroColor = docment.getElementByID("oneZero");
      oneOneColor = docment.getElementByID("oneOne");
      twoZeroColor = docment.getElementByID("twoZero");
      twoOneColor = docment.getElementByID("twoOne");
      twoTwoColor = docment.getElementByID("twoTwo");
    if (which=="oneZero") oneZeroColor.style.display="block";
        else oneZeroColor.style.display="none";
    if (which=="oneOne") oneOneColor.style.display="block";
        else oneOneColor.style.display="none";
    if (which=="twoZero") twoZeroColor.style.display="block";
        else twoZeroColor.style.display="none";
    if (which=="twoOne") twoOneColor.style.display="block";
        else twoOneColor.style.display="none";
    if (which=="twoTwo") twoTwoColor.style.display="block";
        else twoTwoColor.style.display="none";
    }
    </script>
    </head>
    
    <body>
    <h1>Job Choices</h1>
    <p>The form below helps you to make the choices for your job.</p>
    <hr>
    <form name="form1">
    <div ID="Quantity">
    <p>1) What do you wish the Quantity of the job to be?</p>
    <input type="radio" name="type" value="100Q">100
    <br>
    <input type="radio" name="type" value="200Q">200
    <br>
    <input type="radio" name="type" value="500Q">500
    <br>
    <input type="radio" name="type" value="1000Q">1000
    <br>
    <input type="radio" name="type" value="2000Q">2000
    <br>
    <input type="radio" name="type" value="3000Q">3000
    <br>
    <input type="radio" name="type" value="5000Q">5000
    <br>
    </div>
    </form>
    <form name="form2">
    <p>2) What type of paper grade do you wish to choose from?</p>
    <input type="radio" name="type" value="Premium" checked
     onClick="Display('Premium');">
    
     Premium Stock
    <input type="radio" name="type" value="Regular"
     onClick="Display('Regular');">
     Regular Stock
    <input type="radio" name="type" value="Economy"
     onClick="Display('Economy');">
     Economy Stock
    <br>
    <br>
    <div ID="Premium" style="display:block;">
    <b>Premium Stock List</b>
    <br>
    <br>
    <select>
      <option value="Premium1">Premium Stock 1</option>
      <option value="Premium2">Premium Stock 2</option>
      <option value="Premium3">Premium Stock 3</option>
    </select>
    </div>
    
    <div ID="Regular" style="display:none">
    <b>Regular Stock List</b>
    <br>
    <br>
    <select>
      <option value="Regular1">Regular Stock 1</option>
      <option value="Regular2">Regular Stock 2</option>
      <option value="Regular3">Regular Stock 3</option>
    </select>
    </div>
    
    <div ID="Economy" style="display:none">
    <b>Economy Stock List</b>
    <br>
    <br>
    <select>
      <option value="Economy1">Economy Stock 1</option>
      <option value="Economy2">Economy Stock 2</option>
      <option value="Economy3">Economy Stock 3</option>
    </select>
    </div>
    </form>
    <form name="form3">
    <p>3) How many inks do you wish to use?</p>
    <b>Ink Amount</b>
    <br>
    <br>
    <select>
      <option value="oneZero" onChange="extraFields('oneZero');">1/0</option>
      <option value="oneOne" onChange="extraFields('oneOne');">1/1</option>
      <option value="twoZero" onChange="extraFields('twoZero');">2/0</option>
      <option value="twoOne" onChange="extraFields('twoOne');">2/1</option>
      <option value="twoTwo" onChange="extraFields('twoTwo');">2/2</option>
    </select>
    </div>
    
    <div ID="oneZero" style="display:none">
    <b><u>Front Color</b></u>
    1) <input type="text" name="firstColorFront" maxlength="30">
    </div>
    
    <div ID="oneOne" style="display:none">
    <b><u>Front Color</b></u>
    1) <input type="text" name="firstColorFront" maxlength="30">
    <b><u>Back Color</b></u>
    1) <input type="text" name="firstColorFront" maxlength="30">
    </div>
    
    <div ID="twoZero" style="display:none">
    <b><u>Front Colors</b></u>
    1) <input type="text" name="firstColorFront" maxlength="30">
    2) <input type="text" name="secondColorFront" maxlength="30">
    </div>
    
    <div ID="twoOne" style="display:none">
    <b><u>Front Colors</b></u>
    1) <input type="text" name="firstColorFront" maxlength="30">
    2) <input type="text" name="secondColorFront" maxlength="30">
    <b><u>Back Color</b></u>
    1) <input type="text" name="firstColorBack" maxlength="30">
    </div>
    
    <div ID="twoTwo" style="display:none">
    <b><u>Front Colors</b></u>
    1) <input type="text" name="firstColorFront" maxlength="30">
    2) <input type="text" name="secondColorFront" maxlength="30">
    <b><u>Back Colors</b></u>
    1) <input type="text" name="firstColorBack" maxlength="30">
    2) <input type="text" name="secondColorBack" maxlength="30">
    </div>
    </form>
    </body>
    </html>
    Everything works save for the ink section. What is suppose to happen is you select one of the options in the drop-down menu. Depending on what you pick, certain text boxes will show up to put in more information. I had thought I made it all work, but it seems I'm doing something wrong. My own opinion is its this line of code:

    Code:
    <option value="oneZero" onChange="extraFields('oneZero');">1/0</option>
    I'm not sure if that is the correct event handler to call. I wanted it so that when you selected an option in the dropdown menu it would then show up the proper number of text fields. So if you selected 1/1, it would produce two text fields. Any help would be much appreciated.

    My "paper grade" section works just fine, which is why this is so frustrating. They are basically the same concept, just done in different ways.

  2. #2
    Join Date
    Nov 2008
    Location
    Akron, OH
    Posts
    233
    First step:
    Code:
    function extraFields(which) {
      oneZeroColor = docment.getElementByID("oneZero");
      oneOneColor = docment.getElementByID("oneOne");
      twoZeroColor = docment.getElementByID("twoZero");
      twoOneColor = docment.getElementByID("twoOne");
      twoTwoColor = docment.getElementByID("twoTwo");
    document is misspelled.
    javawebdog
    Two things to remember:
    "The only place success comes before work is in the dictionary."
    "It's more than just a matter of survival. It's a matter of sympathy, compassion, passion and style."

  3. #3
    Join Date
    Dec 2008
    Posts
    3
    Quote Originally Posted by javawebdog View Post
    First step:
    Code:
    function extraFields(which) {
      oneZeroColor = docment.getElementByID("oneZero");
      oneOneColor = docment.getElementByID("oneOne");
      twoZeroColor = docment.getElementByID("twoZero");
      twoOneColor = docment.getElementByID("twoOne");
      twoTwoColor = docment.getElementByID("twoTwo");
    document is misspelled.

    HAHA BRILLIANT!

    See, I knew it was a noob question :P

    Edit: Fixed it, still not working.

  4. #4
    Join Date
    Nov 2008
    Location
    Akron, OH
    Posts
    233

    Next ...

    getElementByID should be getElementById
    (cannot cap the d)
    onChange events apply to the <select> block. Just going from on option to another option is not a change event to the option.
    change event to onClick.

    That worked for me.
    or
    Code:
    <select onchange="extraFields(this.options[this.options.selectedIndex].value)">
      <option value="oneZero">1/0</option>
      <option value="oneOne">1/1</option>
      <option value="twoZero">2/0</option>
      <option value="twoOne">2/1</option>
      <option value="twoTwo">2/2</option>
    </select>
    Last edited by javawebdog; 12-18-2008 at 10:22 AM.
    javawebdog
    Two things to remember:
    "The only place success comes before work is in the dictionary."
    "It's more than just a matter of survival. It's a matter of sympathy, compassion, passion and style."

  5. #5
    Join Date
    Dec 2008
    Posts
    3

    resolved

    Quote Originally Posted by javawebdog View Post
    getElementByID should be getElementById
    (cannot cap the d)
    onChange events apply to the <select> block. Just going from on option to another option is not a change event to the option.
    change event to onClick.

    That worked for me.
    or
    Code:
    <select onchange="extraFields(this.options[this.options.selectedIndex].value)">
      <option value="oneZero">1/0</option>
      <option value="oneOne">1/1</option>
      <option value="twoZero">2/0</option>
      <option value="twoOne">2/1</option>
      <option value="twoTwo">2/2</option>
    </select>
    It does work, thanks. In the end its all just small issues that I would not have mistaken if I had more experience. Thanks for the input!

  6. #6
    Join Date
    Nov 2008
    Location
    Akron, OH
    Posts
    233

    You're welcome ...

    ... and this is how you get experience. We learn from what doesn't work more than we learn from what does.
    javawebdog
    Two things to remember:
    "The only place success comes before work is in the dictionary."
    "It's more than just a matter of survival. It's a matter of sympathy, compassion, passion and style."

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles