提交页面但不刷新

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

        ?>

I heard this is possible with ajax, but i have no idea how in this case i already tried to look on the internet..

if you have a type="submit" inside a form, it will submit the form by default. Try to use <input type="button" instead. Then you can use ajax on the button action, that will run without refreshing the page.

Here's an example of how to use ajax:

function sendAjax() {
  var root = 'https://jsonplaceholder.typicode.com';
$.ajax({
  url: root + '/posts/1',
  method: 'GET'
}).then(function(data) {
  $(".result").html(JSON.stringify(data))
});
}

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

<form>
  <input type="button" onclick="sendAjax()" value="callAjax" />
  <div class="result"></div>
  </form>

</div>

So you have to do $.ajax post request to the php. Something like this:

<script>
$('.form-control').click(function() {
    $.post(url, {data}, function(result) {
         footerPreview();
    }, 'json');
});
</script>

So footerPreview will be called when your php returns result.

Add

return false;

to your jQuery-function at the end. With this you can avoid the submit.

Then you need to add an ajax-function, which sends the data from your form to the php-script you already use.

This is just an example:

$.ajax({
            url: "YOUR-PHP-SCRIPT"
        }).done(function (content) {
            // ADD HERE YOUR LOGIC FOR THE RESPONSE
        }).fail(function (jqXHR, textStatus) {
            alert('failed: ' + textStatus);
        });

//add in javascript

function isPostBack()
{
   return document.referrer.indexOf(document.location.href) > -1;
}

if (isPostBack()){
   $("button.form-control-generate").show();
}

you can create an index.php:

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

            <h3>Select your trademark</h3>

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

            <h3>Your company name</h3>

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

                <br/>
                <br/>

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

<div class="output" id="output">

</div>


<script type="text/javascript">
    $('#generate').on('click', function(e){

        e.preventDefault();
        var companyname = $('#cn').val();
        var trademark = $('#tm').val();

        $.ajax({
            url: 'process.php',
            type: 'post'.
            data: {'company':companyname,'trademark':trademark},
            dataType: 'JSON',
            success: function(data){
                $('#output').append("<div id='footer_date'>"+data.trademark + " " + data.date + " " + data.company + " </div>");
            },
            error: function(){
                alert('Error During AJAX');
            }
        });

    })
</script>

and the process.php:

<?php

date_default_timezone_set('UTC');

$trademark = $_POST["trademark"];

$company = $_POST["company"];

$date = date("Y");

$array = array(
    'trademark' => $trademark,
    'company' => $company,
    'date' => $date
);

echo json_encode($array);

?>

Be sure that the index.php and the process.php will be under the same folder.. ex.public_html/index.php and public_html/process.php