Если остальное заявление не выполняется - PullRequest
Новая
       16

Если остальное заявление не выполняется

0 голосов
/ 27 апреля 2019

У меня есть контактная форма, которая включает в себя обязательные поля. Я написал заявление If else так, чтобы, если необходимые поля были пустыми, форма не была отправлена, а если она есть, форма будет отправлена ​​и очищена. Часть If выполняется, а другая - нет. Я все еще изучаю Javascript, поэтому я, вероятно, что-то сделал неправильно.

Я пытался смотреть на схемы предложений If else и вносить поправки в мины, но это не помогло. 

<form name="myForm" class="contact-form" 
action="mailto:someone@example.com" method="post" enctype="text/plain">
    <input type="text" name="yname" class="contact-form-text" 
placeholder="Your Name" required>
    <input type="email" name="yemail" class="contact-form-text" 
placeholder="Your Email" required>
    <textarea class="contact-form-text" name="ymessage" placeholder="Your 
Message" required></textarea>
    <input type="reset" class="contact-form-btn-reset" value="Reset">
    <input type="submit" class="contact-form-btn" onClick="return 
submitForm()" value="Send">

    <script>
      function submitForm() {
        var x = document.forms["myForm"][yname][yemail][ymessage].value;
        if (x == "") {
          alert("Please complete form.");
          return false;
        } else {
          alert("Your message has been sent.");
          var frm = document.getElementsByName('myForm')[0];
          frm.submit();
          frm.reset();
          return false;
        }
      }
    </script>
  </form>

Когда кнопка отправки нажата, я ожидаю, что форма будет отправлена ​​с предупреждением и очистить (если все поля заполнены), если я не заполню все поля, я ожидаю, что форма не будет отправлена.

Ответы [ 4 ]

2 голосов
/ 27 апреля 2019

Вы действительно должны использовать обработчик onSubmit

Как уже указывали люди в комментариях, перед отправкой формы уже есть встроенный способ проверить, все ли обязательные поля заполнены, что более элегантно для использования. Для этого вам нужно использовать обработчик onSubmit вместо onClick: 

<input type="submit" class="contact-form-btn" onClick="return submitForm()" value="Send">

Таким образом, вы не пишете никакого кода, чтобы проверить, правильно ли пользователь заполнил все поля.

Если вы все еще хотите использовать JavaScript:

Код, который вы написали, не работает должным образом, потому что в вашем пространстве нет переменной с именем yname. Если вы действительно хотите сделать эту проверку через javascript, вы можете сделать что-то вроде этого: 

var myForm = document.forms["myForm"];
if (!myForm["yname"].value || myForm["email"].value || myForm["ymessage"].value) {
  alert("Please complete form.");
  return false;
}
1 голос
/ 27 апреля 2019

У вас неправильный доступ к значению. Пожалуйста, посмотрите на мой ответ ниже: 

document.querySelector('form[name="myForm"]').onsubmit = ev => {
  let yName = document.querySelector('input[name="yname"]').value;
  if (yName) {
    alert("Your message has been sent.");
  } else {
    ev.preventDefault();
    alert("Please complete form.");
  }
};
<form name="myForm" class="contact-form" action="mailto:someone@example.com" method="post" enctype="text/plain">
  <input type="text" name="yname" class="contact-form-text" placeholder="Your Name" required>
  <input type="email" name="yemail" class="contact-form-text" placeholder="Your Email" required>
  <textarea class="contact-form-text" name="ymessage" placeholder="Your 
Message" required></textarea>
  <input type="reset" class="contact-form-btn-reset" value="Reset">
  <input type="submit" class="contact-form-btn" value="Send">
</form>
0 голосов
/ 27 апреля 2019

Скорее всего, ваша проблема в том, что код перестает выполняться на 

var x = document.forms["myForm"][yname][yemail][ymessage].value

Это потому, что yname, yemail и ymessage являются необъявленными переменными.

Вы можете получить доступ к объекту, используя этов нотации, но ключи, отправляемые оператору [], должны быть действительной строкой.

Я думаю, что вы, возможно, захотите сделать это 

var name = document.forms["myForm"]["yname"].value
var email = document.forms["myForm"]["yemail"].value
var message = document.forms["myForm"]["ymessage"].value

Также еще одна вещь, ввод данных в вашей формедолжен иметь id = "yname", id = "yemail" и т. д.

Пример: 

<input type="email" name="yemail" class="contact-form-text" placeholder="Your Email" required id="yemail">

Редактировать: Использование атрибутов имени допустимо, но, как я уже сказал выше,код перестает выполняться при первом использовании yname, это потому, что переменная не существует.

0 голосов
/ 27 апреля 2019

Когда ваш input пуст, веб-браузер запрещает отправку формы из-за атрибута required. Если вы удалите его, все должно работать так, как вы ожидаете. Я бы посоветовал вам использовать атрибут required и проверку формы HTML. Это намного проще, чем писать свой собственный.

...