Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    92
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Change a form based on previous input

    I was wondering if it's possible to make it so that once a user selects a certain option in a list, it makes the next input for that form change to either a textfield or a list without losing the values entered in the inputs above.

    I know PHP is a server-side script, does that make this not possible?

    Thanks.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    I know PHP is a server-side script, does that make this not possible?
    Huh? How does PHP enter into this?

    Please give a better description so we may help you bfinke.

  • #3
    New Coder
    Join Date
    May 2009
    Posts
    92
    Thanks
    2
    Thanked 0 Times in 0 Posts
    sorry, let me clarify. I didn't mean to include that note about PHP -I moved it from the php forum to this thread upon another's suggestion.

    I have a form:


    Your Name: TEXTFIELD
    Your Lunch: LIST(hamburger, hotdog)


    Now, I if the user selects 'hamburger', I want the following input to appear:


    Describe How You Like It Cooked: TEXTFIELD


    But, if the user selects 'hotdog', I want the following input to appear:


    What Condiment: LIST(Ketchup, Mustard)


    So basically I want to instantly create an input in a form based on a previous input's select WITHOUT losing the information entered in the previous inputs. In other words, keep the guys name and lunch selection but based on what he chooses as his lunch, change the third option to either a textfield or a list.

    Is this possible? I'm pretyy good with PHP but no nothing about AJAX and just a little about java.

    Hope that clarifies, thanks!

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    This is pretty rough but it might help.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>untitled</title>
    <style type="text/css">	
    #container {
    width: 360px;
    margin: 60px;
    text-align: right;
    background: #ffffff;
    border: 1px #000000 solid;
    }
    div.inpane, div.outpane {
    background: #e0e0e0;
    border: 1px #000000 dashed;
    padding: 12px;
    margin: 6px;
    font: normal 11px verdana;
    }
    div.inpane {
    position: relative;
    display: block;
    }
    div.outpane {
    position: relative;
    display: none;
    }
    select {
    width: 146px;
    }
    input.rad, input.box {
    position: relative;
    top: 3px;
    }
    </style>
    <script type="text/javascript">
    
    function Pane(control_id, pane_id, val)
    {
       this.div = document.getElementById(pane_id);
       this.control = document.getElementById(control_id);
       this.val = val;
       var obj = this;
       switch (this.control.type)
       {
          case 'select-one' :
          this.handler = function()
          {
             if (obj.control.value == obj.val)
             {
                obj.div.className = 'inpane';
                var ipts = obj.div.getElementsByTagName('input');
                for (var i = 0, done = false; i < ipts.length; i++)
                {
                   ipts[i].disabled = false;
                   if (!done && ipts[i].type.match('text'))
                   {
                      ipts[i].focus();
                      done = true;
                   }
                }
                var sels = obj.div.getElementsByTagName('select');
                for (i = 0; i < sels.length; i++)
                {
                   sels[i].disabled = false;
                }
             }
             else 
             {
                obj.div.className = 'outpane';
                var ipts = obj.div.getElementsByTagName('input');
                for (i = 0; i < ipts.length; i++)
                {
                   ipts[i].disabled = true;
                }
                var sels = obj.div.getElementsByTagName('select');
                for (i = 0; i < sels.length; i++)
                {
                   sels[i].disabled = true;
                }
             }
          }
          addListener(this.control, 'change', this.handler);
          break;
          case 'radio' :
          case 'checkbox' :
          this.handler = function()
          {
             if (obj.control.checked && obj.control.value == obj.val)
             {
                obj.div.className = 'inpane';
                var ipts = obj.div.getElementsByTagName('input');
                for (var i = 0; i < ipts.length; i++)
                {
                   ipts[i].disabled = false;
                }
                var sels = obj.div.getElementsByTagName('select');
                for (i = 0; i < sels.length; i++)
                {
                   sels[i].disabled = false;
                }
             }
             else 
             {
                obj.div.className = 'outpane';
                var ipts = obj.div.getElementsByTagName('input');
                for (i = 0; i < ipts.length; i++)
                {
                   ipts[i].disabled = true;
                }
                var sels = obj.div.getElementsByTagName('select');
                for (i = 0; i < sels.length; i++)
                {
                   sels[i].disabled = true;
                }
             }
          }
          var rad, r = 0;
          var grp = this.control.form.elements[this.control.name];
          while (rad = grp[r++])
          {
             addListener(rad, 'click', this.handler);
          }
       }
    }
    
    function addListener(obj, evt, handler)
    {
       if (obj.addEventListener)
       {
          obj.addEventListener(evt, handler, false);
       }
       else if (obj.attachEvent)
       {
          obj.attachEvent('on' + evt, handler);
       }
    }
    
    function init()
    {
       new Pane('lunch', 'cooked', 'hamburger');
       new Pane('lunch', 'condiment', 'hotdog');
       new Pane('whoa', 'size', 'whoa');
       new Pane('head', 'foo', 'head');
    }
    
    addListener(window, 'load', init);
    
    </script>
    </head>
    <body>
    <form id="food" action="">
    <div id="container">
    <div id="name" class="inpane">
    Your Name:&nbsp;<input type="text" name="name" size="20" />
    </div>
    <div class="inpane">
    Your lunch:&nbsp;
    <select id="lunch" name="lunch">
    <option value="">lunch</option>
    <option value=""></option>
    <option value="hamburger">Hamburger</option>
    <option value="hotdog">Hot Dog</option>
    </select>
    </div>
    <div id="cooked" class="outpane">
    Describe How You Like It Cooked:&nbsp;<input type="text" name="how_cooked" size="20" disabled="disabled" />
    </div>
    <div id="condiment" class="outpane">
    What condiment?&nbsp;
    <select name="condiment" disabled="disabled">
    <option value="">condiment</option>
    <option value=""></option>
    <option value="ketchup">Ketchup</option>
    <option value="mustard">Mustard</option>
    </select>
    </div>
    <div id="feet" class="inpane">
    My feet are 
    <input class="rad" name="feet" type="radio" value="big" />big 
    <input class="rad" name="feet" type="radio" value="realbig" />really big 
    <input class="rad" id="whoa" name="feet" type="radio" value="whoa" />whoa 
    </div>
    <div id="size" class="outpane">
    <select name="size" style="width:300px;" disabled="disabled">
    <option value="">like ... how big?</option>
    <option value=""></option>
    <option value="size_12">Size 12</option>
    <option value="size_16">Size 16</option>
    <option value="illegal">Fuggedaboutit.</option>
    </select>
    </div>
    <div id="cheese" class="inpane">
    My favorite cheeses is  
    <input class="box" name="cheese" type="checkbox" value="swiss" />Swiss 
    <input class="box" name="cheese" type="checkbox" value="mozzarella" />mozzarella 
    <input class="box" id="head" name="cheese" type="checkbox" value="head" />head
    </div>
    <div id="foo" class="outpane">
    <select name="taste" disabled="disabled">
    <option value="">Yech.</option>
    <option value=""></option>
    <option value="ugly">Ugly.</option>
    <option value="bad">Bad.</option>
    <option value="illegal">Fuggedaboutit.</option>
    </select>
    </div>
    <div id="cheese" class="inpane">
    <input type="submit" value="DONE" />
    </div>
    </div>
    </form>
    </body>
    </html>
    The constructor (Pane) takes three arguments: the id of the control element which toggles display, the id of the pane (div) which is in or out, and the value of the form control which causes the pane to display - or not. I'll probably add a few lines when I get the chance to disable the undisplayed form elements, as they really shouldn't be part of the submission.

    Event listeners (IE: attachers!) allow multiple assignments without overwriting.
    Last edited by adios; 05-08-2009 at 08:39 AM. Reason: mom made me


  •  

    Posting Permissions

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