提交按钮刷新页面

Question

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();

        ?>

Answer 1

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>