Kevin Aartsen Kevin Aartsen - 1 month ago 9
Ajax Question

Submit page but dont refresh

I'm working on a footer generator.
Which looks like this:
enter image description here

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

enter image description here

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

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