www.webdeveloper.com
Results 1 to 5 of 5

Thread: Text already in input fields

  1. #1
    Join Date
    Nov 2010
    Posts
    62

    Text already in input fields

    Hi there.

    I am wanting a little help with something here hope yous can help.

    I have 2 input fields.

    Input 1: Website URL
    Input 2: Website Directory

    Firstly I would like the "http://" to automatically appear in input one and two and it can't be edited or removed.

    Then what ever is typed in input one, I wold like it to automaticcal copy into input 2, and the user can't delete whats in input 2 without going thourgh input 1.

    Then lastly the user can add data into input 2, without input 1 changing.

    Here is an example:

    Red = Can't be deleted Green = Can be changed Blue = additional text to input 2

    Input 1: http://www.yourwebsite.com/
    Input 2: http://www.yourwebsite.com/extra/directory

    Does anyone know how to do this?
    Thanks
    Peter

  2. #2
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    why dont you just put the uneditable text in plain text, next to the input boxes? when you receive the data server side just add the extra data
    Last edited by DanInMA; 09-02-2011 at 10:57 PM.

  3. #3
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    ill wirte an example.

  4. #4
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    you could do this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    </head>
    
    <body>
    <form action="" method="get">
    http://<input name="sitename" id="sitename" type="text"  onKeyDown="updatesitename();" ><br><br>
    http://<span id="updatesitename"></span><input name="sitedir" id="sitedir" type="text"><br>
    <input name="" type="submit"></form>
    <script type="text/javascript">
    <!--
    
    function updatesitename(){
     document.getElementById('updatesitename').innerHTML = document.getElementById('sitename').value;
    }
    
    //-->
    </script> 
    </body>
    </html>

  5. #5
    Join Date
    Nov 2010
    Posts
    62
    Quote Originally Posted by DanInMA View Post
    you could do this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    </head>
    
    <body>
    <form action="" method="get">
    http://<input name="sitename" id="sitename" type="text"  onKeyDown="updatesitename();" ><br><br>
    http://<span id="updatesitename"></span><input name="sitedir" id="sitedir" type="text"><br>
    <input name="" type="submit"></form>
    <script type="text/javascript">
    <!--
    
    function updatesitename(){
     document.getElementById('updatesitename').innerHTML = document.getElementById('sitename').value;
    }
    
    //-->
    </script> 
    </body>
    </html>

    Hi there.
    I was thinking that actually, and with a little magic with CSS I can make it look like it's in the input box. Thanks

    Peter

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles