Почему созданная функция не работает.?

Я работал над проектом библиотеки и над ним, когда человек нажимает кнопку добавления Javascript и должен печатать в консоли «эй, здорово, что вы отправили форму», и он не работает. Пожалуйста, помогите с этим.

HTML

<form id="libraryform">
  <div class="form-group row">
    <label for="bookname" class="col-sm-2 col-form-label">name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="bookname" placeholder="book name pls">
    </div>
  </div>
  <div class="form-group row">
    <label for="author" class="col-sm-2 col-form-label">author</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="author" placeholder="author pls ">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">genre of book</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="type" id="fiction" value="fiction" checked>
          <label class="form-check-label" for="fiction">fiction</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="type" id="programming" value="programming">
          <label class="form-check-label " for="programming">computer programming</label>
        </div>
        <div class="form-check ">
          <input class="form-check-input" type="radio" name="type" id="cooking" value="cooking">
          <label class="form-check-label" for="cooking">cooking</label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" id="librarysubmit" class="btn btn-primary">add book</button>
    </div>
  </div>
</form>

и код Javascript здесь:

let librarysubmit = document.getElementById("librarysubmit");
librarysubmit.addEventListener('submit', libraryformsubmit);
function libraryformsubmit() {
    console.log("hey great u have submitted the form ");
    e.preventdefault() 
    e.preventdefault() 
}

Всего 2 ответа


Вы используете событие отправить на кнопку. Вам необходимо прикрепить событие в форме.

подобно

document.getElementById("libraryform")

И ваша функция js недействительна, вы забыли событие params

function libraryformsubmit(e) {
  console.log("hey great u have submitted the form ");
  e.preventDefault() 
}

Есть две незначительные вещи, которые нужно изменить

1. Из

let librarysubmit = document.getElementById("librarysubmit");

в

let librarysubmit = document.getElementById('libraryform');

Потому что - отправить событие запускается в форме.

  1. измените e.preventdefault() на e.preventDefault(); Captialize D по умолчанию.

Демонстрационная ссылка: https://codepen.io/punith/pen/GRJpOrz?editors=1011


Есть идеи?

10000