SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript add fields

    I am at a complete loss here. I need a form where users can select from a drop down box a certain location and then next to the drop down box is a text field where they can enter information about the location. But, under the text field I want "add another field" option where they can add another field and enter another piece of info for the certain location. Then on top of all of that I want under all of that "add another location".

    Location 1------------- text field 1.1
    ----------------------- text field 1.2
    ----------------------- [add another field]
    Location 2------------- text field 2.1
    ----------------------- text field 2.2
    ----------------------- text field 2.3
    ----------------------- [add another field]
    [Add another location]

    I hope this makes sense. I've been trying everything I come across on the web but I can't seem to get anything to work. Any help would be appreciated, thank you.

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    do you mind using jQuery ?

  3. #3
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put a trigger id inside your button
    Code JavaScript:
    <p id="trigger"> your button to add field </p>

    Code JavaScript:
    function initialize(){
     if(document.getElementById("trigger")){
      var button = document.getElementById("trigger");
      button.onclick = addField;
     }
     
     
    function addField() {
    var newField = document.createElement("input");
    newField.setAttribute("id", "theNewField");
    newField.innerHTML = ""; // here comes everything that needs to come in your new field
    trigger.parentNode.insertAfter(newField,trigger);
    }}

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by wolken View Post
    do you mind using jQuery ?
    No, that's fine.

    And, bulevardi, I can't seem to get your code to work.

    This is what I have so far. I can add new drop downs fine, but when it comes to adding a text field that go along with the drop downs it will only add to the first drop down and none of the others. I feel like I need to create unique id names for the divs containing the text fields, but don't know how.

    Code:
    <script type="text/javascript">
    var my_div = null;
    var newDiv = null;
    
    
    function add_text() {
    var newdiv=document.createElement("div")
    var newtext=document.createElement("input")
    newdiv.appendChild(newtext) //append text to new div
    document.getElementById("test").appendChild(newdiv) //append new div to another div
    }
    
    
    function add_drop()
    {
      // create a new div element
      // and give it some content
      
      newDiv = document.createElement("div");
      newDiv.innerHTML = "<tr><td><select><option>1</option><option>2</option><option>3</option></select></td><td><div id='test'></div><input type='button' onclick='add_text()' value='add text field' /></td></tr>";
    
      // add the newly created element and it's content into the DOM
      my_div = document.getElementById("org_div1");
      document.body.insertBefore(newDiv, my_div);
    }
    
    </script>
    <body onload="add_drop()">
    <table border="1">
    
    <div id='org_div1'></div>
    </table>
    <input type='button' onclick='add_drop()' value = 'add drop down'/>

  5. #5
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try with this one once.
    It still has to be more simplified... it's quite rough made.. :/

    And one problem is that if you add fields, and choose another number and then add another field,.. it adds before the button :s

    But I hope you already have something to work on with this:

    Code HTML4Strict:
    <html>
    <head>
    <title></title>
     
    <script type="text/javascript">
    function initialize(){
     if(document.getElementById("trigger")){
      var button = document.getElementById("trigger");
      button.onclick = add_drop;
     }
    }
     
    function addField(){
        var showField = document.createElement("div");
        showField.innerHTML = "<input type=\"text\" />";
        var button = document.getElementById("addfieldbutton");
        button.parentNode.insertBefore(showField,button);
    }
     
    function chooseOption() {
       var selectedOption = this.options[this.selectedIndex].value;   
       if (selectedOption=="one") {
        var showField = document.createElement("div");
        showField.innerHTML = "<input type=\"text\" />";
        var showButton = document.createElement("div");
        showButton.innerHTML = "<input type=\"button\" id=\"addfieldbutton\" value=\"add text field\" />";
        showButton.onclick = addField;
        var orgDiv = document.getElementById("org_div");
        orgDiv.parentNode.insertBefore(showField,orgDiv);
        }
    if (selectedOption=="two") {
        var showField = document.createElement("div");
        showField.innerHTML = "<input type=\"text\" />";
        var showButton = document.createElement("div");
        showButton.innerHTML = "<input type=\"button\" id=\"addfieldbutton\" value=\"add text field\" />";
        showButton.onclick = addField;
        var orgDiv = document.getElementById("org_div");
        orgDiv.parentNode.insertBefore(showField,orgDiv);
       }
    if (selectedOption=="three") {
        var showField = document.createElement("div");
        showField.innerHTML = "<input type=\"text\" />";
        var showButton = document.createElement("div");
        showButton.innerHTML = "<input type=\"button\" id=\"addfieldbutton\" value=\"add text field\" />";
        showButton.onclick = addField;
        var orgDiv = document.getElementById("org_div");
        orgDiv.parentNode.insertBefore(showField,orgDiv);
       }
        orgDiv.parentNode.insertBefore(showButton,orgDiv);
    }
     
     
    function add_drop(){
      var newDiv = document.createElement("div");
      newDiv.innerHTML = "<select id=\"options\"><option value=\"one\">1</option><option value=\"two\">2</option><option value=\"three\">3</option></select>";
      var orgDiv = document.getElementById("org_div");
      orgDiv.parentNode.insertBefore(newDiv,orgDiv);
     
      var selectedOption = document.getElementById("options");
      selectedOption.onchange = chooseOption;
    }
     
     
    </script>
    </head>
    <body onload="initialize();">
     
     
    <div id="org_div"></div>
    <div id="test"></div>
    <input type="button" id="trigger" value="add drop down" />
    </body>
    </html>

  6. #6
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry it took so long. Didn't have spare time to figure it out here...

    I simplified something (maybe can be done more simplified).

    The button works now and adds the field above the button each time + if you choose another option, it adds the new field above the right button..



    Code JavaScript:
    <html>
    <head>
    <title></title>
     
    <script type="text/javascript">
    function initialize(){
     if(document.getElementById("trigger")){
      var button = document.getElementById("trigger");
      button.onclick = add_drop;
     }
    }
     
    function addField(chosenOption){
        var showField = document.createElement("div");
        showField.innerHTML = "<input type=\"text\" />";
        var button = document.getElementById(chosenOption);
    //  paste the field under the last field of the chosen option, before the button 
        button.parentNode.insertBefore(showField,button);
    }
     
     
    function addButton(chosenOption){
        var showField = document.createElement("div");
        showField.innerHTML = "<input type=\"text\" />";
        var showButton = document.createElement("div");
        showButton.setAttribute("id", chosenOption);
        showButton.innerHTML = "<input type=\"button\" value=\"add text field\" />";
    //  trigger the button function to add a new field
        showButton.onclick = function (){ addField(chosenOption); }
        var orgDiv = document.getElementById("org_div");
        orgDiv.parentNode.insertBefore(showField,orgDiv);
        orgDiv.parentNode.insertBefore(showButton,orgDiv);
    }
     
     
    function chooseOption() {
       var selectedOption = this.options[this.selectedIndex].value;   
       addButton(selectedOption); 
    }
     
     
    function add_drop(){
      var newDiv = document.createElement("div");
      newDiv.innerHTML = "<select id=\"options\"><option value=\"one\">1</option><option value=\"two\">2</option><option value=\"three\">3</option></select>";
      var orgDiv = document.getElementById("org_div");
      orgDiv.parentNode.insertBefore(newDiv,orgDiv);
      var selectedOption = document.getElementById("options");
      selectedOption.onchange = chooseOption;
    }
     
     
    </script>
    </head>
    <body onload="initialize();">
     
     
    <div id="org_div"></div>
    <div id="test"></div>
    <input type="button" id="trigger" value="add drop down" />
    </body>
    </html>


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
  •