.


Divya


jQuery submit form and then show results in an existing div


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery submit form and then show results in an existing div </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$('#selected').hide();
$('#button').click(function()
{
var price = $('#priceTag').val();
var cat = $('#Category').val();
var size = $('#Size').val();
$('#sprice').text(price);
$('#scat').text(cat);
$('#ssize').text(size);
$('#selected').slideDown();
});
});
</script>
</head>
<body>
<table>
<tr>
<td>Price</td>
<td>
<select id='priceTag'>
<option value='p1'>price 1</option>
<option value='p2'>price 2</option>
</select>
</td>
</tr>
<tr>
<td>Category</td>
<td>
<select id='Category'>
<option value='c1'>cat 1</option>
<option value='c2'>cat 2</option>
</select>
</td>
</tr>
<tr>
<td>Size</td>
<td>
<select id='Size'>
<option value='s1'>size 1</option>
<option value='s2'>size 2</option>
</select>
</td>
</tr>
</table>
<button id='button'>Submit</button>
<div id='selected'>
<table cellpadding="5" border='1'>
<tr>
<td>Price:</td>
<td id='sprice'></td>
</tr>
<tr>
<td>Category:</td>
<td id='scat'></td>
</tr>
<tr>
<td>Size:</td>
<td id='ssize'></td>
</tr>
</table>
</div>
</body>
</html>

Run it yourself

Demo

Price
Category
Size
Price:
Category:
Size:


.