Блог

Главная - Вопросы по программированию - Почему мой код Javascript запускается и сразу исчезает

Почему мой код Javascript запускается и сразу исчезает

#javascript #html #function #return

Вопрос:

Я написал коды ниже, чтобы отображать имена пользователей, когда пользователь вводит свое имя. Но имя появится и тут же исчезнет. Что случилось?

html-коды

 <div>
   <p id="names"></p>
</div>

<form method = "get" action = "">
   Enter first name: <input type = "text" id = "firstName"/>
   Enter last name: <input type = "text" id = "lastName"/>
   <input type = "submit" value = "submit" onclick = "return firstName_lastName();"/>
</form>

Код Javascript

 function firstName_lastName() {
   var firstName = document.getElementById('firstName').value;
   var lastName = document.getElementById('lastName').value;
   var names = document.getElementById('names');

  if (firstName == "" || lastName == "") {
   alert('Please fill in all the fields');
   return false; 
  } else {
    names.innerHTML = firstName   " "   lastName; 
   return true; 
}

Код работает, но имена появляются и немедленно исчезают.

Изменить: Код запускается, но при нажатии кнопки «Отправить» введенные имя и фамилия появляются в браузере и немедленно исчезают. Предупреждение также отлично работает, когда какое-либо или оба поля не заполнены.

Комментарии:

1. Я отредактировал сообщение и настроил браслет

2. По умолчанию отправка формы перезагружает страницу. Чтобы предотвратить это, используйте event.preventDefault() . Убедитесь, что функция обработчика событий получает event аргумент

Ответ №1:

кнопка отправки в основном представляет собой отправку формы на сервер и перезагрузку страницы при нажатии, но если вы хотите проверить ее перед отправкой, вы можете использовать preventDefault ее для остановки перезагрузки страницы, см. пример ниже

 function firstName_lastName(event) {
    event.preventDefault() // to stop submit
    var firstName = document.getElementById('firstName').value;
    var lastName = document.getElementById('lastName').value;
    var names = document.getElementById('names');

    if (firstName == "" || lastName == "") {
        alert('Please fill in all the fields');
    }
    names.innerText = `${firstName} ${lastName}` 
} 
 <div>
   <p id="names"></p>
</div>

<form method = "get" action = "">
   Enter first name: <input type = "text" id = "firstName"/>
   Enter last name: <input type = "text" id = "lastName"/>
   <input type = "submit" value = "submit" onclick = " firstName_lastName(event);"/>
</form>

Комментарии:

1. Спасибо Амиру Рахману и Юсафу. Событие preventDefault сработало. Но с помощью параметра preventDefault сможет ли форма отправляться, если есть серверная часть? Кроме того, что делать, если я хочу, чтобы имя оставалось там даже после перезагрузки?

2. используйте ajax для отправки без перезагрузки страницы, это предпочтительный способ, так как никому не нравится перезагрузка страницы для отправки формы

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

4. есть библиотеки, такие как jQuery , Аксиос, чтобы делать операции «Аякс» делает все «с нуля» немного длинноват, я бы предложил использовать jQuery $.метод POST для отправки формы, он является наиболее простой и удобной для пользователя, и если вы не хотите использовать библиотеки можно использовать принести взгляните на это для приведи пример developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

5. если этот ответ решит вашу проблему, подумайте о том, чтобы принять его

Метки: