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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Convert SELECT box to INPUT

    Hi,

    Im trying to change a SELECT box to a TEXT input box with the text value of the chosen index. ie;

    <select name="select" onChange="changeToInput();">
    <option value="a">Hey Hey</option>
    <option value="b">Doh</option>
    </select>

    ---

    <input name="textfield" type="text" value="Hey Hey">

    Help muchly appreciated.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    <select name="select" onChange="this.form.textfield.value=this.options[this.selectedIndex].text">
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <html>
    
    <script>
    
    function changeToInput(obj){
     tb=document.createElement('INPUT');
     tb.type='text';
     tb.value=obj.options[obj.selectedIndex].text;
     obj.parentNode.insertBefore(tb,obj);
     obj.parentNode.removeChild(obj);
    }
    
    </script>
    <body>
    <select name="select" onchange="changeToInput(this);">
    <option value="a">Hey Hey</option>
    <option value="b">Doh</option>
    </select>
    </body>
    </html>

  • #4
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips
    Code:
    <html>
    
    <script>
    
    function changeToInput(obj){
     tb=document.createElement('INPUT');
     tb.type='text';
     tb.value=obj.options[obj.selectedIndex].text;
     obj.parentNode.insertBefore(tb,obj);
     obj.parentNode.removeChild(obj);
    }
    
    </script>
    <body>
    <select name="select" onchange="changeToInput(this);">
    <option value="a">Hey Hey</option>
    <option value="b">Doh</option>
    </select>
    </body>
    </html>
    Genious! absolute genious. thanks for that.
    Ok, say you wanted to have a button which changes it all back to what it was, how would one go about that?

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <html>
    
    <script>
    var Objs;
    
    function changeToInput(obj){
     tb=document.createElement('INPUT');
     tb.type='text';
     tb.value=obj.options[obj.selectedIndex].text;
     tbb=document.createElement('INPUT');
     tbb.type='button';
     tbb.value='Back';
     tbb.objs=[obj,tb,tbb];
     tbb.onclick=function(){ Replace(this.objs); }
     obj.parentNode.insertBefore(tb,obj);
     obj.parentNode.insertBefore(tbb,obj);
     obj.parentNode.removeChild(obj);
    }
    
    function Replace(obj){
     obj[2].parentNode.insertBefore(obj[0],obj[2]);
     obj[0].parentNode.removeChild(obj[1]);
     obj[0].parentNode.removeChild(obj[2]);
    }
    </script>
    <body>
    <select name="select" onchange="changeToInput(this);">
    <option value="a">Hey Hey</option>
    <option value="b">Doh</option>
    </select>
    </body>
    </html>

  • #6
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Champion

  • #7
    Regular Coder
    Join Date
    Aug 2002
    Location
    Oregon, United States of America
    Posts
    882
    Thanks
    1
    Thanked 9 Times in 9 Posts
    I must say, well done! Any idea of how cross-browser this is?
    If I'm postin here, I NEED YOUR HELP!!

  • #8
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by Ultragames
    I must say, well done! Any idea of how cross-browser this is?
    All the modern browsers.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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