Блог

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

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

Может кто-нибудь сказать мне, что я делаю не так? Я использовал метод onclick в HTML, а затем создал функцию на своей странице Javascript.

HTML:

 <div id="compose-view">
        <h3>New Email</h3>
        <form id="compose-form"
        method="POST">
            {% csrf_token %}
            <div class="form-group">
                From: <input disabled class="form-control" value="{{ request.user.email }}">
            </div>
            <div class="form-group">
                To: <input id="compose-recipients" class="form-control">
            </div>
            <div class="form-group">
                <input class="form-control" id="compose-subject" placeholder="Subject">
            </div>
            <textarea class="form-control" id="compose-body" placeholder="Body"></textarea>
            <input type="submit" id="sendEmail" class="btn btn-primary"/>
        </form>
    </div>
  

JS:

 const element = document.getElementById('sendEmail');
  element.addEventListener('click', function() {
    fetch('/emails', {
    method: 'POST',
    body: JSON.stringify({
      recipients: 'card51short@gmail.com',
      subject: "buglets",
      body: 'Hes a fat one'
    })
  })
  .then(response => response.json())
  .then(result => {
      // Print result
      console.log(result);
  });
  });
}
  

Хорошо, в таких случаях вам необходимо провести исследование вашего кода:

1. Проверьте fred , действительно ли это строка, и нет undefined . Кроме того, сделайте его явной константой

   const fred = document.querySelector('#compose-subject').value // changed
  console.log(fred); // new

  fetch('/emails', {
    method: 'POST',
    body: JSON.stringify({
      recipients: 'card51short@gmail.com',
      subject: fred,
      body: 'Hes a fat one'
    })
  })
  .then(response => response.json())
  .then(result => {
      // Print result
      console.log(result);
  });
  

2. Если все в порядке, выполните следующую проверку того, что возвращается выборкой:

   const fred = document.querySelector('#compose-subject').value

  fetch('/emails', {
    method: 'POST',
    body: JSON.stringify({
      recipients: 'card51short@gmail.com',
      subject: fred,
      body: 'Hes a fat one'
    })
  })
  .then(response => { // edited
    console.log(response); // new
    return response.json() // edited
  }) // edited
  .then(result => {
      // Print result
      console.log(result);
  });
  

К концу этого процесса вы должны найти то, что не работает

атрибут «value» возвращает неопределенное значение для тегов, отличных от входных. Попробуйте вместо этого использовать innerHTML:

 fred = document.querySelector('#compose-subject').innerHTML;
  

проверьте свое значение для fred с помощью cosole.log:

 console.log(fred);