Kevin Aartsen Kevin Aartsen - 11 months ago 39
PHP Question

AJAX Method not working

I have a form, when i click on submit i dont want the page to refresh, thats why i added AJAX to achieve this as you can see. The problem is that its not working.

<form id="formFooter" action="" method="post">

<h3>Select your trademark</h3>

<select class="form-control" name="trademark">



<h3>Your company name</h3>

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

<h3>Background Color</h3>

<input class="form-control" placeholder="(e.g. 00ff00)" type="text" name="backgroundColor">

<h3>Font Color</h3>

<input class="form-control" placeholder="(e.g. 00ff00)" type="text" name="fontColor">


<input class="form-control" placeholder="(Pick a value between 0 and 1 e.g. 0.3)" type="text" name="opacity">


<button class="form-control" id="run" type="submit" name="submit">Generate footer</button>
<div id="showData">&nbsp;</div>
<script type="text/javascript">

$('#run').on("click", function (e) {
var formData = new FormData($('#myForm')[0]);
url: "script.php",
type: 'POST',
data: formData,
success: function (data) {
cache: false,
contentType: false,
processData: false
return false;


Here is the script.php:

function footerPreview ()
echo "<h3>Preview:</h3>";
$trademark = $_POST["trademark"];
$company = $_POST["companyName"];
$date = date("Y");
$backgroundColor = $_POST['backgroundColor'];
$fontColor = $_POST['fontColor'];
$opacity = $_POST['opacity'];

echo "<div id='generated_footer_date' style='background-color:$backgroundColor; color:$fontColor; opacity: $opacity; ' >$trademark $date $company </div>";


// generate result for the head
function rawHead()
$head = htmlspecialchars('<head>
<meta charset="utf-8">
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
<link href="" rel="stylesheet">
echo "<pre><h4>Put this code inside your head tags</h4>$head</pre>";

// generate result for the body
function rawBody ()
$body1of5 = htmlspecialchars('<div id="footer_date">',ENT_QUOTES);
$body2of5 = $_POST["trademark"];
$body3of5 = date("Y");
$body4of5 = $_POST["companyName"];
$body5of5 = htmlspecialchars('</div>',ENT_QUOTES);
echo "<pre><h4>Put this code inside your body tags</h4>$body1of5 $body2of5 $body3of5 $body4of5 $body5of5 </pre>";

// generate result for the CSS
function rawCSS ()
$opacity = $_POST['opacity'];
$backgroundColor = $_POST['backgroundColor'];
$fontColor = $_POST['fontColor'];
<h4>Put this code in your websites stylesheet</h4>
font-family: 'Raleway', sans-serif;
right: 0;
bottom: 0;
left: 0;


// Generate eveything by one click



When i click on submit nothing happens. I want the script.php to be generate on the same page without refreshing.

Answer Source

You can make it very simple your Ajax Request as:

First of all no need to use FormDate here, because you don't have any file input in your <form>, so you can use serialize() data in your request as:

var formData = $("#myForm").serialize();

Second, you are just printing the HTML in your PHP, it means you just need to print html, so you can use dataType=HTML here as:

dataType: "html",

Third, one more thing will help you in debugging, add print_r($_POST) in your script.php file at top and check the console.

Modified Request:

        var formData = $("#myForm").serialize();
            type: "POST",
            url: "script.php",
            data:  formData,
            dataType: "html",
            success: function(response)
            beforeSend: function()
                //any loader
        return false;


From your comment: yeah it shows after submit. It shows this : Array ( [trademark] => [companyName] => [backgroundColor] => [fontColor] => [opacity] => ) – Kevin Aartsen 6 mins ago

Look at this array, you don't have submit in the result of $_POST so you have two options to change this:

1) You can use count() function for checking if(count($_POST) > 0).

2) Or you can use <input type='submit' name='submit'> instead of <button type='submit' name='submit'>