Невозможно отправить значение POST, используя AJAX

Question

У меня есть два отдельных файла, один bargraph.html и другой data.php.

Bargraph.html выглядит следующим образом:

<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>

Раздел data.phpследующим образом:

if (isset($_POST['data1'])) {
    $opp1 = $_POST['data1'];
    $opp2 = $_POST['data2'];
} else {
    $opp1 = 'SystemID';
    $opp2 = 'ApparentPower';
}

$sql = "SELECT $opp1, $opp2 FROM RaritanMachineDataa";

В моем bargraph.html у меня есть два выпадающих меню.Я хочу, чтобы параметры, выбранные в раскрывающемся меню, были отправлены с помощью AJAX в мой файл data.php для выполнения оператора выбора в моей базе данных.

В настоящее время, когда я запускаю свой код, он возвращает ошибку

Uncaught ReferenceError: data1 is not defined

И это указывает на строку 53:

url: 'data.php',

Может ли кто-нибудь помочь мнеэто, пожалуйста, поскольку я не знаю, как это исправить.

ОБНОВЛЕНИЕ: (Код ниже):

<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>

Возвращаемая ошибка:

Uncaught SyntaxError: Unexpected token }

On-line (в2-я последняя строка)

})});

Я пытался снять скобу и фигурную скобку, но, похоже, не смог заставить ее работать.Что я сделал не так?Спасибо за помощь

ОБНОВЛЕНИЕ (кнопка «Отправить», а не данные ПОЗИЦИИ):

        <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

Ваша ошибка здесь:

  $.ajax({
    type: 'post',
    url: 'data.php',
    dataType: 'html',
    data: {data1, data2: data1Value, data2Value}, <-- Your error is here

Измените эту строку на:

 data: {data1: data1Value, data2: data2Value}

Также я только что заметил, что вы делаете это

('#data1-value').change(function(){
    var data1Value = $(this).val();
     $('#data2-value').change(function(){
        var data2Value = $(this).val();

Я не верю, что $('#data2-value').change когда-либо звонят.Я предлагаю вам обработать отправку формы после того, как оба значения были установлены !!!

С комментарием @Devpro теперь в выпадающих меню должен быть назначен идентификатор, чтобы эта функция отправки работала

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