Полимерная железная форма - отключить отправку? - PullRequest
Новая
       7

Полимерная железная форма - отключить отправку?

0 голосов
/ 08 мая 2018

Я использую iron-form и пытаюсь POST файл на (в настоящее время локальный) сервер. У меня есть две кнопки: одна для отправки файла и одна для отмены. У меня проблема с отменой. Вот форма: 

<form  is="iron-form" action="http://localhost:7733/receivedoc" id="restForm" method="post" >
  <table class="starter-inputs">
    <tr><td>
    <px-file-upload 
      id="uploadComponentId"
      message="Drag and drop files here, or click the button below." 
      multiple=false 
      accept=".xls,.xlsx">
    </px-file-upload>
    </td></tr>
    </table>
    <button class="btn btn--large btn--icon" id="saveDataSetButton">
      <i class="fa-briefcase">Generate Pacing File</i>
    </button>
    <button class="btn btn--large btn--icon" id="cancelDataSetButton">
      <i class="fa-briefcase">Cancel</i>
    </button>
    <div class="output"></div>
  </form>

cancelDataSetButton обрабатывается как: 

this.$.cancelDataSetButton.addEventListener('click', function() {
  console.log('restForm.cancelDataSetButton click')
  restForm.reset();
  restForm.querySelector('.output').innerHTML = 'Operation cancelled.';
});

ОДНАКО, так как По умолчанию собственный элемент (или тип ввода = "submit") отправит эту форму. , POST запускается независимо. Как я могу предотвратить использование кнопки «Отмена» POST ing?

1 Ответ

0 голосов
/ 09 мая 2018

это хороший вопрос.

Несколько вещей, которые я хотел бы выделить здесь ...

Прежде всего, давайте обновим некоторые основы, касающиеся спецификации HTML:

1) <button> без атрибута type будет действовать как type=submit как атрибут по умолчанию, поэтому обе ваши кнопки отправят форму.

2) <button> поддерживает type="reset", который сбросит все ваши поля в начальные значения (например, очистит их), и не отправит форму , поэтому для этого вообще не требуется код обработчика JS.

В целом, я бы порекомендовал внести некоторые корректировки в ваш HTML-код, относящиеся к блоку кнопок: 

<button type="submit" class="btn btn--large btn--icon" id="saveDataSetButton">
    <i class="fa-briefcase">Generate Pacing File</i>
</button>
<button type="reset" class="btn btn--large btn--icon" id="cancelDataSetButton">
    <i class="fa-briefcase">Cancel</i>
</button>

Обратите внимание, что для cancelDataSetButton код JS не требуется (для очистки поля), и вы можете удалить весь прослушиватель событий:

this.$.cancelDataSetButton.addEventListener('click', function() { и т. д.

Некоторые ссылки, чтобы наверстать упущенное: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

...