提交页面但不刷新

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

        ?>

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

Answer 1

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>