www.webdeveloper.com
Results 1 to 10 of 10

Thread: Dynamic Form Controls

  1. #1
    Join Date
    Jun 2004
    Posts
    18

    Dynamic Form Controls

    i write code fro a web page. somewhere in the site, the visitor can submit his cv(curriculum vitae).
    but there is no way for me to know i.e. (how many languages can speak) I dont want from him to write all the languages he knows in a single text box(<input type=text>) seperate them by ','.
    i want to write every language in a separate input box.
    So i need to create the input boxes dynamically, but i dont know how can i do it?

  2. #2
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,277
    And then how will people without JavaScript use the form? Perhaps a TEATAREA element with a note that the user should enter each language on a different line.

  3. #3
    Join Date
    Jul 2004
    Location
    London
    Posts
    284
    Would a teatarea have a nipple in it?

    *groan*


  4. #4
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,277
    Originally posted by BillyRay
    Would a teatarea have a nipple in it?
    One would hope so.

    I've a broken wrist, among other injuries, from a rather spectacular bicycle accident and I'm typing single handed.

  5. #5
    Join Date
    Jul 2004
    Location
    London
    Posts
    284
    Aaah - now your avatar makes sense!

    I won't bore you with the joke about the olympic cyclist who was expelled for drugs - he was caught pedalling. Oh. Too late

  6. #6
    Join Date
    Jul 2004
    Posts
    986
    You could try something like this:

    Code:
    <script type="text/javascript">
     <!--//
      function addInputs(theInput){
       var table = document.createElement('table');
           table.id = 'language';
       var language = document.getElementById('language');
        if(language)theInput.parentNode.removeChild(language);
    
        if(theInput.value.match(/^\d+$/)){
         var tbody = document.createElement('tbody');
          for(var i=1; i<=theInput.value; i++){
              var row   = document.createElement('tr');
              var cell  = document.createElement('td');
              var label = document.createElement('label');
                  label.setAttribute('for','language'+(i));
                  label.appendChild(document.createTextNode('Language '+i+':'));
                  cell.appendChild(label);
                  row.appendChild(cell);
                  tbody.appendChild(row);
    
    
              var cell  = document.createElement('td');
              var input = document.createElement('input');
                  input.size = 20;
                  input.name = 'language'+(i);
                  cell.appendChild(input);
                  row.appendChild(cell);
                  tbody.appendChild(row);
          }       table.appendChild(tbody);
                  theInput.parentNode.insertBefore(table,theInput.nextSibling);
        }         
    
        else if(theInput.length > 0){
                alert('Please enter only numbers in this field!');
                theInput.value = '';
                theInput.focus();
        }             
      }
     //-->
    </script>
    </head>
    
    <body>
    <form method="get" action="">
    How many languages do you know: <input type="text" size="1" onchange="addInputs(this)">
    </form>
    .....Willy
    Last edited by Willy Duitt; 08-26-2004 at 12:19 PM.

  7. #7
    Join Date
    Jul 2003
    Location
    Boston Area, Massachusetts
    Posts
    3,489
    Originally posted by Charles
    And then how will people without JavaScript use the form? Perhaps a TEATAREA element with a note that the user should enter each language on a different line.
    This is the best solution. And then parse the data appropriately server-side using something such as (PHP):
    Code:
    $data = explode('\n', $_POST['languages']);
    Where this would then contain an array of languages known by the user. JavaScript-independant, and sensible.

  8. #8
    Join Date
    Jun 2004
    Posts
    18

    thanks willy

    thanks willy this works

  9. #9
    Join Date
    Jul 2004
    Posts
    986
    Cheers;

    But I just noticed that this: input.name = 'language'+(i+1);
    Should be this: input.name = 'language'+(i);

    .....willy

  10. #10
    Join Date
    Jul 2003
    Location
    Boston Area, Massachusetts
    Posts
    3,489
    Originally posted by tolis_developer
    thanks willy this works
    Without JavaScript it surely doesn't.

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