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 12 of 12
  1. #1
    New Coder
    Join Date
    Aug 2008
    Posts
    42
    Thanks
    21
    Thanked 1 Time in 1 Post

    Drop Down Menu Manipulation and Writing it to text area -- HELP!!!

    First time poster here long time reader. You guys are great so I came here first.

    So basically I have a dynamic set of drop down lists that are contingent on the other parts of the list. This isnt the problem, I have the lists working just fine. However I want to onClick write the values of each of the drop down form elements to a text area.

    This is a form to allow customers of a meat market to place orders for pickup so after the DOM effects and what not it must be able to be submitted with a PHP mail() function.

    The HTML and Friends:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script language="javascript" src="list.js"></script>

    </head>

    <body onLoad="fillCategory();">

    <div align="left">

    <script language="javascript" type="text/javascript">
    var txt = document.drop_list.getElementByName("Category").value;
    function goText(){
    document.drop_list.text1.value= txt;
    }
    </script>

    <FORM name="drop_list" action="confirm.php" method="POST">
    <SELECT NAME="Category" onChange="SelectSubCat();" >
    <Option value="">Category</option>
    </SELECT>&nbsp;
    <SELECT id="SubCat" NAME="SubCat" onChange="SelectSubCatSub();" >
    <Option value="">SubCat</option>
    </SELECT>
    <SELECT id="SubCatSub" NAME="SubCatSub" onChange="SelectSubCatSubCat();">
    <Option value="">SubCatSub</option>
    </SELECT>
    <SELECT id="SubCatSubCat" NAME="SubCatSubCat">
    <Option value="">SubCatSubCat</option>
    </SELECT>
    <input type="button" value="Add" onclick="goText();" />
    <br />
    <textarea name="text1" id="text1" rows="10" cols="50">
    </textarea><br />
    <input type="text" name="name" /><br />
    <input type="text" name="email" /><br />
    <input type="text" name="phone" /><br />
    <select name="time">
    <option value="10am">10 A.M.</option>
    <option value="11am">11 A.M.</option>
    <option value="12pm">12 P.M.</option>
    <option value="11am">1 P.M.</option>
    <option value="11am">2 P.M.</option>
    <option value="11am">3 P.M.</option>
    <option value="11am">4 P.M.</option>
    <option value="11am">5 P.M.</option>
    <option value="11am">6 P.M.</option>
    <option value="11am">7 P.M.</option>
    </select>
    <input type="submit" value="Order" />
    </form>
    </div>
    </body>
    </html>

    When I click the add button I get "undefined" in the text area. It should retrieve the value of "Category" whatever it is set to. I know this is terribly simple and I should have cracked it by now but can anyone here help. If need be I can make the .js file for the menu available also.
    Last edited by UnPossible; 08-18-2008 at 05:08 PM. Reason: Unresolved

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Code:
    <script type="text/javascript">
    function goText(){
    var txt = document.getElementById("Category").value;
    alert(txt);
    document.drop_list.text1.value= txt;
    }
    </script>
    Code:
    <SELECT NAME="Category" id="Category" onChange="SelectSubCat();" >
    <Option value="category">Category</option>
    </SELECT>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    UnPossible (08-18-2008)

  • #3
    New Coder
    Join Date
    Aug 2008
    Posts
    42
    Thanks
    21
    Thanked 1 Time in 1 Post
    Well...

    I feel like...well...I hope im not the only one to ever make a mistake so simple before.

    Thank you for the quick response.

  • #4
    New Coder
    Join Date
    Aug 2008
    Posts
    42
    Thanks
    21
    Thanked 1 Time in 1 Post
    Sorry for this. What was posted above is a resolution to the initial issue I was having of getting the thing to work in the first place.

    It is now time for my limited experience to show.

    Ultimately when the add button is clicked and the function is called it should grab all of the selection fields and write them to the text area as a new line. This process should be able to be performed multiple times.

    Ive exhausted my knowledge on this (which isnt very much) and I have searched high and low for something that does this.

    All the help is appreciated!
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script language="javascript" src="list.js"></script>
    
    <script type="text/javascript">
    function goText(){
    var txt = document.getElementById("Category").value;
    alert(txt);
    document.drop_list.text1.value= txt;
    }
    </script>
    
    </head>
    
    <body onLoad="fillCategory();">
    
    
    
    <div align="left">
    
    
    <FORM name="drop_list" action="confirm.php" method="POST">
    		
    <SELECT NAME="Category" id="Category"onChange="SelectSubCat();" >
    <Option value="category">Category</option>
    </SELECT>&nbsp;
    <SELECT id="SubCat" NAME="SubCat" onChange="SelectSubCatSub();" >
    <Option value="subcat">SubCat</option>
    </SELECT>
    <SELECT id="SubCatSub" NAME="SubCatSub" onChange="SelectSubCatSubCat();">
    <Option value="subcatsub">SubCatSub</option>
    </SELECT>
    <SELECT id="SubCatSubCat" NAME="SubCatSubCat">
    <Option value="subcatsubcat">SubCatSubCat</option>
    </SELECT>
    <input type="button" value="Add" onclick="goText();" />
    <br />
    <textarea name="text1" id="text1" rows="10" cols="50">
    
    </textarea><br />
    <input type="text" name="name" /><br />
    <input type="text" name="email" /><br />
    <input type="text" name="phone" /><br />
    <select name="time">
    <option value="10am">10 A.M.</option>
    <option value="11am">11 A.M.</option>
    <option value="12pm">12 P.M.</option>
    <option value="11am">1 P.M.</option>
    <option value="11am">2 P.M.</option>
    <option value="11am">3 P.M.</option>
    <option value="11am">4 P.M.</option>
    <option value="11am">5 P.M.</option>
    <option value="11am">6 P.M.</option>
    <option value="11am">7 P.M.</option>
    </select>
    <input type="submit" value="Order" />
    
    </form>
    </div>
    
    
    
    </body>
    </html>
    Last edited by UnPossible; 08-18-2008 at 05:14 PM. Reason: added code

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Try something like

    Code:
    var sel=document.getElementsByTagName('select');
    var txt;
    for(var i=0;i<sel.length;i++)
     var txt+=sel[i].value;
    document.drop_list.text1.value= txt;
    (assuming you have some value assigned to each option)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    UnPossible (08-18-2008)

  • #6
    New Coder
    Join Date
    Aug 2008
    Posts
    42
    Thanks
    21
    Thanked 1 Time in 1 Post
    Quote Originally Posted by abduraooft View Post
    Try something like

    Code:
    var sel=document.getElementsByTagName('select');
    var txt;
    for(var i=0;i<sel.length;i++)
     var txt+=sel[i].value;
    document.drop_list.text1.value= txt;
    (assuming you have some value assigned to each option)
    Im replacing:

    Code:
    var txt = document.getElementById("Category").value;
    alert(txt);
    document.drop_list.text1.value= txt;
    With the what you have provided up top correct? Or is in addition to whats already there?

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Just replace.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    UnPossible (08-18-2008)

  • #8
    New Coder
    Join Date
    Aug 2008
    Posts
    42
    Thanks
    21
    Thanked 1 Time in 1 Post
    Its not writing anything to the text area now. With that last suggestion you leaped way outside of my grasp of JS.

    I have now:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script language="javascript" src="list.js"></script>
    
    <script type="text/javascript">
    function goText(){
    var sel=document.getElementsByTagName('select');
    var txt;
    for(var i=0;i<sel.length;i++)
     var txt+=sel[i].value;
    document.drop_list.text1.value= txt;
    }
    </script>
    
    </head>
    <body onLoad="fillCategory();">
    <div align="left">
    <FORM name="drop_list" action="confirm.php" method="POST">		
    <SELECT NAME="Category" id="Category"onChange="SelectSubCat();" >
    <Option value="category">Category</option>
    </SELECT>&nbsp;
    <SELECT id="SubCat" NAME="SubCat" onChange="SelectSubCatSub();" >
    <Option value="subcat">SubCat</option>
    </SELECT>
    <SELECT id="SubCatSub" NAME="SubCatSub" onChange="SelectSubCatSubCat();">
    <Option value="subcatsub">SubCatSub</option>
    </SELECT>
    <SELECT id="SubCatSubCat" NAME="SubCatSubCat">
    <Option value="subcatsubcat">SubCatSubCat</option>
    </SELECT>
    <input type="button" value="Add" onclick="goText();" />
    <br />
    <textarea name="text1" id="text1" rows="10" cols="50">
    </textarea><br />
    <input type="text" name="name" /><br />
    <input type="text" name="email" /><br />
    <input type="text" name="phone" /><br />
    <select name="time">
    <option value="">Time for Pickup</option>
    <option value="10am">10 A.M.</option>
    <option value="11am">11 A.M.</option>
    <option value="12pm">12 P.M.</option>
    <option value="1pm">1 P.M.</option>
    <option value="2pm">2 P.M.</option>
    <option value="3pm">3 P.M.</option>
    <option value="4pm">4 P.M.</option>
    <option value="5pm">5 P.M.</option>
    <option value="6pm">6 P.M.</option>
    <option value="7pm">7 P.M.</option>
    </select><br />
    <input type="submit" value="Order" />
    </form>
    </div>
    </body>
    </html>
    Im not sure if I placed this in the wrong place now or what.

    Should I have the text area in its own form with the drop downs. Could the "Time" dropdown be causing issues?

    And of course I understand if you dont want to mess with this any longer just tell me when ive used up the patients your willing to extend.

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Oops.. I put an extra var there, (sorry, hadn't tested)
    Code:
    for(var i=0;i<sel.length;i++)
      txt+=sel[i].value;
    PS: get firebug to easily track such errors in FF.
    Last edited by abduraooft; 08-19-2008 at 08:21 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    UnPossible (08-19-2008)

  • #10
    New Coder
    Join Date
    Aug 2008
    Posts
    42
    Thanks
    21
    Thanked 1 Time in 1 Post
    Dude you are awesome!

    Here is what I have now:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script language="javascript" src="list.js"></script>
    
    <script type="text/javascript">
    function goText(){
    var sel=document.getElementsByTagName('select');
    var txt;
    var txt1=document.drop_list.text1.value;
    for(var i=0;i<sel.length;i++)
     txt+=sel[i].value;
    document.drop_list.text1.value= txt+txt1;
    }
    </script>
    
    </head>
    <body onLoad="fillCategory();">
    <div align="left">
    <FORM name="drop_list" action="confirm.php" method="POST">		
    <SELECT NAME="Category" id="Category"onChange="SelectSubCat();" >
    <Option value="category">Category</option>
    </SELECT>&nbsp;
    <SELECT id="SubCat" NAME="SubCat" onChange="SelectSubCatSub();" >
    <Option value="subcat">SubCat</option>
    </SELECT>
    <SELECT id="SubCatSub" NAME="SubCatSub" onChange="SelectSubCatSubCat();">
    <Option value="subcatsub">SubCatSub</option>
    </SELECT>
    <SELECT id="SubCatSubCat" NAME="SubCatSubCat">
    <Option value="subcatsubcat">SubCatSubCat</option>
    </SELECT>
    <input type="button" value="Add" onclick="goText();" />
    <br />
    <textarea name="text1" id="text1" rows="10" cols="50">
    </textarea><br />
    <input type="text" name="name" /><br />
    <input type="text" name="email" /><br />
    <input type="text" name="phone" /><br />
    <select name="time">
    <option value="">Time for Pickup</option>
    <option value="10am">10 A.M.</option>
    <option value="11am">11 A.M.</option>
    <option value="12pm">12 P.M.</option>
    <option value="1pm">1 P.M.</option>
    <option value="2pm">2 P.M.</option>
    <option value="3pm">3 P.M.</option>
    <option value="4pm">4 P.M.</option>
    <option value="5pm">5 P.M.</option>
    <option value="6pm">6 P.M.</option>
    <option value="7pm">7 P.M.</option>
    </select><br />
    <input type="submit" value="Order" />
    </form>
    </div>
    </body>
    I added the var txt1=document.drop_list.text1.value; so when the add button is clicked it would add what is in the selected boxes to what was already in the text area. If there is a better way of doing this please let me know. I got everything working except I cant figure out how to make a new line every time I hit the add button. Prolly take you like 5 seconds to figure that out. And Also I get a realy strange "undefined" before each line I put in. Not sure at all why that is there.

    I hope you feel like helping me with this last little bit Ive actually learned a ton from this.

    Thanks!

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Code:
    <script type="text/javascript">
    function goText(){
    var sel=document.getElementsByTagName('select');
    var txt='';//to avoid the initial undefined
    var txt1=document.drop_list.text1;// getting the textarea object
    for(var i=0;i< sel.length;i++)
    	 txt+=sel[i].value;
     
    txt1.value= '\r\n'+txt+txt1.value; // \r\n - to add a newline
    }
    </script>
    PS: change your DOCTYPE to
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    , see http://en.wikipedia.org/wiki/XHTML#X...le-based_XHTML

    Validate your code and fix all errors, use http://validator.w3.org
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    UnPossible (08-20-2008)

  • #12
    New Coder
    Join Date
    Aug 2008
    Posts
    42
    Thanks
    21
    Thanked 1 Time in 1 Post
    I really appreciate all the help you have given me and the tools that you showed me are already helping. Shoot me a P.M. if there is anything I owe you for your time. I know you looked at this alot more than you would liked to have, and Im sure my JS ineptness didnt help either.

    Anyway I greatly appreciate this and good luck to you.


  •  

    Posting Permissions

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