Блог

У меня есть веб-приложение, которое собирает некоторые данные в текстовые поля, а затем отправляет их в скрипт python, который выполняется с flask

Я нашел два способа отправки формы.

моя кнопка управляет сбором данных и отправкой их в python и выводит ответ из python, но не проверяет входные данные

моему тегу ввода удается проверить текстовые кнопки, но очищает форму и не удается отправить данные скрипту python для обработки.

Я хотел бы выполнить аспекты обеих кнопок, я хотел бы проверить, отправить данные в python и удалить данные.

Есть идеи, как объединить функцию отправки ввода и кнопку в один интерактивный элемент, который проверяет и отправляет?

Любая помощь, которую мы очень ценим

 {% extends "layout.html" %}
{% block body %}
<script type="text/javascript">


  $(function() {
    var submit_form = function(e) {


      $.getJSON($SCRIPT_ROOT   '/add_numbers', {
        nm_height: $('input[name="nm_height"]').val(),
        mn_material: $('input[name="mn_material"]').val(),
        lc_height: $('input[name="lc_height"]').val(),
        li6_enrichment_fraction: $('input[name="li6_enrichment_fraction"]').val()

      }, function(data) {
        $('#result').text(data.result);
        $('input[name=nm_height]').focus().select();
      });


      return false;
    };
    $('#calculate').bind('click', submit_form);
    //$("#myform").bind('ajax:complete', submit_form);
    $('input[type=text]').bind('keydown', function(e) {
      if (e.keyCode == 13) {
        submit_form(e);
      }
    });
    $('input[name=a]').focus();
  });
</script>


<p>
    <form  name="myform" id="myform" >
        <!--<form action="#" method='POST GET'>-->

  <p>Height of neutron multiplier pebble bed <input type="number" size="10" name="nm_height" min="10" max="140"  step="any"  required placeholder='10 to 120'> mm </p>
  <p>Neutron multiplier material <input type="text" size="10" name="mn_material" required placeholder='Be or Be12Ti'> Be or Be12Ti</p>
  <p>Height of lithium ceramic pebble bed  <input type="number" size="10"  name="lc_height"  min="10" max="140"  step="any" required placeholder='1 to 60'> mm </p>
  <p>Lithium 6 enrichment <input type="number" size="10" name="li6_enrichment_fraction"  min="0" max="100"  step="any" required placeholder='60 to 100'> %</p>


   <button id="calculate" type="submit">predict TBR</button>


   <input id="calculate" type="submit"></input>

  </form>

  TBR =<span id="result">?</span>
  <br>
  The TBR is quoted with a 95% <a href='http://www.stat.yale.edu/Courses/1997-98/101/confint.htm'> confidence interval </a>
<!--<p><a href=# id="calculate">calculate server side</a>-->
{% endblock %}
  

У меня такой же случай, и я решил использовать либо регулярные выражения при проверке, либо просто javascript. регулярное выражение более мощное и быстрое, но требует времени, javascript проще и медленнее. итак, договорились.

Позвольте серверной части обрабатывать проверку, используя что-то вроде WTFForms. Тогда все, о чем вам нужно беспокоиться, — это отправка данных в конечную точку API и обработка полученных ответов.

Избегайте выполнения какой-либо проверки строго во внешнем интерфейсе, потому что это небезопасно и с большей вероятностью может быть обмануто по сравнению с внутренней проверкой.

 {% extends "layout.html" %}

{% block body %}
<script type="text/javascript">
    $('#myform').on('submit', function() {
        var res = $.ajax({
            url: '/add-numbers'
            data: $(this).serialize(),
            ...
        });

        res.done(function(data) {
            // get successful calculation back...
        });

        res.fail(function() {
            // handle validation or calculation errors...
        });
    });
</script>
{% endblock %