title: Submit page but dont refresh
body: <p>I'm working on a footer generator.
  Which looks like this: 
  <a href="https://i.stack.imgur.com/6DYZN.jpg" rel="nofollow"><img src="https://i.stack.imgur.com/6DYZN.jpg" alt="enter image description here"></a></p>
  
  <p>This "preview" button has 2 functions function 1 is posting the values that the user entered in the black box like this :</p>
  
  <p><a href="https://i.stack.imgur.com/4QCAp.jpg" rel="nofollow"><img src="https://i.stack.imgur.com/4QCAp.jpg" alt="enter image description here"></a></p>
  
  <p>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: </p>
  
  <pre><code>$("button.form-control").click(function(event){
      $("button.form-control-generate").show();
  });
  </code></pre>
  
  <p>Now here comes my problem: </p>
  
  <p>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 <code>type="submit"</code> 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.</p>
  
  <p>Here is my code: </p>
  
  <pre><code>&lt;form class ="form" method="post"&gt;
  
              &lt;h3&gt;Select your trademark&lt;/h3&gt;
  
                  &lt;select class="form-control" name="trademark" action=""&gt;
                      &lt;option&gt;&lt;/option&gt;
                      &lt;option&gt;©&lt;/option&gt;
                      &lt;option&gt;™&lt;/option&gt;
                      &lt;option&gt;®&lt;/option&gt;
                  &lt;/select&gt;
  
              &lt;h3&gt;Your company name&lt;/h3&gt;
  
              &lt;input class="form-control" type="text" name="companyName" placeholder="Your company name" /&gt;
  
                  &lt;br/&gt;
                  &lt;br/&gt;
  
              &lt;button class="form-control" type= "submit" name="submit"&gt;
                  Preview
              &lt;/button&gt;
              &lt;br/&gt;
              &lt;button class="form-control-generate"name= "submit"&gt;
                  Generate
              &lt;/button&gt;
          &lt;/form&gt;
  
  
  
  
  &lt;!-- script for the preview image --&gt;
  
          &lt;div id = "output"&gt;
          &lt;?php
  
          function footerPreview ()
          {
              date_default_timezone_set('UTC');
  
              $trademark = $_POST["trademark"];
  
              $company = $_POST["companyName"];
  
              $date = date("Y");
  
              echo "&lt;div id='footer_date'&gt;$trademark $date $company &lt;/div&gt;";
          }
  
          footerPreview();
  
          ?&gt;
  </code></pre>
  
  <p>The jquery:</p>
  
  <pre><code>$("button.form-control").click(function(event){
      $("button.form-control-generate").show();
  });
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&lt;!-- script for the preview image --&gt;
  
          &lt;div id = "output"&gt;
          &lt;?php
  
          function footerPreview ()
          {
              date_default_timezone_set('UTC');
  
              $trademark = $_POST["trademark"];
  
              $company = $_POST["companyName"];
  
              $date = date("Y");
  
              echo "&lt;div id='footer_date'&gt;$trademark $date $company &lt;/div&gt;";
          }
  
          footerPreview();
  
          ?&gt;
  </code></pre>
  
  <p>I heard this is possible with ajax, but i have no idea how in this case i already tried to look on the internet..</p>