html form wtih some inputs as JSON string - html

Question

I have a servlet expecting two parameters param1 and param2. param1 must have a 'value' as JSON string whereas param2 'value' is a normal input. i.e.
param1 = {"id":"userid","name":"username","status":"userstatus"}
param2 = add
My question is how can I achieve this using the following html form
User ID: <input type="text" name="id"><br>
User Name: <input type="text" name="name"><br>
User Status: <input type="radio" name="status" value="active">Active
<input type="radio" name="status" value="inactive">Inactive<br>
Action: <input type="radio" name="param2" value="add"> Add
<input type="radio" name="param2" value="update"> Update
<input type="radio" name="param2" value="delete"> Delete
<input type="radio" name="param2" value="get"> Get<br>
<button type="submit" >Submit</button>

Answer 1

You cannot achieve it with only html, you need to use some javascript also.
Here is the sample code. (there must be json javascript library)
User ID:
<input type="text" name="id" id="userId">
<br> User Name:
<input type="text" name="name" id="username">
<br> User Status:
<input type="radio" name="status" value="active" id="statusActive">Active
<input type="radio" name="status" value="inactive" id="statusInactive">Inactive
<br> Action:
<input type="radio" name="param2" value="add" id="param2Add"> Add
<input type="radio" name="param2" value="update" id="param2Update"> Update
<input type="radio" name="param2" value="delete" id="param2Delete"> Delete
<input type="radio" name="param2" value="get" id="param2Get"> Get
<br>
<form action="MyServlet" onsubmit="return assignedBeforeSubmit();">
<input id="param1" type="hidden" name="param1" value="" />
<input id="param2" type="hidden" name="param2" value="" />
<button type="submit">Submit</button>
</form>
<%-- this will not work without needful json lib --%>
<script src="json.js"></script>
<script src="json2.js"></script>
<script type="text/javascript">
function assignedBeforeSubmit() {
var param2Add = document.getElementById("param2Add").checked;
var param2Update = document.getElementById("param2Update").checked;
var param2Delete = document.getElementById("param2Delete").checked;
var param2Get = document.getElementById("param2Get").checked;
var param2 = (param2Add == true) ? document.getElementById('param2Add').value :
(param2Update == true) ? document.getElementById('param2Update').value :
(param2Delete == true) ? document.getElementById('param2Delete').value :
(param2Get == true) ? document.getElementById('param2Get').value : '';
var statusActive = document.getElementById("statusActive").checked;
var statusInactive = document.getElementById("statusInactive").checked;
var status = (statusActive == true) ? document.getElementById('statusActive').value :
(statusInactive == true) ? document.getElementById('statusInactive').value : '';
var jsonData = {
"id" : document.getElementById('userId').value,
"name" : document.getElementById('username').value,
"status" : status
};
document.getElementById('param1').value = JSON.stringify(jsonData);
document.getElementById('param2').value = status;
console.log('status '+status);
return true;
};
</script>