CODEWITHSUNDEEP
javascriptdom
Potheek
Potheek

Reputation: 1021

Dynamically Created Div is getting invisible

I am trying to create a div dynamically by clicking a button and add it to the parent name "option_selection". But the div get 'vanished' (I don't know what else could I say because saying 'invisible' may mean something else!).

Here is my JS code:

function addMoreOptions(div){
   var counter_div = document.getElementById("hidden");
   var counter = counter_div.value;
   counter_div.setAttribute("id","not_hidden");
   counter_div.setAttribute("name","not_hidden");
   counter++;
   var addString="";
   addString = addString+"<div style="\"width:" 250px;="" float:="" left;="" \"="">";
   addString = addString+"<p>Choose option type to display :</p></div>";
   addString = addString+"<div style="\"float:" left;\"=""><select id="\"option_type\"" name="\"option_type_";" addstring="addString+counter;"><option value="\"1\"">Single Option (radio button)</option>";
   addString = addString+"<option value="\"2\"">Multiple Option (check boxes)</option>";
   addString = addString+"<option value="\"3\"">Text Entry (text input box)</option>";
   addString = addString+"<option value="\"4\"">Menu(Drop Down)</option></select></div>";
   addString = addString+"<div style="\"float:" none;="" clear:="" both;="" width:="" 0px;\"=""></div>";
   addString = addString+"<div style="\"width:" 250px;="" float:="" left;="" \"="">";
   addString = addString+"<p>Enter option text:</p></div><div style="\"float:" left;\"="">";
   addString = addString+"<input type="\"text\"" id="\"option_text_1\"" name="\"option_text_";" addstring="addString+counter;"><input id="\"hidden\"" type="\"hidden\"" name="\"hidden\"" value="";
   addString = addString+counter;
   addString = addString+""></div><div style="\"float:" none;="" clear:="" both;="" width:="" 0px;\"=""></div>";
   var element = document.createElement("div");
   element.innerHTML= addString;   
   document.getElementById(div).appendChild(element);
   alert(document.getElementById(div).innerHTML);
}

here is the HTML Code

        <div id="option_selection">
            <div>
                <div style="width: 250px; float: left; "><p>Choose option type to display :</p></div>
                <div style="float: left;">
                    <select id="option_type" name="option_type_1">
                        <option value="1">Single Option (radio button)</option>
                        <option value="2">Multiple Option (check boxes)</option>
                        <option value="3">Text Entry (text input box)</option>
                        <option value="4">Menu(Drop Down)</option>
                    </select>
                </div>
                <div style="float: none; clear: both; width: 0px;"></div>
                <div style="width: 250px; float: left; "><p>Enter option text:</p></div>
                <div style="float: left;">
                    <input type="text" id="option_text_1" name="option_text_1">
                    <input id="hidden" name="hidden" type="hidden" value="1">                            
                </div>
                <div style="float: none; clear: both; width: 0px;"></div>
            </div>                    
        </div>                
        <div align="right" style="width: 800px;">
            <button id="add" onclick="addMoreOptions('option_selection')">Add More Option</button>

Any help would be highly appreciated. Thanks in Advance.

Upvotes: 0

Views: 340

Answers (2)

scessor
scessor

Reputation: 16115

Your button has no type-attribute. The default type of buttons is submit (also see here).

type
The type of the button. Possible values are:
- submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
- reset: The button resets all the controls to their initial values.
- button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.

Add type="button" and on click the form won't be submitted.

<button type="button" id="add" onclick="addMoreOptions('option_selection')">Add More Option</button>

Upvotes: 1

Yogesh Prajapati
Yogesh Prajapati

Reputation: 4870

Use

document.getElementById(div).innerHTML = element;

Instead of

document.getElementById(div).appendChild(element);

Upvotes: 0

Related Questions