How to run execute page in background using ajax?

Question

Hi all Im a new learner for web development.

I have a page with a form after user click the submit button, then button will submit the form content to the next page to execute and save into database.

So that, my page will go to another page to execute and return to the landing page.

Eg: index.php and exec.php

index.php:

<form name="g-form" action="gbtn-exec.php" method="post" class="goat-vote" onsubmit="return validategForm()">
<input type="text" name="g-product" placeholder="Brand / Product Name" style="-moz-border-radius: 5px; border-radius: 5px; padding-left:20px; opacity:.5; border:none; margin-left:110px; width:440px; height:38px; font-family:'Proxima Nova Rg';color:#000; font:1.6em;" />


<p class="g-question">Why you love it?</p>

<textarea name="g-reason" style="-moz-border-radius: 5px; border-radius: 5px; padding:5px; opacity:.5; border:none; margin-left:110px; width:450px; height:150px; font-family:'Proxima Nova Rg';color:#333; font-size:1em;"></textarea>

<input name="g-btn" class="vote-btn" type="submit" value="vote" style="margin-left:470px; cursor:pointer;"></form>

exec.php

if ($_POST["g-product"] && $_POST["g-reason"] != "" )
{
$gproduct = $_POST["g-product"];
$greason =  $_POST["g-reason"];

$insert ="INSERT INTO jovine.vote (vote_id ,product_name ,reason ,type) VALUES (NULL, '$gproduct', '$greason', 'goat')";
$result = mysql_query($insert,$con);
echo "<script>";
echo "alert('Thank you. Your vote has been recorded.');";
echo "window.location.href='index.php';";
echo "</script>";
}

My question is, how do I use ajax to run exec.php in background? Thanks!

Answer 1

As you tagged jQuery - simply send a HTTP request to the exec.php file:

$('.vote-btn').on('click', function() {
    $.ajax({
      url: "exec.php",
      data: { g-product: $('#g-product').val(), g-reason: $('#g-reasons').val() }
    }).done(function() {
      alert('Thank you. Your vote has been recorded.');
      window.location.href='index.php';
    });
});