Unable to send POST value using AJAX - php

Question

I have two seperate files, one bargraph.html, and the other data.php.
Bargraph.html is as follows:
<form method="POST" name="dataform" action="">
<select name="data1" id="data1-value">
<option value="DateRecorded">DateRecorded</option>
<option value="InletVoltage">InletVoltage</option>
<option value="InletCurrent">InletCurrent</option>
<option value="ActivePower">ActivePower</option>
<option value="PowerFactor">PowerFactor</option>
<option value="SystemID">SystemID</option>
</select>
<select name="data2" id ="data2-value">
<option value="DateRecorded">DateRecorded</option>
<option value="InletVoltage">InletVoltage</option>
<option value="InletCurrent">InletCurrent</option>
<option value="ActivePower">ActivePower</option>
<option value="PowerFactor">PowerFactor</option>
<option value="SystemID">SystemID</option>
</select>
</form>
<script type="text/javascript">
$('#data1-value').change(function(){
var data1Value = $(this).val();
$('#data2-value').change(function(){
var data2Value = $(this).val();
$.ajax({
type: 'post',
url: 'data.php',
dataType: 'html',
data: {data1, data2: data1Value, data2Value},
success:function(data){
alert(data);
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError);
},
complete: function(){
}
});
})});
</script>
A section of data.php is as follows:
if (isset($_POST['data1'])) {
$opp1 = $_POST['data1'];
$opp2 = $_POST['data2'];
} else {
$opp1 = 'SystemID';
$opp2 = 'ApparentPower';
}
$sql = "SELECT $opp1, $opp2 FROM RaritanMachineDataa";
In my bargraph.html I have two drop down menus. I want the options selected from the drop down menu to be sent using AJAX to my data.php file to perform a select statement on my database.
Currently when I run my code, it's returning an error
Uncaught ReferenceError: data1 is not defined
And this is pointing to line 53:
url: 'data.php',
Could someone give me some assistance on this please as I do not know how to fix this.
UPDATE: (Code below):
<script type="text/javascript">
$('#dataform').submit(function(e){
var data1Value = $("#data1").val();
var data2Value = $("#data2").val();
$.ajax({
type: 'post',
url: 'data.php',
dataType: 'html',
data: {data1, data1Value, data2: data2Value},
success:function(data){
alert(data);
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError);
},
complete: function(){
}
});
})});
</script>
Returning error:
Uncaught SyntaxError: Unexpected token }
On line (at the 2nd last line)
})});
I have tried removing the bracket, and curly bracket but cannot seem to get it to run. What have I done wrong? Thanks for the assistance
UPDATE (Submit button not POSTING data):
<option value="PowerFactor">PowerFactor</option>
<option value="SystemID">SystemID</option>
</select>
<input type="submit" name="submit" value="Submit">
</form>
<script type="text/javascript">
$('#dataform').submit(function(e){
var data1Value = $("#data1").val();
var data2Value = $("#data2").val();
$.ajax({
type: 'post',
url: 'data.php',
dataType: 'html',
data: {data1, data1Value, data2: data2Value},
success:function(data){
alert(data);
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError);
},
complete: function(){
}
});
e.preventDefault();
});

Answer 1

Your Error is here:
$.ajax({
type: 'post',
url: 'data.php',
dataType: 'html',
data: {data1, data2: data1Value, data2Value}, <-- Your error is here
Change this line to:
data: {data1: data1Value, data2: data2Value}
Also I've just noticed that you are doing this
('#data1-value').change(function(){
var data1Value = $(this).val();
$('#data2-value').change(function(){
var data2Value = $(this).val();
I don't believe that $('#data2-value').change is ever getting called. I suggest you handle the submission of the form after both values have been set!!!
With #Devpro comment, your dropdown menus now need to have an assigned id in order for this submit function to work
HTML
<select name="data1" id="data1-value"> to <select id="data1" name="data1" id="data1-value">
<select name="data2" id ="data2-value"> to <select id="data2" name="data2" id ="data2-value">
JQuery
$('#dataform').submit(function(e) {
var data1Value = $("#data1").val();
var data2Value = $("#data2").val();
//ajax submit with my edits
$.ajax....
e.preventDefault(); //prevent page refresh.
});