SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    London, UK
    Posts
    475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamic form text results script

    Does anyone know if there is a script which can do the following?

    Contains 2 Drop down menus, depending on which items were picked from menu 1 and menu 2 - a text result would appear in a box next to the 2 drop down menus.

    Its important the drop down menus and text result are set in a table so that it can be moved around to anywhere on a webpage.

    I am certain i did see this script somewhere but now i would like to use it i can't find it anywhere.

    If anyone is willing to make the script for me then i could give them a banner ad on my website for a couple months in return?

    Can anyone help?
    Add your web design / hosting companies to my directory - Web Hosting Directory
    Want to join our panel of experts? - Hosting Forums ( top right of forums -expert drop down box for more info ).

  2. #2
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    Svj
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Like this?
    Code:
    <html>
      <head>
        <script language="javascript">
          function getOptions(frm)
          {
            for(i = 1; i <= 12; i++)
            {
              frm.sel1.options[frm.sel1.options.length] = new Option(i, i);
              frm.sel2.options[frm.sel2.options.length] = new Option(i, i);
            }
          }
          function updateResult(frm)
          {
            var x = frm.sel1.value;
            var y = frm.sel2.value;
            frm.txt1.value = x + ' * ' + y + ' = ' + x * y;
          }
        </script>
      </head>
      <body onLoad="getOptions(document.forms[0]);updateResult(document.forms[0])">
        <form id="frm1" name="frm1">
          <select id="sel1" name="sel1" onChange="updateResult(this.form)">
          </select>
          <select id="sel2" name="sel2" onChange="updateResult(this.form)">
          </select>
          <input type="text" id="txt1" name="txt1" />
        </form>
      </body>
    </html>
    I'm not sure what you mean with "drop down menus and text result are set in a table"
    Do you want to fill the drop down menus with options from a table (connect to db) or have the values in an array on the client?

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    London, UK
    Posts
    475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Well...

    Lets say for example there are two drop down menus.

    One is a product drop down menu ( lord of the rings book, batman dvd )
    The other is a description drop down menu ( price , description )
    Finally there is a box which would output the restult.

    So if someone choose batman dvd from the first menu and price from the second menu then in the output box there would be a message like - batman dvd £12 bla bla bla.

    Thats what i want. Then i can edit the code to add my products, ect.

    Forget about the table thing - i just did not want it dont in layers as this can make positioned it difficult.

    Can you do that kind of script?
    Add your web design / hosting companies to my directory - Web Hosting Directory
    Want to join our panel of experts? - Hosting Forums ( top right of forums -expert drop down box for more info ).

  4. #4
    SitePoint Evangelist compwizard's Avatar
    Join Date
    May 2002
    Location
    United States
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is a good tutorial that has exactly what you want:

    http://imaginethat.htmlplanet.com/select/dynselect.html

    Please feel free to contact me if you need any help with it though
    Compwizard
    "There are 10 kinds of people in this world -- those who know binary, and those who don't."

  5. #5
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    Svj
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm... like this?
    (I didn't misunderstand you, I just thought it would be better with one list for product type and one list for product and finally one box where _all_ the info for the selected product is shown )
    Code:
    <html>
      <head>
        <script language="javascript">
          function Product(type, name, price, descr)
          {
            this.type = type;
            this.name = name;
            this.price = price;
            this.descr = descr;
          }
    
          var ProductList = new Array();
          ProductList[0] = new Product('book', 'The Fellowship of the Ring', 39.95, 'This is a great book');
          ProductList[1] = new Product('book', 'The Two Towers', 39.95, 'This is a great book');
          ProductList[2] = new Product('book', 'The Return of the King', 39.95, 'This is a great book');
          ProductList[3] = new Product('dvd', 'The Fellowship of the Ring', 19.95, 'You need this DVD if you fell asleep at the theatre - like I did');
          ProductList[4] = new Product('dvd', 'The Two Towers', 19.95, 'Coming next year');
          ProductList[5] = new Product('dvd', 'The Return of the King', 19.95, 'You have to wait one more year for this one');
    
          function getTypes(frm)
          {
            frm.selType.options[frm.selType.options.length] = new Option('Books', 'book');
            frm.selType.options[frm.selType.options.length] = new Option('DVDs', 'dvd');
          }
    
          function getProducts(type)
          {
            for(i = frm.selProduct.length - 1; i >= 0; i--)
            {
              frm.selProduct.options[i] = null;
            }
            for(i = 0; i < ProductList.length; i++)
            {
              var prod = ProductList[i];
              if(prod.type == type)
              {
                frm.selProduct.options[frm.selProduct.options.length] = new Option(prod.name, i, i==0);
              }
            }
            showInfo(frm.selProduct.options[0].value);
          }
    
          function showInfo(index)
          {
            var prod = ProductList[index];
            div.innerHTML = '<h1>' + prod.name + '</h1>\n<p>$' + prod.price + '</p>\n<p>' + prod.descr + '</p>';
          }
    
          var frm = null;
          var div = null;
          function init()
          {
            frm = document.getElementById('frmInfo');
            div = document.getElementById('divInfo');
            getTypes(frm);
            getProducts(frm.selType.value);
          }
        </script>
      </head>
      <body onLoad="init();">
        <form id="frmInfo" name="frmInfo">
          Type:
          <select id="selType" name="selType" onChange="getProducts(this.value)">
          </select>
          Product:
          <select id="selProduct" name="selProduct" onChange="showInfo(this.value)">
          </select>
        </form>
        <div id="divInfo" name="divInfo">...</div>
      </body>
    </html>

  6. #6
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    Svj
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Modified function getProducts
    If the type of product is changed, and there is a product of the new type with the same name as the selected product of the previous type, this product is selected
    Code:
          function getProducts(type)
          {
            var current = (frm.selProduct.value) ? ProductList[frm.selProduct.value].name : '';
            for(i = frm.selProduct.length - 1; i >= 0; i--)
            {
              frm.selProduct.options[i] = null;
            }
            for(i = 0; i < ProductList.length; i++)
            {
              var prod = ProductList[i];
              if(prod.type == type)
              {
                frm.selProduct.options[frm.selProduct.options.length] = new Option(prod.name, i, (prod.name==current), (prod.name==current));
              }
            }
            showInfo(frm.selProduct.value);
          }

  7. #7
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    London, UK
    Posts
    475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Almost there...

    Thats almost what i want, i just need a few slight changes to be made. If you help me out i can give you that banner ad on my website.

    I need the first drop down box to display "Please Select" as a default.

    The second drop down box displays nothing until a selection has been made in the first drop down box. It will then display "Select an item"

    Nothing is displayed in the final output box ( the descript of the product ) until both drop down boxes have been selected.

    Sounds pretty simple so far...

    This is where it gets a little bit complicated,

    In the first drop down box i need a selection which when picked would not have any effect on the second drop down box.
    Instead it will send someone to a url of my choosing.

    Can the script be modyified to do this?
    Add your web design / hosting companies to my directory - Web Hosting Directory
    Want to join our panel of experts? - Hosting Forums ( top right of forums -expert drop down box for more info ).

  8. #8
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    Svj
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never ask if a thing can be done, ask how...

    Code:
    <html>
      <head>
        <script language="javascript">
          function Product(type, name, price, descr)
          {
            this.type = type;
            this.name = name;
            this.price = price;
            this.descr = descr;
          }
    
          var ProductList = new Array();
          ProductList[0] = new Product('book', 'The Fellowship of the Ring', 39.95, 'This is a great book');
          ProductList[1] = new Product('book', 'The Two Towers', 39.95, 'This is a great book');
          ProductList[2] = new Product('book', 'The Return of the King', 39.95, 'This is a great book');
          ProductList[3] = new Product('dvd', 'The Fellowship of the Ring', 19.95, 'You need this DVD if you fell asleep at the theatre - like I did');
          ProductList[4] = new Product('dvd', 'The Two Towers', 19.95, 'Coming next year');
          ProductList[5] = new Product('dvd', 'The Return of the King', 19.95, 'You have to wait one more year for this one');
    
          function getTypes(frm)
          {
            frm.selType.options[frm.selType.options.length] = new Option('Books', 'book');
            frm.selType.options[frm.selType.options.length] = new Option('DVDs', 'dvd');
            frm.selType.options[frm.selType.options.length] = new Option('I\\'m tired of books and DVDs', 'http://localhost');
          }
    
          function getProducts(type)
          {
            if(type.substring(0, 5) == 'http:')
            {
              location.href = type;
            }
            //var current = (frm.selProduct.value) ? ProductList[frm.selProduct.value].name : '';
            for(i = frm.selProduct.length - 1; i > 0; i--)
            {
              frm.selProduct.options[i] = null;
            }
            for(i = 0; i < ProductList.length; i++)
            {
              var prod = ProductList[i];
              if(prod.type == type)
              {
                //frm.selProduct.options[frm.selProduct.options.length] = new Option(prod.name, i, (prod.name==current), (prod.name==current));
                frm.selProduct.options[frm.selProduct.options.length] = new Option(prod.name, i);
              }
            }
            //showInfo(frm.selProduct.value);
          }
    
          function showInfo(index)
          {
            var prod = ProductList[index];
            div.innerHTML = '<h1>' + prod.name + '</h1>\n<p>$' + prod.price + '</p>\n<p>' + prod.descr + '</p>';
          }
    
          var frm = null;
          var div = null;
          function init()
          {
            frm = document.getElementById('frmInfo');
            div = document.getElementById('divInfo');
            getTypes(frm);
            getProducts(frm.selType.value);
          }
        </script>
      </head>
      <body onLoad="init();">
        <form id="frmInfo" name="frmInfo">
          Type:
          <select id="selType" name="selType" onChange="if(this.selectedIndex != 0){getProducts(this.value)}">
            <option>Please select</option>
          </select>
          Product:
          <select id="selProduct" name="selProduct" onChange="if(this.selectedIndex != 0){showInfo(this.value)}">
            <option>Select an item</option>
          </select>
        </form>
        <div id="divInfo" name="divInfo">...</div>
      </body>
    </html>
    Last edited by jofa; Oct 10, 2002 at 18:28.

  9. #9
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    Svj
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or maybe this is more like what you want?
    Code:
    <html>
      <head>
        <script language="javascript">
          function Product(type, name, price, descr)
          {
            this.type = type;
            this.name = name;
            this.price = price;
            this.descr = descr;
          }
    
          var ProductList = new Array();
          ProductList[0] = new Product('book', 'The Fellowship of the Ring', 39.95, 'This is a great book');
          ProductList[1] = new Product('book', 'The Two Towers', 39.95, 'This is a great book');
          ProductList[2] = new Product('book', 'The Return of the King', 39.95, 'This is a great book');
          ProductList[3] = new Product('dvd', 'The Fellowship of the Ring', 19.95, 'You need this DVD if you fell asleep at the theatre - like I did');
          ProductList[4] = new Product('dvd', 'The Two Towers', 19.95, 'Coming next year');
          ProductList[5] = new Product('dvd', 'The Return of the King', 19.95, 'You have to wait one more year for this one');
    
          function getTypes(frm)
          {
            frm.selType.options[frm.selType.options.length] = new Option('Books', 'book');
            frm.selType.options[frm.selType.options.length] = new Option('DVDs', 'dvd');
            frm.selType.options[frm.selType.options.length] = new Option('I\\'m tired of books and DVDs', 'http://localhost');
          }
    
          function getProducts(type)
          {
            if(type.substring(0, 5) == 'http:')
            {
              location.href = type;
            }
            for(i = frm.selProduct.length - 1; i >= 0; i--)
            {
              frm.selProduct.options[i] = null;
            }
            div.innerHTML = '';
            if(type == 'none') return;
            frm.selProduct.options[frm.selProduct.options.length] = new Option('Select an item', -1);
            for(i = 0; i < ProductList.length; i++)
            {
              var prod = ProductList[i];
              if(prod.type == type)
              {
                frm.selProduct.options[frm.selProduct.options.length] = new Option(prod.name, i);
              }
            }
          }
    
          function showInfo(index)
          {
            if(index == -1)
            {
              div.innerHTML = '';
            }
            else
            {
              var prod = ProductList[index];
              div.innerHTML = '<h1>' + prod.name + '</h1>\n<p>$' + prod.price + '</p>\n<p>' + prod.descr + '</p>';
            }
          }
    
          var frm = null;
          var div = null;
          function init()
          {
            frm = document.getElementById('frmInfo');
            div = document.getElementById('divInfo');
            getTypes(frm);
            getProducts(frm.selType.value);
          }
        </script>
      </head>
      <body onLoad="init();">
        <form id="frmInfo" name="frmInfo">
          Type:
          <select id="selType" name="selType" onChange="getProducts(this.value)">
            <option value="none">Please select</option>
          </select>
          Product:
          <select id="selProduct" name="selProduct" onChange="showInfo(this.value)">
          </select>
        </form>
        <div id="divInfo" name="divInfo"></div>
      </body>
    </html>

  10. #10
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    London, UK
    Posts
    475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Your a superstar!

    Thank you so much !

    Do you have a website? Do you want a banner ad on my site for a couple of months?

    One Last thing... How do i set it up so that changing the options in the second menu - will not make that menu setting appear in the Output box.

    I want to be able to edit the output box seperately, so i dont want the options in menu 2 to be automatically displayed as headings in the output box.

    Then the script will be perfect for me.
    Last edited by TimNiceButDim; Oct 11, 2002 at 11:17.
    Add your web design / hosting companies to my directory - Web Hosting Directory
    Want to join our panel of experts? - Hosting Forums ( top right of forums -expert drop down box for more info ).

  11. #11
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    Svj
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Your a superstar!

    Originally posted by TimNiceButDim
    I want to be able to edit the output box seperately, so i dont want the options in menu 2 to be automatically displayed as headings in the output box.
    Just change these lines...
    var prod = ProductList[index];
    div.innerHTML = '<h1>' + prod.name + '</h1>\n<p>$' + prod.price + '</p>\n<p>' + prod.descr + '</p>';
    ...to whatever you want to happen / be displayed

  12. #12
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    London, UK
    Posts
    475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks

    Thanks Jofa,

    I just sent you another private message!

    Thanks once again
    Add your web design / hosting companies to my directory - Web Hosting Directory
    Want to join our panel of experts? - Hosting Forums ( top right of forums -expert drop down box for more info ).


Bookmarks

Posting Permissions

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