23 users online (0 members and 23 guests)  


  Results 1 to 6 of 6

Related

  1. Help required about media    Forum: Archive
    Replies: 0
  2. Geniune help required please    Forum: Search Engine Optimization - SEO - Forum
    Replies: 11
  3. Replies: 0
  4. Wanted Urgently : Website    Forum: Websites For Sale
    Replies: 2
  1. #1
    Bigmous's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Dec 2008
    Location
    Sydney, Australia
    Posts
    27

    Exclamation Help required urgently

    I'm in need of some help. currently working on a major php project for uni and am slightly stuck on a form feature that is required.

    i've got a drop down menu and an input box next to it. once the user clicks the add button, I need a new drop down and input box to be generated under it. this new row of fields will occur each time they click on the add.

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Help required urgently

    Hi there Bigmous,

    here is an example that I have just knocked up...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title></title>
    
    <style type="text/css">
    #theForm div {
        clear:both;
        width:320px;
        height:20px; 
        padding:10px;
        border:1px solid #333;
        margin:4px auto;
     }
    #theForm input,#theForm select {
        float:left;
        margin:0 5px 10px;
     }
    .blue {
        background-color:#ccf;
     }
    .red {
        background-color:#fcc;
     }
    </style>
    
    <script type="text/javascript">
    if(window.addEventListener){
       window.addEventListener('load',init,false);
     }
    else { 
    if(window.attachEvent){
       window.attachEvent('onload',init);
      }
     }
    
    function init(){
    
      c=0;
      d=2
      optLength=3;
      opt=[];
      df=document.forms[0];
    
    df[2].onclick=function(){
      addElements();
      }
     }
    
    function addElements() {
    
       c++;
       dv=document.createElement('div');
       dv.setAttribute('id','container'+c);
    if(c%2==0) {
       dv.className='blue';
     }
    else {
       dv.className='red';
     }
       sel=document.createElement('select');
       sel.setAttribute('name','select'+c);
    
    for(k=0;k<optLength;k++){
       d++;
       opt[k]=document.createElement('option');
       opt[k].setAttribute('value',d);
    if(k==0){
       opt[k].appendChild(document.createTextNode('---options---'));
     }
    else {
       opt[k].appendChild(document.createTextNode('option '+d));
     }
       sel.appendChild(opt[k]);
     }
       dv.appendChild(sel);
    
       inp=document.createElement('input');
       inp.setAttribute('name','input'+c);
       inp.setAttribute('type','text');
    
       dv.appendChild(inp);
    
       document.forms[0].appendChild(dv);
     }
    </script>
    
    </head>
    <body>
    
    <form id="theForm" action="#">
    
    <div id="container0" class="blue">
    
    <select name="select0">
     <option value="0">---options---</option>
     <option value="1">option 1</option>
     <option value="2">option 2</option>
    </select>
    
    <input name="input0" type="text">
    <input type="button" value="add">
    
    </div>
    
    </form>
    
    </body>
    </html>
    

  3. #3
    Bigmous's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Dec 2008
    Location
    Sydney, Australia
    Posts
    27

    Re: Help required urgently

    Thanks heaps mate, the only problem i'm trying to figure out now is how i can keep the add button next to or under the last 1

    Cheers,

    Mous

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Help required urgently

    Hi there Mous,

    this can be easily done with a slight modification.
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title></title>
    
    <style type="text/css">
    #theForm {
        margin:0;
     }
    #theForm div {
        clear:both;
        width:264px;
        height:20px; 
        padding:10px;
        border:1px solid #333;
        margin:4px auto;
     }
    #theForm input,#theForm select {
        float:left;
        margin:0 5px 10px;
     }
    #button {
        width:284px;
        margin:auto;
     }
    #add  {
        float:right;
     }
    .blue {
        background-color:#ccf;
     }
    .red {
        background-color:#fcc;
     }
    </style>
    
    <script type="text/javascript">
    if(window.addEventListener){
       window.addEventListener('load',init,false);
     }
    else { 
    if(window.attachEvent){
       window.attachEvent('onload',init);
      }
     }
    
    function init(){
    
      c=0;
      d=2
      optLength=3;
      opt=[];
      df=document.forms[0];
    
    document.getElementById('add').onclick=function(){
      addElements();
      }
     }
    
    function addElements() {
    
       c++;
       dv=document.createElement('div');
       dv.setAttribute('id','container'+c);
    if(c%2==0) {
       dv.className='blue';
     }
    else {
       dv.className='red';
     }
       sel=document.createElement('select');
       sel.setAttribute('name','select'+c);
    
    for(k=0;k<optLength;k++){
       d++;
       opt[k]=document.createElement('option');
       opt[k].setAttribute('value',d);
    if(k==0){
       opt[k].appendChild(document.createTextNode('---options---'));
     }
    else {
       opt[k].appendChild(document.createTextNode('option '+d));
     }
       sel.appendChild(opt[k]);
     }
       dv.appendChild(sel);
    
       inp=document.createElement('input');
       inp.setAttribute('name','input'+c);
       inp.setAttribute('type','text');
    
       dv.appendChild(inp);
    
       document.forms[0].appendChild(dv);
     }
    </script>
    
    </head>
    <body>
    
    <form id="theForm" action="#" >
    
    <div id="container0" class="blue">
    
    <select name="select0">
     <option value="0">---options---</option>
     <option value="1">option 1</option>
     <option value="2">option 2</option>
    </select>
    
    <input name="input0" type="text">
    
    </div>
    
    </form>
    
    <div id="button">
    <input id="add" type="button" value="add">
    </div>
    
    </body>
    </html>
    

  5. #5
    Bigmous's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Dec 2008
    Location
    Sydney, Australia
    Posts
    27

    Wink Re: Help required urgently

    omg ofcourse, so very simple!!! lol thanks heaps, i think lack of sleep and all my c++, java and php projects are finally getting to me. haha how could i of missed that.

    thanks again

  6. #6
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Help required urgently

    No problem, you're very welcome, Mous.



Tags for this Thread