提交并显示页面的实际内容后隐藏表单

I want to create one product page , on nav-bar when user clicks on product before showing all product it should show one form and after filling form then and then only all products will be shown to the customer.

I am trying to do this in php but cant find solution ,

$('form').submit(function(e){
$('#output').hide();  
e.preventDefault();
// Or with: return false;        

});

instead of id #output i want to the actual page after submitting please help me to get this solve

You will have to use Ajax if you don't want to redirect the page after the submit.

Example of HTML:

<form>
    <!-- here your form -->
</form>
<div id="other-products"> <!-- this css style would be display: none; -->
    <!-- here you show your other products -->
</div>

Example of jQuery:

$("form").on("submit", function(e) {
    e.preventDefault();
    $.ajax({
        data: data,
        dataType: "json",
        url: "url/to/php/file.php",
        type: "POST",
        success: function(res) {
            $("#other-products").fadeIn();
        }
    });
});

In the URL you give, you will have to make your PHP scripts and then, return something if you needed (keep in mind the dataType you are giving). That something will be res in the example given.