SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast mtran's Avatar
    Join Date
    Apr 2006
    Location
    San Jose, US
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form help - Display input filed dynamically

    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>

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>


  3. #3
    SitePoint Enthusiast mtran's Avatar
    Join Date
    Apr 2006
    Location
    San Jose, US
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot!


Bookmarks

Posting Permissions

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