<!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>