How To Have Multiple Radio Buttons With Different Functionality?
I am working on a project in which I need to make an HTML page with couple of radio buttons. First radio button is, INSERT. As soon as I click INSERT radio button, I would like to
Solution 1:
try this code in javascript part,
var datacenter = '<label for="Datacenter"> Datacenter </label> <input type="text" name="datacenter" size="20" />';
var node = '<label for="Node"> Node </label> <input type="text" name="node" size="20" />';
var data = '<label for="Data"> Data </label> <input type="text" name="data" size="100"/>';
var config = '<label for="Config"> Config </label> <input type="text" name="config" size="100"/>';
$(".changeAction").on("click", function () {
var divId = $(this).attr("div-id");
$('.changeable').html('');
$("#dynamicName").val(divId);
switch (divId) {
case'insert':
//insert stuff goes here!!
divId = "#" + divId;
var myInput = datacenter + node + data;
$(divId).html(myInput);
break;
case'update':
//update stuff goes here!!
divId = "#" + divId;
var myInput = datacenter + node + data;
$(divId).html(myInput);
break;
case'Delete':
//Delete stuff goes here!!
divId = "#" + divId;
var myInput = node;
$(divId).html(myInput);
break;
case'process':
//process stuff goes here!!
divId = "#" + divId;
var myInput = datacenter + node + config + data;
$(divId).html(myInput);
break;
}
});
SEE FIDDLE DEMO
Solution 2:
Change your html code to this
<inputclass="changeAction"type="radio"name="tt"value="Insert"div-id="insert"/> Insert
<divid="insert"class="changeable"></div><br/><inputclass="changeAction"type="radio"name="tt"value="Update"div-id="update"/> Update
<divid="update"class="changeable"></div><br/><inputclass="changeAction"type="radio"name="tt"value="Delete"div-id="delete"/> Delete
<divid="delete"class="changeable"></div><br/><inputclass="changeAction"type="radio"name="tt"value="Process"div-id="process"/> Process
<divid="process"class="changeable"></div><br/><inputtype="submit"></form>
Post a Comment for "How To Have Multiple Radio Buttons With Different Functionality?"