Form help - Display input filed dynamically

**mtran** · Jun 12, 2008, 08:20

Hi, I have the following example form in which I want if users click on the checkbox [NOT the submit button], the input text field will be added right away somewhere on the same page, then everything will be submitted when users click on the Submit button.

Right now when I clicked, the page refreshes.
The real list of checkboxes is pretty long, about 30 items. I'm not sure what is a good way of doing this.

Thanks for help!

Code:

<form name="contact">
<input type="checkbox" name="Distributor" value="MSN" onclick="generate_formId();" /> MSN<br />
<input type="checkbox" name="Distributor" value="Yahoo" onclick="generate_formId();" /> Yahoo!<br />
<input type="checkbox" name="Distributor" value="Google" /> Google<br /><br />

<script type="text/javascript">
 
  function generate_formId(){
  var Distributor_id = new Array()
  Distributor_id[0]="http://www.msn.com";  
  Distributor_id[1]="http://www.yahoo.com";
  Distributor_id[2]="http://www.google.com";

  for (var i=0; i < document.contact.Distributor.length; i++){
   if (document.contact.Distributor[i].checked){
   document.write('<input name="form_id" type="text" value="'+Distributor_id[i]+'" />');}}
   //return false;
   }
  </script>

<input type="submit" value="submit" onclick="generate_formId();" />
</form>

**gRoberts** · Jun 12, 2008, 08:59

Code javascript:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" media="screen" />
        <style type="text/css"></style>
        <script type="text/javascript">
            function generate_formId() {
                var Distributor_id = new Array()
                    Distributor_id[0]="http://www.msn.com";  
                    Distributor_id[1]="http://www.yahoo.com";
                    Distributor_id[2]="http://www.google.com";
                var dataEl = document.getElementById('data');
                while(dataEl.childNodes.length > 0)
                    dataEl.removeChild(dataEl.firstChild);
                var checkboxes = dataEl.parentNode.getElementsByTagName('INPUT');
                for(var i = 0; i < checkboxes.length; i++) {    
                    if(checkboxes[i].getAttribute('type') == 'checkbox' && checkboxes[i].checked) {
                        var form_id = document.createElement('INPUT');
                            form_id.setAttribute('type', 'text');
                            form_id.value = Distributor_id[i];
                            form_id.name = 'form_id';
                        dataEl.appendChild(form_id);
                        dataEl.appendChild(document.createElement('BR'));
                    }
                }
            }
        </script>
    </head>
    <body>
 
        <form name="contact" id="form">
            <input type="checkbox" name="Distributor" value="MSN" onclick="generate_formId();" /> MSN<br />
            <input type="checkbox" name="Distributor" value="Yahoo" onclick="generate_formId();" /> Yahoo!<br />
            <input type="checkbox" name="Distributor" value="Google" /> Google
            <br />
            <br />
            <div id="data"></div>
        <input type="submit" value="submit" onclick="generate_formId();" />
</form>
 
    </body>
</html>

**mtran** · Jun 12, 2008, 10:10

Thanks a lot!

The SitePoint Forums have moved.

User Tag List

Thread: Form help - Display input filed dynamically

Thread Tools

Display

Form help - Display input filed dynamically

Bookmarks

Bookmarks

Posting Permissions