AJAX Call issues - no data passing (relatively inexperienced here!) - php

Question

I assume i am doing something really simply wrong here (to all you seasoned programmers), but forgive me i have spent hours and hours reading trying to understand how AJAX calls work...
My variables aren't making it to recordsale.php to be inserted into SQL table.
The javascript variables are displayed on the HTML page, so i know they contain data.
Can anyone offer some advice?
(any response knocking my ability will not be appreciated - I AM TRYING :) )
My form submit button in html looks like this
<form action="recordsale.php" method="post">
<input type="image" src="assets/CompleteSale.png" alt="Submit"> </form>
My AJAX Post Function:
$( "#submit" ).submit(function( event ) {
alert("hello");
// Jquery code for making AJAX call to server side script
$.ajax({
method: "POST",
url: "recordsale.php",
data: { adultqty: adultticketqty, concessionqty: concessionticketqty, studentqty: studentticketqty, childqty: childticketqty, programqty: programqty, totalsell: totalsaleprice }
})
//alert(adultqty + childqty)
});
Recordsale.php
<?php
$adultticketqty = $_POST['adultqty'];
$concessionticketqty = $_POST['concessionqty'];
$studentticketqty = $_POST['studentqty'];
$childticketqty = $_POST['childqty'];
$programqty = $_POST['programqty'];
$totalsaleprice = $_POST['totalsell'];
//include('phpsqlget.php');
/* Attempt MySQL server connection. Assuming you are running MySQL server with default setting (user 'root' with no password) */
$link = mysqli_connect("localhost", "root", "speedway", "speedwayticketsales");
// Check connection
if($link === false){ die("ERROR: Could not connect. " . mysqli_connect_error()); } // Attempt insert query execution
$sql = "INSERT INTO stdsalesrecords (qtyadulttickets, qtyconcessiontickets, qtystudenttickets, qtychildtickets, qtyprograms, totalsell) VALUES ($adultticketqty,$concessionticketqty,$studentticketqty,$childticketqty,$programqty,$totalsaleprice)";
if(mysqli_query($link, $sql)){
echo "Records inserted successfully."; }
else{ echo "ERROR: Could not able to execute $sql. "
. mysqli_error($link); } // Close connection mysqli_close($link);
?>

Answer 1

This is how i usually do my ajax submissions. there are other ways of handling form submission.
Check out $(form).serialize() amongst others.
$( "#submit" ).submit(function( event ) {
var adultticketcty = $('selector').val();
//continue filling out the fields and mirror them in the below dataString.
var dataString = 'adultqty='+adultticketcty+'&concessionqty='+concessionticketqty;
//Check if you set the correct values in the datastring.
console.log(dataString);
$.ajax({
type: "POST",
url: "recordsale.php",
data: dataString,
success: function(data){
//check whatever is returned from recordsale.php
console.log(data);
}
});
});
then in your recordsale.php do this to see if anything is returned in your ajax success call:
$adultticketqty = $_POST['adultqty'];
$concessionticketqty = $_POST['concessionqty'];
echo $adultticketqty;
Not related to the question, but i wanna recommend checking out pdo queries to prevent sql injections etc.

Answer 2

solved my issue
had to write a function to write my JS Variables into hidden elements in the form
function save()
document.getElementById("qty").value = Aqty;
then add the hidden elements to my form
<form method="post" name="submit" id="submit" action="record.php" >
<input type="hidden" id="qty" name="qty" value="" >
<input type="submit" value="Submit" onclick="save();">
works a treat!