Как предотвратить рекурсивную активацию кнопки отправки формы при попытке активировать один раз с помощью JavaScript? - PullRequest
Новая
       6

Как предотвратить рекурсивную активацию кнопки отправки формы при попытке активировать один раз с помощью JavaScript?

0 голосов
/ 25 августа 2018

Я создаю приложение Django, которое извлекает данные из базы данных на основе формы. Форма представляет собой просто набор контрольных списков. Затем эти данные используются для создания графика с использованием Bokeh.

Приложение работает. То есть, когда нажата кнопка отправки, приложение принимает пользовательский ввод, собирает соответствующие данные и строит график. Моя проблема в том, что я хочу, чтобы форма была отправлена ​​один раз, как только страница загрузится, чтобы отобразить график с настройками по умолчанию. Текущее поведение таково, что график не отображается, пока пользователь не нажмет кнопку отправки.

Вот абстрактный пример того, что своего рода воспроизводит мою проблему. Пожалуйста, обратите внимание, что моя проблема не совсем воспроизводится этим примером, потому что моя неопытность с html / javascript затрудняет сделать html / javascript эквивалентом того, что делает Django. Однако вот попытка. Просто имейте в виду, что график должен создаваться динамически при нажатии кнопки - какой график отображается, зависит от ввода пользователя. 

<div id='form-container'>
  <form action='.' name='ctrl-panel' method='post' class='form-check-inline'>
    <ul>
      <li>
        <label id="label1">
        <input id='label1' type='checkbox' name='checkbox1' value='A' checked='checked'>Checkbox 1
      </label>
      </li>

      <li>
        <label id="label2">
        <input id='label2' type='checkbox' name='checkbox2' value='A'>Checkbox 2
      </label>
      </li>
    </ul>

  </form>

  <input type="submit" value="Submit" class="btn" id="submit-btn" form="ctrl-panel">

</div>

<script>
  window.onload = function clickBtnOnWindowLoad() {
    var btn = document.getElementById('submit-btn');
    btn.click();
  }
</script>

Проблема в том, что action в форме настроено на текущую страницу ., и код javascript запускается при загрузке страницы. Поэтому я получаю рекурсивную активацию кнопки отправки, так как кнопка отправки загружает текущую страницу, а при загрузке текущей страницы нажимается кнопка отправки.

Есть ли у кого-нибудь совет, чтобы я мог отправить форму один раз и только один раз с настройками по умолчанию при загрузке страницы.

Ответы [ 2 ]

0 голосов
/ 25 августа 2018

Я далеко от Джанго, но по логике есть два пути решения этой проблемы:

  1. Из бэкэнда определить, загружена ли страница в первый раз (без каких-либо запрошенных данных) или нет. Если да - отображать форму с помощью скрипта, иначе не отображать форму;
  2. Измените POST на GET, чтобы все отправленные значения добавлялись в строку запроса к URL-адресу. Затем, если в URL есть какой-либо запрос (который может быть обнаружен с помощью location.search, не запускайте скрипт:

(как-то так) 

<script>
    window.onload = function clickBtnOnWindowLoad() {
        var btn = document.getElementById('submit-btn');
        if (!location.search)
            btn.click()
    }
</script>

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

0 голосов
/ 25 августа 2018

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

если вы все еще хотели бы сохранить его таким образом, вы можете сделать выражение if следующим образом: 

var x = 0:  
If x == 0  //when page is loaded
  DO NOTHING  
  x = x + 1
else if x > 0  //because the page is loaded and x is now 1
  DO THE CODE WHEN CLICKING BUTTON

Отказ от ответственности в настоящее время программирую на python, и это было какое-то время с тех пор, как я использовал javascript, поэтому форматирование не может быть оптимальным, это всего лишь пример

...