I want to show form value in pop up window which is open after clicking submit button. how can i show form value in pop up window after clicking submit button. My Form is below
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<form name="example" action="" method="post">
<table width="257" border="1">
<tr>
<td>Name</td>
<td><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td>Father Name</td>
<td><input type="text" value="" name="fname" id="fname" /></td>
</tr>
<tr>
<td colspan="2"><center><input type="submit" name="submit" value="Show Value" /></center></td>
</tr>
</table>
</form>
</body>
</html>
Get data using input id and set form delay for submit and read javascript and jquery basic concept on w3 school
<html>
<head>
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<form name="example" action="" method="post" id="example">
<table width="257" border="1">
<tr>
<td>Name</td>
<td><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td>Father Name</td>
<td><input type="text" value="" name="fname" id="fname" /></td>
</tr>
<tr>
<td colspan="2"><center> <input type="button" id="btnShow" value="Submit" /></center></td>
</tr>
</table>
</form>
<div id="dialog" style="display: none" align="center">
<label>Name :</label><span id="show_name"></span>
<br>
<label>Father Name :</label><span id="show_fname"></span>
</div>
</body>
</html>
<script>
$(function () {
$("#dialog").dialog({
modal: true,
autoOpen: false,
title: "User Details",
width: 300,
height: 150,
});
$("#btnShow").click(function (e) {
e.preventDefault();
var name=$("#name").val();
var fname=$("#fname").val();
$("#show_name").html(name);
$("#show_fname").html(fname);
$('#dialog').dialog('open');
setTimeout(function() {
$("#example").submit();
}, 3000);
});
});
</script>
at first, your button is type="submit", but if you want just show values you need set type="button", and call some function in onclick attribute, what will show your values,like that:
button
<input type="button" name="button" value="Show Value" onclick="myFunction()"/>
and you need add js script for show values:
function myFunction(){
var name = document.getElementById("name").value;
var fname = document.getElementById("fname").value;
alert(name+' '+fname)
}