Нажмите кнопку в той же HTML структуре? - PullRequest
Новая
       15

Нажмите кнопку в той же HTML структуре?

1 голос
/ 01 апреля 2020

Когда в текстовом поле нажата клавиша возврата, я пытаюсь предотвратить разрыв строки и вместо этого нажимаю кнопку сохранения.

У меня есть несколько форм с одинаковыми макетами. Я попытался выбрать textarea с помощью .comment-form textarea, затем мне нужно нажать :button[value="Save"] под тем же .comment-form, что и textarea.

Я также включил свой тест jQuery, это останавливает разрыв строки, но не нажимает кнопку. Он также не различает, когда загружено несколько форм. Я также попытался использовать parents, чтобы найти .comment-form, но это также не сработало. 

jQuery(document).ready(function($) {
  $('.comment-form textarea').keypress(function(e) {
    if (e.which == 13) {
      e.preventDefault();
      jQuery(this).blur();
      jQuery(':button[value="Save"]').focus().mousedown();
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="comment-wrapper">
  <form class="comment-form">
    <div class="inner-comment-form">
      <div class="row">
        <div class="col-1">...</div>
        <div class="col-11 ">
          <div class="form-group">
            <label>Comment </label>
            <div class="form-textarea-wrapper">
              <textarea class="form-textarea" placeholder="Comment"></textarea>
            </div>
          </div>
        </div>
      </div>
      <input name="token">...</input>
      <input name="form-id">...</input>
      <input name="access-id">...</input>
      <div class="author form-group">...</div>
      <div class="form-actions form-wrapper form-group" id="edit-actions">
        <button type="submit" value="Save" class="btn btn-success">Save</button>
        <button type="submit" value="Cancel" class="btn btn-default">Cancel</button>
      </div>
    </div>
</div>

1 Ответ

0 голосов
/ 01 апреля 2020

Вам не нужно указывать указанную кнопку c и вызывать на ней событие. Чтобы сделать это, вы можете использовать closest() для получения родительского элемента form и submit() it.

Также стоит отметить, что есть некоторые другие проблемы, которые необходимо решить. Во-первых, <input /> элементы не имеют закрывающего тега, они являются самозакрывающимися. Кроме того, кнопка «Отмена» - type="submit", что кажется очень странным. Я бы предположил, что это должно быть сделано в type="button", чтобы не сохранял данные в форме (что является основной целью отмены действия). Наконец, в вашем HTML отсутствует тег </form>, но я думаю, это был просто недосмотр при создании вопроса.

С учетом всего сказанного попробуйте следующее: 

jQuery($ => {
  $('.comment-form textarea').on('keypress', function(e) {
    if (e.which == 13) {
      e.preventDefault();
      $(this).closest('form').submit();
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="comment-wrapper">
  <form class="comment-form">
    <div class="inner-comment-form">
      <div class="row">
        <div class="col-1">...</div>
        <div class="col-11 ">
          <div class="form-group">
            <label>Comment </label>
            <div class="form-textarea-wrapper">
              <textarea class="form-textarea" placeholder="Comment"></textarea>
            </div>
          </div>
        </div>
      </div>
      <input name="token" />...
      <input name="form-id" />...
      <input name="access-id" />...
      <div class="author form-group">...</div>
      <div class="form-actions form-wrapper form-group" id="edit-actions">
        <button type="submit" value="Save" class="btn btn-success">Save</button>
        <button type="button" value="Cancel" class="btn btn-default">Cancel</button>
      </div>
    </div>
  </form>
</div>
...