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>