Results 1 to 2 of 2

Thread: Dynamically add input field to page

  1. #1
    Join Date
    Nov 2005
    Location
    Austin TX,US
    Posts
    71
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Dynamically add input field to page

    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
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    It's because of your document.write. Here, try this:
    Code:
    <form name="contact">
    <div id="finput"></div>
    <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 />
    <input type="submit" value="submit" onclick="generate_formId();" />
    </form>
    
    <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.getElementById('finput').innerHTML='<input name="form_id" type="text" value="'+Distributor_id[i]+'"  />';}}
       //return false;
       }
      </script>
    Should work.
    Jeremy | jfein.net

  3. The Following User Says Thank You to Nile For This Useful Post:

    mtran (06-13-2008)

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
  •