Отправка 2 форм отдельно через AJAX - Python Flask - PullRequest
0 голосов
/ 10 января 2019

Я пытаюсь отправить 2 отдельные формы через AJAX, но при отправке формы2 я получаю ошибку 500 неверных запросов. Мой HTML-код приведен ниже, но в основном моя страница представляет собой шаблон фляги, который работает следующим образом:

* Пользователь делает выбор

* Эти выборки затем публикуются с помощью кнопки отправки, называемой «кнопка» Значение «Вычислить доступные общие высоты».

* При этом выполняется некоторый SQL-запрос, чтобы определить список записей, которые помещаются во вновь сгенерированный <select id="mySelect" class="form-control" onchange="myFunction()"></select> Это сделано JS, который также указан ниже как MyJS.js

OAH.html

    <!DOCTYPE html>
    <html>
    <head>

    </head>
    <body>

      <p class="h2">XXX</p>
      <form method="post" id="form1">
        <fieldset>
      </div>
  <div class="col-sm-3">




<span style="float:left"><label>Overall Height</label></span>
              ///my inputs, various selects etc ///

            <div id="response">
              <!-- Empty element until form submitted-->
            </div>

            <p id="ApertureHeight"></p>
            <p id="ApertureHeightBelowPelmet"></p>
            <p id="ApertureHeightUnderRoofSticks"></p><br>
            <p id="OverallWidth"></p>
            <p id="RearAppWidth"></p>
            <p id="RearPillarNS"></p>
            <p id="OAH"></p>

      </div>
        </fieldset>
      <script src="/static/js/MyJS.js"></script>

      </form>

        <form method="post" id="form2">


          <div class="col-sm-3">
            <label>
                  <span style="float:left"><input type="text" id="myText" value=""></span>
                       </label>
              <br>
        <input type="button" value="Click Me!" onclick="submitForms()" />

          </div>
          </form>    
    </body>
    </html>

form2 имеет кнопку "Click Me!" которая вызывает функцию, которая отправляет форму 2.

submitForms = function(){ document.getElementById("form2").submit(); };

MyJS.js

    $("#form1").on("submit", function(event) {
  $targetElement = $('#response');
  event.preventDefault();
  // Perform ajax call
  //
  console.log("Sending data: " + $(this).serialize());
  $.ajax({
    url: '/OAH',
    data: $('form').serialize(),
    datatype: 'json',
    type: 'POST',
    success: function(response) {
      // Success handler
      var TableTing = response["table"];
      $("#TableThing").empty();
      $("#TableThing").append(TableTing);
      for (key in response) {
        if (key == 'myList') {
          // Add the new elements from 'myList' to the form
          $targetElement.empty();
          select = $('<select id="mySelect" class="form-control" onchange="myFunction()"></select>');

          response[key].forEach(function(item) {
            select.append($('<option>').text(item));
          });
          $targetElement.html(select);
        } else {
          // Update existing controls to those of the response.
          $(':input[name="' + key + '"]').val(response[key]);
        }
      }
      return myFunction()
      // End handler
    }
    // Proceed with normal submission or new ajax call
  })
});



submitForms = function(){
    document.getElementById("form2").submit();
};
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
$("#form2").on("submit", function(event) {

  event.preventDefault();
  console.log("Sending data: " + $(this).serialize());
  $.ajax({
    url: '/OAH',
    data: $('#form2').serialize(),
    datatype: 'json',
    type: 'POST',
    success: function(response) {
      return myFunction()
      // End handler
    }
    // Proceed with normal submission or new ajax call
  })
});
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function myFunction() {
  var FifthWheel = document.getElementById("FifthWheelHeight").value;
  var NeckDepth = document.getElementById("NeckDepth").value;
  var CantRailDepth = document.getElementById("CantRailDepth").value;
  var RearTensioner = document.getElementById("RearTensioner").value;
  var OAH = document.getElementById("mySelect").value;
  if (CantRailDepth = 115) {
    var PelmetDim = 100;
  } else {
    PelmetDim = 75;
  }
  var ApertureHeight = Number(OAH) - Number(FifthWheel) - Number(NeckDepth) - Number(CantRailDepth);
  var ApertureHeightBelowPelment = Number(ApertureHeight) - Number(PelmetDim);
  var ApertureHeightUnderRoofSticks = Number(OAH) - Number(FifthWheel) - Number(NeckDepth) - 35;

  document.getElementById("ApertureHeight").innerHTML = "Aperture below Cantrail = " + ApertureHeight + "mm";
  document.getElementById("ApertureHeightBelowPelmet").innerHTML = "Aperture below pelmet = " +
    ApertureHeightBelowPelment + "mm";
  document.getElementById("ApertureHeightUnderRoofSticks").innerHTML = "Aperture below roof sticks = " +
    ApertureHeightUnderRoofSticks + "mm";
  document.getElementById("OverallWidth").innerHTML = "Overall Width = 2548mm (2550mm on spec)";
  document.getElementById("OAH").innerHTML = OAH;
  document.getElementById("myText").value = document.getElementById("OAH").innerHTML;
}

Мне нужно, чтобы эта форма отправлялась отдельно через AJAX без обновления страницы, так как мне нужен массив JSON, чтобы можно было рассчитать дополнительные данные, которые будут переданы в Python Flask. Моя проблема в том, что я получаю неверный запрос при отправке формы2.

У кого-нибудь есть идеи о том, что я сделал неправильно?

1 Ответ

0 голосов
/ 10 января 2019

Я думаю, что вы используете один и тот же URL-адрес конечной точки, чтобы попытаться обработать 2 разных запроса. Вторая форма не отправляет правильные данные, и вы получаете ошибки сервера. Попробуйте создать другую конечную точку на вашем сервере фляги python для обработки form2 и значения поля myText.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...