Фильтр по:
  

  • Страница 1 из 3
  • 1
  • 2
  • 3
  • »
Модератор форума: likbezz  
Обратная связь в аякс. Автозаполнение полей скриптом. Script
Дата: Воскресенье, 29.04.2012, 03:14 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Форма обратной связи в аякс окне (юВинд / uWnd)



Спрашивает: Евгеша
Quote (Евгеша)
подскажите! как сделать чтоб в почтовой форме в одной из строк автоматом вписывалась тема(например название товара)


 
Дата: Воскресенье, 29.04.2012, 06:18 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Создаём форму, если нет, как обычно: ПУ » Почтовые формы » Управление почтовыми формами
Задаём поля и всё прочее.
По данной теме нас интересует атрибут «name» тех полей куда будет подставлять данные.

Для это, после того как сформировали форму, открываем шаблон и смотрим какие имена имеют нужные нам поля.





Например:
Quote (Code)
<table border="0" width="100%" id="table3" cellspacing="1" cellpadding="2">
<tr><td width="35%">E-mail отправителя <font color="red">*</font>:</td><td><input type="text" name="f1" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td>Адрес страницы:</td><td><input type="text" name="f3" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td>Название страницы:</td><td><input type="text" name="f4" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td>Тема письма:</td><td><input type="text" name="f2" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td colspan="2" align="center"><br /><input type="submit" value="Отправить сообщение"></td></tr>
</table>

В данном шаблоне:
За название страницы - название товара или заголовок, отвечает поле f4.
За адрес поле f3.

Нашли и запомнили, лучше записали.
...

Для того что бы это всё работало, данная форма должна где нибудь быть.
У меня, например, она находится на странице обратной связи.
То бишь, если у вас созданная форма еще не размещена, создаём страницу, как обычно, через ПУ » Редактор страниц » Создать страницу, и в фору добавления вставляем следующий код:
Code
<div id="msgForm3">
<p>С помощью формы обратной связи вы можете связаться с администратором сайта.</p>
<br>$MFORM_3$
</div>

Где:
<div id="msgForm3"> - порядковый номер блока с вашей формой, обычно равен номеру кода вставки формы.
$MFORM_3$ - код вставки формы.
...
На этом с шаблоном формы закончили.



Далее, в шаблоне товара, или в любом другом шаблоне, или на странице, добавляем следующий скрипт:
Code
<script type="text/javascript">
function mSensForm(el){
var fid=(el.rel)?el.rel:'msgForm',ftitle=(el.title)?el.title:'Обратная связь';
new _uWnd('myForm',ftitle,430,345,{align:'left',fadeclosetype:0,min:0,max:0,shadow:1,resize:0,oncontent:function(){
    $.get(el.href,{},function(data){
     $('#myForm').html($('#'+fid,data).html());
     if(window.setTitleUrl){setTitleUrl('myForm');};
    });
}},'<div id="myForm" style="width:405px;height:320px;"><img src="/_theme/_st/img/ico/ajax.gif" /></div>');
};
function setTitleUrl(cId){
if(!cId)return;
$('#'+cId+' input[name="f3"]').val(window.location.href.split('?')[0].split('#')[0]);
$('#'+cId+' input[name="f4"]').val(document.title);
};
</script>

Или:
Code
<script type="text/javascript" src="http://likbezz.ru/_source/_js/ext/mSensForm.js"></script>
<script type="text/javascript">
function setTitleUrl(cId){
if(!cId)return;
$('#'+cId+' input[name="f3"]').val(window.location.href.split('?')[0].split('#')[0]);
$('#'+cId+' input[name="f4"]').val(document.title);
};
</script>

Где:
Внимание важно
$('#'+cId+' input[name="f3"]') - ваше имя поля адреса, в данном случае «f3»
$('#'+cId+' input[name="f4"]') - ваше имя поля названия страницы, в данном случае «f4»
...

Если, данный скрипт используется часто или на многих страницах, и форма одна и та же - то бишь поля не меняются, лучше его поместить в отдельный файл и вставлять просто ссылкой:
Code
<script type="text/javascript" src="http://likbezz.ru/_source/_js/ext/mSensForm_f3.js"></script>


Можете скачать, отредактировать имена полей - они должны соответствовать вашим, и пользовать )
...

Ссылка на открытие окна вставляется как обычно, по месту, в виде ссылки:
Code
<p><a rel="msgForm3" title="Написать администратору" href="/index/0-3" onclick="mSensForm(this,1);return false;"><b>Написать администратору</b></a></p>

Или кнопки:
Code
<p><a rel="msgForm3" title="Отправить сообщение" href="/index/0-3" onclick="mSensForm(this,1);return false;"><b><input value="Отправить сообщение" type="button" /></b></a></p>

Или картинки
Code
<p><a rel="msgForm3" title="Заказать товар по почте" href="/index/0-3" onclick="mSensForm(this,1);return false;"><img src="/_example/_img/_button/but_1.png" width="161" height="23" alt="" /></a></p>

Где:
Внимание, важно
rel="msgForm3" - ID блока с формой, который вы вставляли в форму добавления на странице обратной связи.
onclick="mSensForm(this,1); - если ставите единицу, то будет выполняться функция заполнения.
onclick="mSensForm(this,0); - если ставите ноль, то не будет.
onclick="mSensForm(this); - если ничего не ставите, тоже не будет.
..

Пример всего это. Вариант №1
Пример всего это. Вариант №2
....

Прикрепления: 3292268.png (5.8 Kb) · 7605278.png (14.0 Kb)

 
Дата: Понедельник, 14.05.2012, 22:38 |
Solyt
Сержант
Группа: Проверенные
Сообщений: 39
Награды: 0
Репутация: 0
Статус: Offline


спасибо разобрался... а почему уменя вместо названия (адреса квартиры выводит нечто другое? (предложена квартира) хотя в названии стоит адрес.

 
Дата: Понедельник, 14.05.2012, 22:53 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Solyt,
Quote (Solyt)
а почему уменя вместо названия (адреса квартиры выводит нечто другое? (предложена квартира) хотя в названии стоит адрес.

В названии стоит то, что прописано в теге title страницы.
...


 
Дата: Суббота, 17.11.2012, 03:36 |
bolgarka
Рядовой
Группа: Проверенные
Сообщений: 14
Награды: 0
Репутация: 0
Статус: Offline


Все сделала так же, форма появляется, но при отправке запроса выкидывает на главную страницу сайта и сообщение не приходит на почту sad

 
Дата: Воскресенье, 09.12.2012, 06:25 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


bolgarka,
Quote (bolgarka, Сб, 17.11.2012, 03:36:12)
Все сделала так же, форма появляется, но при отправке запроса выкидывает на главную страницу сайта и сообщение не приходит на почту sad

Значит, все же вы что-то не так сделали ..
Адрес страницы с формой поможет мне узнать что именно вы сделали не так..


 
Дата: Вторник, 11.12.2012, 16:59 |
bolgarka
Рядовой
Группа: Проверенные
Сообщений: 14
Награды: 0
Репутация: 0
Статус: Offline


Значит, все же вы что-то не так сделали ..
Адрес страницы с формой поможет мне узнать что именно вы сделали не так..


Да, пожалуйста:

страница с запросом:

http://www.bulgaria.seainvest.ru/index/zolotye_peski_var_zp020/0-861

и страница с формой:

http://www.bulgaria.seainvest.ru/index/obratnaja_svjaz/0-1052

Заранее благодарю за помощь. Хотя, это не совсем то, что мне нужно. Мне бы хотелось, чтобы форма была не в отдельном окне, а прямо на странице каждой. Возможно так?


 
Дата: Вторник, 11.12.2012, 18:17 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


bolgarka,
Quote (bolgarka, Вт, 11.12.2012, 16:59:42)
Да, пожалуйста:
страница с запросом:

Странно:



и чуть побольше сделайте окно (поправьте размеры в скрипте) а то полосы прокрутки появляются в аякс-окошке. не красиво ...
Вот эти циферки:
Quote (Code)
new _uWnd('myForm',ftitle,430,345,{align:'left ...

сделайте, например, вот такими:
Quote (Code)
new _uWnd('myForm',ftitle,450,350,{align:'left ...

.. или чуть больше.. можно методом тыка )
...

А.. она у вас вообще не работает.. странно.
Чуть позже гляну подробнее.

Прикрепления: 9323788.png (19.4 Kb)

 
Дата: Вторник, 11.12.2012, 18:29 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Quote (bolgarka, Вт, 11.12.2012, 16:59:42)
Хотя, это не совсем то, что мне нужно. Мне бы хотелось, чтобы форма была не в отдельном окне, а прямо на странице каждой. Возможно так?

Да, возможно:
ПУ » Главная » Почтовые формы » Получить код - там список ваших форм. копируете код нужной (типа $MFORM_3$) и вставляете в шаблон (), туда, где требуется вывести форму)



Можно через условие.
..

Прикрепления: 4551403.png (5.3 Kb)

 
Дата: Вторник, 11.12.2012, 22:40 |
bolgarka
Рядовой
Группа: Проверенные
Сообщений: 14
Награды: 0
Репутация: 0
Статус: Offline


Да, возможно:
ПУ » Главная » Почтовые формы » Получить код - там список ваших форм. копируете код нужной (типа $MFORM_3$) и вставляете в шаблон (), туда, где требуется вывести форму)


Хм... сделала, но тогда в ней не присутствует ссылка и название страницы sad


 
Дата: Вторник, 11.12.2012, 22:53 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


bolgarka,
Quote (bolgarka, Вт, 11.12.2012, 22:40:25)
Хм... сделала, но тогда в ней не присутствует ссылка и название страницы

Логично )
Скрипт привязать теперь нужно к форме. Можно прямо в шаблоне самой формы, сразу после формы.
Code
<script type="text/javascript">
function setTitleUrl(cId){
if(!cId)return;
$('#'+cId+' input[name="f3"]').val(window.location.href.split('?')[0].split('#')[0]);
$('#'+cId+' input[name="f4"]').val(document.title);
};mSensForm('msgForm3',1);
</script>


Даже вот так проще:
Code
<script type="text/javascript">
$(document).ready(function(){
$('#msgForm3 input[name="f3"]').val(window.location.href.split('?')[0].split('#')[0]);
$('#msgForm3 input[name="f4"]').val(document.title);
});
</script>

Остальное - как обычно..


 
Дата: Вторник, 11.12.2012, 23:21 |
bolgarka
Рядовой
Группа: Проверенные
Сообщений: 14
Награды: 0
Репутация: 0
Статус: Offline


Вот так? Ничего не вышло wacko

<table border="0" width="100%" id="table1" cellspacing="1" cellpadding="2">
<tr><td width="35%">E-mail отправителя <font color="red">*</font>:</td><td><input type="text" name="f1" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td>Адрес страницы:</td><td><input type="text" name="f3" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td>Название страницы:</td><td><input type="text" name="f4" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td>Текст сообщения:</td><td><input type="text" name="f2" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td>Бюджет покупки, Евро:</td><td><input type="text" name="f4" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td>Ваш телефон с кодом города <font color="red">*</font>:</td><td><input type="text" name="f5" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td colspan="2" align="center"><br /><input type="submit" value="Отправить сообщение"></td></tr>
</table>
<script type="text/javascript">
function setTitleUrl(cId){
if(!cId)return;
$('#'+cId+' input[name="f3"]').val(window.location.href.split('?')[0].split('#')[0]);
$('#'+cId+' input[name="f4"]').val(document.title);
};mSensForm('msgForm3',1);
</script>

Добавлено (11.12.2012, 23:21)
---------------------------------------------
А вот это я прописала в дизайне страниц:

<script type="text/javascript">
function mSensForm(el){
var fid=(el.rel)?el.rel:'msgForm',ftitle=(el.title)?el.title:'Обратная связь';
new _uWnd('myForm',ftitle,500,400,{align:'left',fadeclosetype:0,min:0,max:0,shadow:1,resize:0,oncontent:function(){
$.get(el.href,{},function(data){
$('#myForm').html($('#'+fid,data).html());
if(window.setTitleUrl){setTitleUrl('myForm');};
});
}},'<div id="myForm" style="width:450px;height:280px;"><img src="/_theme/_st/img/ico/ajax.gif" /></div>');
};
function setTitleUrl(cId){
if(!cId)return;
$('#'+cId+' input[name="f3"]').val(window.location.href.split('?')[0].split('#')[0]);
$('#'+cId+' input[name="f4"]').val(document.title);
};
</script>

 
Дата: Среда, 12.12.2012, 00:11 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


bolgarka,
Quote (bolgarka, Вт, 11.12.2012, 23:21:22)
Вот так?

Нет..
Вы же хотели саму форму вынести на страницу.
Quote (bolgarka, Вт, 11.12.2012, 16:59:42)
Мне бы хотелось, чтобы форма была не в отдельном окне, а прямо на странице каждой. Возможно так?

Следовательно предыдущий скрипт убираем из шаблона, а вместо ссылки вставляем код формы - $MFORM_1$.

Правильный код вашего шаблона формы:
Code
<table border="0" width="100%" id="table1" cellspacing="1" cellpadding="2">
<tr><td width="35%">E-mail отправителя <font color="red">*</font>:</td><td><input type="text" name="f1" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td>Адрес страницы:</td><td><input type="text" name="f3" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td>Название страницы:</td><td><input type="text" name="f4" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td>Текст сообщения:</td><td><input type="text" name="f2" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td>Бюджет покупки, Евро:</td><td><input type="text" name="f4" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td>Ваш телефон с кодом города <font color="red">*</font>:</td><td><input type="text" name="f5" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td colspan="2" align="center"><br /><input type="submit" value="Отправить сообщение"></td></tr>
</table> <script type="text/javascript">
$(document).ready(function(){
$('#table1 input[name="f3"]').val(window.location.href.split('?')[0].split('#')[0]);
$('#table1 input[name="f4"]').val(document.title);
});
</script>


...


 
Дата: Среда, 12.12.2012, 00:42 |
bolgarka
Рядовой
Группа: Проверенные
Сообщений: 14
Награды: 0
Репутация: 0
Статус: Offline


Урраааааааа! Спасибо Вам! Заработало!!! Вы просто умничка!!!

С наступающим Вас! heart

Добавлено (12.12.2012, 00:42)
---------------------------------------------
Так как подозреваю, что вы волшебник, хочу на всякий случай задать еще один вопросик. Может существует какой-нибудь прием, который позволит визуально скрыть в форме строчки с названием страницы и ссылкой, но при этом приходить на почту они мне будут? smile Прошу прощения за наглость )))

 
Дата: Среда, 12.12.2012, 01:16 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


bolgarka,
Quote (bolgarka, Ср, 12.12.2012, 00:42:55)
С наступающим Вас!

Спаибочки ) и вас тоже с наступающим )

Quote (bolgarka, Ср, 12.12.2012, 00:42:55)
Может существует какой-нибудь прием, который позволит визуально скрыть в форме строчки с названием страницы и ссылкой, но при этом приходить на почту они мне будут?

Можно)
Вот код шаблона:
Code
<table border="0" width="100%" id="table1" cellspacing="1" cellpadding="2">
<tr><td width="35%">E-mail отправителя <font color="red">*</font>:</td><td><input type="text" name="f1" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td>Текст сообщения:</td><td><input type="text" name="f2" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td>Бюджет покупки, Евро:</td><td><input type="text" name="f4" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td>Ваш телефон с кодом города <font color="red">*</font>:</td><td><input type="text" name="f5" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td colspan="2" align="center"><br /><input type="submit" value="Отправить сообщение">
<input type="hidden" name="f3"><input type="hidden" name="f4"></td></tr>
</table>
<script type="text/javascript">
$(document).ready(function(){
$('#table1 input[name="f3"]').val(window.location.href.split('?')[0].split('#')[0]);
$('#table1 input[name="f4"]').val(document.title);
});
</script>

- должен работать, не проверял ) отпишитесь если все Ok

Добавлено (12.12.2012, 01:56:21)
---------------------------------------------
А что это вы под текст так мало места дали?



Вот так будет в три строки:
Code
<table border="0" width="100%" id="table1" cellspacing="1" cellpadding="2">
<tr><td width="35%">E-mail отправителя <font color="red">*</font>:</td><td><input type="text" name="f1" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td>Текст сообщения:</td><td><textarea style="width: 95%; overflow:auto;" cols="30" name="f2" rows="3"></textarea> </td></tr>
<tr><td>Бюджет покупки, Евро:</td><td><input type="text" name="f4" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td>Ваш телефон с кодом города <font color="red">*</font>:</td><td><input type="text" name="f5" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td colspan="2" align="center"><br /><input type="submit" value="Отправить сообщение">
<input type="hidden" name="f3"><input type="hidden" name="f4"></td></tr>
</table> <script type="text/javascript">
$(document).ready(function(){
$('#table1 input[name="f3"]').val(window.location.href.split('?')[0].split('#')[0]);
$('#table1 input[name="f4"]').val(document.title);
});
</script>

- типа чуть побольше, в три раза в высоту поля.
Где:
Quote (Code)
<textarea style="width: 95%; overflow:auto;" cols="30" name="f2" rows="3"></textarea>

кол-во строк. В данном случае, три.

Прикрепления: 1273613.png (4.1 Kb)

 
  • Страница 1 из 3
  • 1
  • 2
  • 3
  • »
Поиск:


Мобильная версия