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
    Registered User
    Join Date
    Jul 2007
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    how to add select lists dynamically when i click add another button

    hi guys ,
    my code :

    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="padding-bottom:2px;">
    <tr>
    <td align="right" width="25%" bgcolor="#E8F0F7"><div>Select a Shift:</div></td>
    <td class="runningText" width="75%">&nbsp;
    <select name="selectshift" onChange="javascript:function to be included();">
    <option value="choose">please choose</option>
    <option value="morning">MORNING</option>
    <option value="general">GENERAL</option>
    <option value="afternoon">AFTERNOON</option>
    <option value="night">NIGHT</option>
    </select>
    </td></tr>
    <tr><td>
    <div id="content area"> </div>
    when i select shift some shift (like morning) ,it will dispaly dynamically in next row in the content area with two select lists with option values(here the option values are hours from 7am -to- 5pm)& one button. if i click add button it wii add another two select lists in the same division area below the first added select lists with same option values like above.please any one help to this ............soon
    thanks
    venki'

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function zxcIncluded(zxcobj){
     var zxcshow=document.getElementById(zxcobj.value);
     if (!zxcshow) return;
     if (zxcobj.hide&&zxcobj.hide!=zxcshow) zxcobj.hide.style.display='none';
     zxcshow.style.display='';
     zxcobj.hide=zxcshow
    }
    
    function zxcAdd(zxcobj){
     var zxcp=zxcobj.parentNode;
     var zxcclone=zxcp.getElementsByTagName('DIV')[0].cloneNode(true);
     zxcp.appendChild(zxcclone);
    }
    
    /*]]>*/
    </script></head>
    
    <body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="padding-bottom:2px;">
    <tr>
    <td align="right" width="25%" bgcolor="#E8F0F7"><div>Select a Shift:</div></td>
    <td class="runningText" width="75%">&nbsp;
    <select name="selectshift" onChange="zxcIncluded(this);">
    <option value="choose">please choose</option>
    <option value="morning">MORNING</option>
    <option value="general">GENERAL</option>
    <option value="afternoon">AFTERNOON</option>
    <option value="night">NIGHT</option>
    </select>
    </td></tr>
    <tr><td>
    <div id="content area" style="position:relative;">
    
     <div id="morning"  style="display:none;" >
      <input type="button" name="" value="ADD" onclick="zxcAdd(this);" />
      <div>
       <select >
       <option >Morning</option>
       <option >7am</option>
       <option >8am</option>
       <option >Add Options</option>
       <option >as required</option>
       </select>
       <select >
       <option >Morning</option>
       <option >7am</option>
       <option >8am</option>
       <option >Add Options</option>
       <option >as required</option>
       </select>
      </div>
     </div>
     <div id="general" style="display:none;"  >
      <input type="button" name="" value="ADD"  onclick="zxcAdd(this);" />
      <div>
       <select >
       <option >General</option>
       <option >7am</option>
       <option >8am</option>
       <option >Add Options</option>
       <option >as required</option>
       </select>
       <select >
       <option >General</option>
       <option >7am</option>
       <option >8am</option>
       <option >Add Options</option>
       <option >as required</option>
       </select>
      </div>
     </div>
    </div>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    venkib097 (09-03-2007)

  • #3
    Registered User
    Join Date
    Jul 2007
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts
    hi vwphillips thanks for posting code .that code is what i am expecting.

  • #4
    Registered User
    Join Date
    Jul 2007
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts
    thnks for posting coding,that is help very helpful for me . i am new to javascript . how can i know (learn) about DIV concept and i dont the concept abt hide&display&byTagname,replace,innnerHtml .....and so on.how can i learn about these things. please help me to learn about these things.if any links about these topics plese forword me. my mail id venkib097@yahoo.co.in
    thanks
    venki.
    Last edited by venkib097; 09-03-2007 at 07:23 AM. Reason: for adding mailid


  •  

    Posting Permissions

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