how to make a select box change into a textfield?

Discussion in 'JavaScript' started by lost, Nov 9, 2005.

  1. #1
    i have a select box on my form along with a button called "create new".
    If the user selects the "create new" the select box must then turn into a text field. how would i go about doing that?
     
    lost, Nov 9, 2005 IP
  2. TommyD

    TommyD Peon

    Messages:
    1,397
    Likes Received:
    76
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I can only imagine what you are doing, but if I'm correct this should help you get to where you want to be.

    
    <html>
    <head><title></title>
    <script language="JavaScript" type="text/javascript">
    function check2input(){
    	document.all.bifield.innerHTML = "<input type=\"text\" name=\"fieldName\" value=\"\">";
    }
    </script>
    </head>
    <body>
    <form>
    	<div id='bifield'>
            <input type="checkbox" name="fieldName" value="other" onClick="check2input();">
      </div>
    </form>
    </body>
    </html>
    
    
    Code (markup):
    Note, I did something like you mentioned, but what I did for simplicy I didn't change a check box(which I called "other") to an input field, but I create both, hid the input text field. When user wanted to select "other" the input text field unhid and on the server side I checked for the input text fields value in an if-else condition. If memory serves me right.

    hth,

    tom
     
    TommyD, Nov 9, 2005 IP
  3. lost

    lost Peon

    Messages:
    144
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thanks for your help, i do have a problem...its changing but not staying.
    i can see the change happen when i hit the button, but it reverts back so quickly????
     
    lost, Nov 9, 2005 IP
  4. lost

    lost Peon

    Messages:
    144
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    actually, how could i hide it like you were saying that you once implemented??
     
    lost, Nov 9, 2005 IP
  5. TommyD

    TommyD Peon

    Messages:
    1,397
    Likes Received:
    76
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Now I had to pull this out of my memory, but try this, you can check for a value in the text input box, or check if the 'other' is checked.

    
    <html><body>
    <form name="form1" method="post" action="">
      <p>
      <input type="checkbox" name="subjects" value="1"> 
      Subject 1
      <br>
      <input type="checkbox" name="subjects" value="2">
    Subject 2 <br>
    <input type="checkbox" name="other" value="checkbox" onClick="if(this.checked){
    			document.getElementById('other_subject').style.display='';
    			document.getElementById('other_subject').focus();
    		}else{
    			document.getElementById('other_subject').value='';
    			document.getElementById('other_subject').style.display='none';
    			
    		}"> 
    Other: 
        <input name="other" type="text" id="other_subject" style="display:none;">
      </p>
    </form>
    </body></html>
    
    
    Code (markup):
    hth,

    tom
     
    TommyD, Nov 9, 2005 IP
  6. lost

    lost Peon

    Messages:
    144
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Thanks Tommy!
     
    lost, Nov 10, 2005 IP
  7. TommyD

    TommyD Peon

    Messages:
    1,397
    Likes Received:
    76
    Best Answers:
    0
    Trophy Points:
    0
    #7
    No problem.

    Might be better ways to do it, just found simple enough.

    later,

    tom
     
    TommyD, Nov 10, 2005 IP