CODEWITHSUNDEEP
javascript
rahul888
rahul888

Reputation: 413

Adding select boxes dynamically

I have made a simple dynamic form to generate input boxes.

<body>
    <div id="main1">
        <input type="button" onclick="addSelectBox ()" name="clickme" value="+"/>
<input type="button" onclick="removeSelect();" value="-"/>

<input type="button" onclick="xmlData();" value="XML" />

    </div>
    <div id="main">
    </div>

  </body>

Here's the javascript code:

 (function () { 

var selele=0;
    var brindex=0;
   function addSelectBox() {

    selele = selele + 1;
    var spantag = document.createElement("span");
    spantag.setAttribute("id", selele);

    var parentDiv = document.getElementById("main");
    var selectElement = document.createElement("select");
    var selectElement1 = document.createElement("select");
    var selectElement2 = document.createElement("select");
    var selectElement3 = document.createElement("select");

    var arr = new Array("Stocks", "MutualFunds");
    var arr2 = new Array("individual", "401k", "IRA");
    var arr3 = new Array("contains", "equals");
    var arr4 = new Array("scrapedaccounttype", "scrapedtransactiontype");
    var textbox = document.createElement('input');

    for (var i = 0; i < arr.length; i++) {
        var option = new Option(arr[i]);
        selectElement.options[selectElement.options.length] = option;


    }


    for (var i = 0; i < arr2.length; i++) {
        var option = new Option(arr2[i]);
        selectElement1.options[selectElement1.options.length] = option;


    }

    for (var i = 0; i < arr3.length; i++) {
        var option = new Option(arr3[i]);
        selectElement2.options[selectElement2.options.length] = option;


    }
    for (var i = 0; i < arr4.length; i++) {
        var option = new Option(arr4[i]);
        selectElement3.options[selectElement3.options.length] = option;


    }



    spantag.appendChild(selectElement);
    spantag.appendChild(selectElement1);
    spantag.appendChild(selectElement2);
    spantag.appendChild(selectElement3);
    spantag.appendChild(textbox);


    parentDiv.appendChild(spantag);
    linebreak();

};
 function removeSelect() {
    var parentDiv = document.getElementById("main");
    var removetg = document.getElementById(selele);
    if (selele != 1) {
        parentDiv.removeChild(removetg);
        selele = selele - 1;


    } else {
        parentDiv.removeChild(removetg);
        parentDiv.innerHTML = "";
        selele = selele - 1;
    }
    removeBreak();
};

 function linebreak() {

    brindex = brindex + 1;
    var brtag = document.createElement("br");
    brtag.setAttribute("id", brindex);
    var parentDiv = document.getElementById("main");
    parentDiv.appendChild(brtag);
};
 function linespace() {

    var myElement = document.createElement("span");
    myElement.innerHTML = "&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp";
    var parentDiv = document.getElementById("main");
    parentDiv.appendChild(myElement);
};
 function removeBreak() {
    var myElement = document.getElementById(brindex);
    var parentDiv = document.getElementById("main");
    brindex = brindex - 1;
    parentDiv.removeChild(myElement);
};
 function xmlData() {


    xmlDoc = loadXMLDoc("data.xml");

    newel = xmlDoc.createElement("edition");

    x = xmlDoc.getElementsByTagName("span")[0];
    x.appendChild(newel);

};

 });

I can't get it to work on jsFiddle, the buttons don't work.

They work fine if I embed it in a tag.

Can anybody help me fix them.

EDIT: I guess i added anonymously because I wanted the var selele and brindex globally for all these functions.

I have made the code changes.

JSFIDDLE

Upvotes: 2

Views: 73

Answers (2)

Mr.G
Mr.G

Reputation: 3549

In your fiddle you select onload but you change onload to no warp-in or no warp-in now it's work fine

Upvotes: 0

Shomz
Shomz

Reputation: 37691

Your functions are within an anonymous function and thus not available from outside.

First remove the code from the anonymous function (see here: http://jsfiddle.net/uH84W/6/), then fix the console errors you get (I assume that's not the whole code).

    function addSelectBox() {...

Upvotes: 5

Related Questions