提交按钮刷新页面

I'm working on a footer generator. Which looks like this:

This "preview" button has 2 functions function 1 is posting the values that the user entered in the black box like this :

and the second function is to show me a button(which is hidden by default with css) called "button-form-control-generate" with jquery like this:

$("button.form-control").click(function(event){
    $("button.form-control-generate").show();
});

Now here comes my problem:

If i click on preview it refreshes the page.. so if i click on preview it shows the hidden button for like 1 second then it refreshes the page and the button goes back to hidden. So i tried removing the type="submit" but if i do that it wont post the entered data like it did in image 2 it will show the hidden button though, but because the submit type is gone it wont post the entered data on the black box.

Here is my code:

<form class ="form" method="post">

            <h3>Select your trademark</h3>

                <select class="form-control" name="trademark" action="">
                    <option></option>
                    <option>©</option>
                    <option>™</option>
                    <option>®</option>
                </select>

            <h3>Your company name</h3>

            <input class="form-control" type="text" name="companyName" placeholder="Your company name" />

                <br/>
                <br/>

            <button class="form-control" type= "submit" name="submit">
                Preview
            </button>
            <br/>
            <button class="form-control-generate"name= "submit">
                Generate
            </button>
        </form>




<!-- script for the preview image -->

        <div id = "output">
        <?php

        function footerPreview ()
        {
            date_default_timezone_set('UTC');

            $trademark = $_POST["trademark"];

            $company = $_POST["companyName"];

            $date = date("Y");

            echo "<div id='footer_date'>$trademark $date $company </div>";
        }

        footerPreview();

        ?>

The jquery:

$("button.form-control").click(function(event){
    $("button.form-control-generate").show();
});

Already tried prevent default but if i do this the users entered data doesnt show in the preview box. Looks like preventdefault stops this bit from working:

<!-- script for the preview image -->

        <div id = "output">
        <?php

        function footerPreview ()
        {
            date_default_timezone_set('UTC');

            $trademark = $_POST["trademark"];

            $company = $_POST["companyName"];

            $date = date("Y");

            echo "<div id='footer_date'>$trademark $date $company </div>";
        }

        footerPreview();

        ?>

If you don't want to post the form you can use the preventDefault(); function.

$("button.form-control").click(function(event) {
  event.preventDefault();
  $("button.form-control-generate").show();
});

</div>

$("button.form-control").click(function(event) {
 event.preventDefault();
 setTimeout(function(){$("button.form-control-generate").show();},100);
 });

Try It Once

Submit your form as

$('.form').on('submit', function(e){
    $("button.form-control-generate").show();
    e.preventDefault();
    this.submit();
})

instead of using the click event. With button of type submit the submit() action is triggered automatically so you can show your button in the submit handler and then prevent the default action to refresh the page.

UPDATE:

Instead of using php you can do the same with jquery as well.

$('.form').on('submit', function(e){
  e.preventDefault();
   var date = new Date();
   date = date.getYear() + 1900;
   var data = $(this).serializeArray();
 
  var str = data[0].value + date + data[1].value;
  $('#output').text(str);
  $('.form-control-generate').show();
})

.form-control-generate {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class ="form" method="post">

            <h3>Select your trademark</h3>

                <select class="form-control" name="trademark" action="">
                    <option></option>
                    <option>©</option>
                    <option>™</option>
                    <option>®</option>
                </select>

            <h3>Your company name</h3>

            <input class="form-control" type="text" name="companyName" placeholder="Your company name" />

                <br/>
                <br/>

            <button class="form-control" type= "submit" name="submit">
                Preview
            </button>
            <br/>
            <button class="form-control-generate" name= "submit">
                Generate
            </button>
        </form>




<!-- script for the preview image -->

        <div id = "output"></div>
        

</div>

@ShubhamKhatri almost had it right

The problem is, he thought this was an on submit event, I don't believe it should be. I believe you have the type="submit" on the wrong button. Surely preview wouldn't submit the form? You want to submit on generate, no?

so a slight change to the markup - added an id to preview to make life simple

<button class="form-control" id="preview">
    Preview
</button>
<br/>
<button class="form-control-generate" type="submit" name="submit">
    Generate
</button>

and a slight modification to the code in @ShubhamKhatri answer

$("#preview").click(function(e) {
    e.preventDefault();
    var date = new Date();
    date = date.getYear() + 1900;
    var data = $('.form').serializeArray();

    var str = data[0].value + ' ' + date + ' ' + data[1].value;
    $('#footer_date').text(str);
    $('.form-control-generate').show();
});

et voilà