Отображать сообщение на странице после отправки формы

У меня есть форма с двумя полями (для этого примера), которые я проверяю с помощью JavaScript, и если поля содержат данные, форма будет отправлена, когда пользователь нажмет кнопку «Отправить». Я использую iframe в теге формы для отправки вывода на ту же страницу.

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

function SubmitRentalForm()
{
	var bValid    = true;
	var sFirst     = document.getElementById("fname").value;
	var sLast     = document.getElementById("lname").value;
	
	if  ( (sFirst.trim() == "")   || (sLast.trim() == "") )
	{
	        bValid = false;
	        return bValid;
	}

	return bValid;
}

  <div class = "main">
      <form name = "RentalForm" action = "email-rental.php" method = "POST" onsubmit = "return SubmitRentalForm()" target = "myFrame">

      <table id = "form_corners_rental" border = "0" cellspacing = "5">
      <tr>
	<td>First Name</td>
	<td><input type = "text" id = "fname" name = "fname" size = "50" maxlength = "60" placeholder = "Enter First Name"  onblur = "ValidateField(name)" />
	<span id = "errorname" style = "font-size:9px;color:darkred;"></span>
	</td>

	<td>Last Name</td>
	<td><input type = "text" id = "lname" name = "lname" size = "50" maxlength = "60"  placeholder = "Enter Last Name"  onblur = "ValidateField(name)"  /></td>
       </tr></table>

     <div id = "Msg" style = "display:none">
      Thank you for your form submission.
      </div> 

     <br/><br/>
     <input id = "submit-btn-rental"  type = "submit" value = "Rent Now">
      </form>
</div>

<iframe name = "myFrame" width = "1" height = "1" style = "border:none"></iframe>

Я добавил тег div, но не знаю, как это сделать.

Может ли кто-нибудь указать мне правильное направление.

Вы хотите знать, как показать div id = "Msg", или вы спрашиваете, как подождать, чтобы показать div до окончания отправки, или вы спрашиваете, как сделать и то, и другое?

— 01.05.2018 19:18

javascript

01.05.2018 19:06

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Просто измените стиль div сообщения при отправке формы

function SubmitRentalForm()
{
  var msg =document.getElementById("Msg")
	var bValid    = true;
	var sFirst     = document.getElementById("fname").value;
	var sLast     = document.getElementById("lname").value;
	
	if  ( (sFirst.trim() == "")   || (sLast.trim() == "") )
	{
	        bValid = false;
	        return bValid;
	}
   msg.style.display = "inline-block"
	return bValid;
 
}

<div class = "main">
      <form name = "RentalForm" action = "email-rental.php" method = "POST" onsubmit = "return SubmitRentalForm()" target = "myFrame">

      <table id = "form_corners_rental" border = "0" cellspacing = "5">
      <tr>
	<td>First Name</td>
	<td><input type = "text" id = "fname" name = "fname" size = "50" maxlength = "60" placeholder = "Enter First Name"  />
	<span id = "errorname" style = "font-size:9px;color:darkred;"></span>
	</td>

	<td>Last Name</td>
	<td><input type = "text" id = "lname" name = "lname" size = "50" maxlength = "60"  placeholder = "Enter Last Name"  /></td>
       </tr></table>

     <div id = "Msg" style = "display:none">
      Thank you for your form submission.
      </div> 

     <br/><br/>
     <input id = "submit-btn-rental"  type = "submit" value = "Rent Now">
      </form>
</div>

<iframe name = "myFrame" width = "1" height = "1" style = "border:none"></iframe>

01.05.2018 19:27

Ответ принят как подходящий

Попробуй это

function submitForm() {
    if (checkFieldsValidation()) {
        document.getElementById("Msg").style.display = "inline-block";
    }
}

function checkFieldsValidation() {
	var sFirst     = document.getElementById("fname").value;
	var sLast     = document.getElementById("lname").value;
	
	if  ( (sFirst.trim() == "")   || (sLast.trim() == "") ) {
	        return false;
	}
	return true;
}

  <div class = "main">
      <form name = "RentalForm" action = "email-rental.php" method = "POST" onsubmit = "submitForm()" target = "myFrame">

      <table id = "form_corners_rental" border = "0" cellspacing = "5">
      <tr>
	<td>First Name</td>
	<td><input type = "text" id = "fname" name = "fname" size = "50" maxlength = "60" placeholder = "Enter First Name"  onblur = "ValidateField(name)" />
	<span id = "errorname" style = "font-size:9px;color:darkred;"></span>
	</td>

	<td>Last Name</td>
	<td><input type = "text" id = "lname" name = "lname" size = "50" maxlength = "60"  placeholder = "Enter Last Name"  onblur = "ValidateField(name)"  /></td>
       </tr></table>

     <div id = "Msg" style = "display:none">
      Thank you for your form submission.
      </div> 

     <br/><br/>
     <input id = "submit-btn-rental"  type = "submit" value = "Rent Now">
      </form>
</div>

<iframe name = "myFrame" width = "1" height = "1" style = "border:none"></iframe>

01.05.2018 19:54

Другие вопросы по теме

Не удалось запустить Javascript должным образом

Невозможно перейти к iframe

Привязка дополнительных всех параметров к обработчику событий

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

Магазин Vuex не определен в промежуточном программном обеспечении NUXT

Приложение XML: временная строка не работает

Первая вкладка активна по умолчанию при загрузке страницы

Вход в Angular Keycloak (тихий)

Отключить автозаполнение хромированного адреса

Как вставить строку в массив машинописного текста?

Отображать сообщение на странице после отправки формы

Ответы 2

Другие вопросы по теме

Похожие вопросы