Add controls (textbox, radio, checkbox..) dynamically in jQuery way
<html>
<div style="display:inline">
<input type="button" id="txtPlain" value="Add Plain Text" style="" />
<input type="button" id="txt" value="Add TextBox" style="" />
<input type="button" id="chk" value="Add CheckBox" style="" />
<input type="button" id="rad" value="Add Radio" style="" />
<input type="button" id="btn" value="Add Button" style="" />
</div>
<div id="holder">
</div>
<script>
$("#txt").click(function(){
var $ctrl = $('<input/>').attr({ type: 'text', name:'text', value:'text'}).addClass("text");
$("#holder").append($ctrl);
});
$("#chk").click(function(){
var $ctrl = $('<input/>').attr({ type: 'checkbox', name:'chk'}).addClass("chk");
$("#holder").append($ctrl);
});
$("#rad").click(function(){
var $ctrl = $('<input/>').attr({ type: 'radio', name:'rad'}).addClass("rad");
$("#holder").append($ctrl);
});
$("#btn").click(function(){
var $ctrl = $('<input/>').attr({ type: 'button', name:'btn',value:'Button'}).addClass("btn");
$("#holder").append($ctrl);
});
$("#txtPlain").click(function(){
var lbl = prompt ("Enter Text","");
$("#holder").append(lbl);
});
</script>
No comments:
Post a Comment