Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.11.2017, 18:29
Новичок на форуме
Отправить личное сообщение для pavs Посмотреть профиль Найти все сообщения от pavs
 
Регистрация: 03.11.2017
Сообщений: 4

Добавление скрытых полей в форму для обратной связи(без php, jQuery)
Всем привет! Имеется форма обратной связи с проверкой полей
<meta http-equiv="Content-Type" content="text/html; charset="utf-8">
<head>
<html>

<script language="JavaScript">


function check(form)

{
	
 if((form.name.value=="")||(form.theme.value=="")||(form.message.value=="")||(form.e_mail.value==""))

 {

 alert("Вы заполнили не все поля!");

 return false;

 }

 else

 return true;

}

</script>
</head>

<script language="javascript">

function checkEmail(inputvalue){   
    var pattern=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
	
    if(pattern.test(inputvalue))

    {  

    return true; 

    }

     

    else

  {  

  alert("Вы неверно заполнили поле E-mail!");

  return false;

  }

}

</script>
<body>
<form name="contacts" method="POST" action="mailto:example@email.com?subject=Feedback" onsubmit="return check(contacts) ">

<center>
<script language="JavaScript">




</script>

<table class="name_fields">

  <tr>

      <td><div align="left">Ваше имя</div></td>

      <td><div align="left">

        <input type="text" name="name" size="40" onfocus="this.style.background='#e0f7bd'" onblur="this.style.background='#ffffff'">
		
        </div></td>

  </tr>
 
<tr>

      <td><div align="left"></div></td>
		
      <td><div align="left">

        <input type="hidden" name="browser" value=navigator.useragent >
		<input type="hidden" name="date" value=Date() >
		
        </div></td>

  </tr>
  <tr>

      <td><div align="left">Тема</div></td>

      <td><div align="left">

        <input type="text" name="theme" size="40" onfocus="this.style.background='#e0f7bd'" onblur="this.style.background='#ffffff'">
		
        </div></td>

  </tr>

  <tr>

      <td><div align="left">Сообщение</div></td>

      <td><div align="left">

        <textarea rows="10" name="message" cols="40" onfocus="this.style.background='#e0f7bd'" onblur="this.style.background='#ffffff'"></textarea>

        </div></td>

  </tr>

  <tr>

      <td><div align="left">Ваш E-mail</div></td>

      <td><div align="left">

        <input type="text" name="e_mail" size="40" onfocus="this.style.background='#e0f7bd'" onblur="this.style.background='#ffffff'">
		
        </div></td>

  </tr>

<td valign="top" colspan="2" align="center"><table border="0" width="80%">

  <tr>

      <td align="center">

      <p><font color="#008000"></font></td>

      <td align="center">

</td>

      <td align="center">

  </tr>

</table></td>

  <tr>

      <td colspan="2">

      <p align="center"><input type=submit value="Отправить" onClick="checkEmail(document.contacts.e_mail.value)">

</td>

  </tr>

</table>

</center>

</form>

  </body>

</html>

В результате открывается почтовый клиент. В поле почтового клиента "Кому" вводится "example@email.com", в поле почтового клиента "Тема" - "Feedback". В теле письма отображается информация из формы, которую заполняет пользователь на сайте. В теле письма почтового клиента также должны отображаться скрытые поля с данными о браузере пользователя и текущей датой и временем.
Задача была следующая: Создать форму для отправки обратной связи с проверкой полей и скрытыми полями о браузере и дате, времени(без использования php, jQuery, ajax и т.п.) используя html, javascript, почтовый клиент.
Мне осталось добавить скрытые поля с данными о браузере пользователя и текущей датой и временем(данные поля должны оказаться в теле письма в почтовом клиенте). У меня эти скрытые поля никак не получаются в том виде, в котором задумал
Пример того, что отображается у меня в теле письма почтового клиента:
name=TestName&browser=navigator.useragent&date=Dat e%28%29&theme=TestTheme&message=TestMessage&e_mail =example%40email.com
У меня navigator.useragent и Date() отображаются как текст. Куда я только не вставлял этот useragent...
Пример того, что должно быть в теле письма в почтовом клиенте:
name=TestName&date=Fri Nov 03 2017 17:54:57 GMT+0300 (RTZ 2 (зима))&browser=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.75 Safari/537.36&theme=TestTheme&message=TestMessage&e_mail= example%40email.com
ИТАК, Подскажите пожалуйста как мне добавить скрытые поля с данными и браузере пользователя, текущей датой и временем , чтобы отображалось корректно, примерно как в примере выше(без php, ajax. jQuery и т.п.) Заранее спасибо!
P.S. Если невозможно сделать эти поля скрытыми, то пусть они просто добавятся в тело письма.
Ответить с цитированием
  #2 (permalink)  
Старый 03.11.2017, 18:42
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

$(function() {
    $('#contacts').append('<input type="hidden" name="browser" value="'+navigator.userAgent+'"><input type="hidden" name="date" value="'+new Date()+'">') 
});


(RTZ 2 (зима)) - это от браузера зависит.
Ответить с цитированием
  #3 (permalink)  
Старый 03.11.2017, 18:56
Новичок на форуме
Отправить личное сообщение для pavs Посмотреть профиль Найти все сообщения от pavs
 
Регистрация: 03.11.2017
Сообщений: 4

1. А можно узнать в какое место кода это вставить?
2. $(function(){}) похоже на jQuery.
3. Если это так,то можно ли как-то без jQuery сделать?
Ответить с цитированием
  #4 (permalink)  
Старый 03.11.2017, 19:25
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от pavs
без использования php, jQuery
Да, проглядел. Можно конечно без jQuery. Можно разместить JS код в конце страницы, то есть перед закрывающим тегом body.

<script>
var form = document.getElementById('contacts'),
    agent = document.createElement('input'),
    date = document.createElement('input');

agent.type = date.type = "hidden"; 
agent.name = "browser";
agent.value = navigator.userAgent;
form.appendChild(agent);

date.name = "date";
date.value = new Date();
form.appendChild(date);    
</script>


PS. Имя формы не так и необходимо, пусть это будет id, именно по нему получается форма в коде.

Последний раз редактировалось laimas, 03.11.2017 в 19:30.
Ответить с цитированием
  #5 (permalink)  
Старый 03.11.2017, 20:04
Новичок на форуме
Отправить личное сообщение для pavs Посмотреть профиль Найти все сообщения от pavs
 
Регистрация: 03.11.2017
Сообщений: 4

Спасибо!
Вставил этот скрипт перед </body> (в строчку №165) и в строке
<form name="contacts" method="POST" action="mailto:example@email.com?subject=Feedback" onsubmit="return check(contacts) ">

(строка №60) поменял "name" на "id" и все заработало. Большое спасибо
Ответить с цитированием
  #6 (permalink)  
Старый 03.11.2017, 20:18
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

onsubmit="return check(this)"
Ответить с цитированием
  #7 (permalink)  
Старый 03.11.2017, 20:38
Новичок на форуме
Отправить личное сообщение для pavs Посмотреть профиль Найти все сообщения от pavs
 
Регистрация: 03.11.2017
Сообщений: 4

Теперь проверка email слетела.
Сообщение от laimas
onsubmit="return check(this)"
Не помогло) Пропускает варианты email вроде "adasdawd", "1"
Как бы починить проверку email?
Ответить с цитированием
  #8 (permalink)  
Старый 03.11.2017, 21:01
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

this в аргументе, это ссылка на форму, а в функции переменная form примет ее. Так будет правильнее, а не передача по id.

Что касается проверки:

это <input type=submit value="Отправить" onClick="checkEmail(document.contacts.e_mail.value )"> удалить, и все проверки производить в функции check(), которая и будет возвращать результат, соответственно отправляя форму или нет при ошибках.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Живой поиск JQUERY + AJAX + PHP + MYSQL dimi007 AJAX и COMET 2 22.07.2014 13:50
Работа для знатока jQuery virtualbrest Работа 0 24.07.2013 16:05
поиск классов внутри тега yozuul jQuery 24 14.06.2013 22:00
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 20:48
Как заполнить значения для скрытых полей из <input type=”text”> ? Surlik jQuery 2 13.11.2012 00:43