Hi Vasanth057,
I have created a sample which full fill your requirement refer below code
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('[id*=btnSubmit]').click(function () {
var name = $('[id*=hfName]').val();
var city = $('[id*=hfCity]').val();
var country = $('[id*=hfCountry]').val();
//Like Below you can assign values to the hiddenfield.
$('[id*=lblName]').html(name);
$('[id*=lblCity]').html(city);
$('[id*=lblCountry]').html(country);
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
Name:-
</td>
<td>
<span id="lblName"></span>
<input type="hidden" value="John David" name="hfName" id="hfName" />
</td>
</tr>
<tr>
<td>
City:-
</td>
<td>
<span id="lblCity"></span>
<input type="hidden" value="Winipieg" name="hfCity" id="hfCity" />
</td>
</tr>
<tr>
<td>
Country:-
</td>
<td>
<span id="lblCountry"></span>
<input type="hidden" value="Canada" name="hfCountry" id="hfCountry" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="btnSubmit" value="Submit" id="btnSubmit" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Demo