Thursday, 21 November 2013

Design the page as:-

Like

Dynamically add element in form
Select the element and hit Add to add it in form.
 

Result:-

Select the element and hit Add to add it in form.
 

Ans:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function f1(type) {
            var cmbBox = document.createElement("input");
            cmbBox.setAttribute("value", type);
            cmbBox.setAttribute("type", type);
            cmbBox.setAttribute("name", type);
            var n = document.getElementById("p1");
            n.appendChild(cmbBox);
        }
       
    </script>
</head>
<body>
<form action="HTMLPage.htm" id="form1">
<b>Dynamically add element in form</b>
<br />
Select the element and hit Add to add it in form.
<div>
<select name="combo" id="comb1">
<option value="textbox">TextBox</option>
<option value="Button">Button</option>
<option value="CheckBox">CheckBox</option>
<option value="Radio">RadioButton</option>
<option value="ComboBox">ComboBox</option>
</select>
<input type="button" value="Submit" onclick="f1(document.forms[0].comb1.value)" />
</div>
<div>
<p id="p1"></p>
</div>
</form>
</body>
</html>

No comments:

Post a Comment