К основному контенту

Вызов php функции из js без перезагрузки страницы на примере "Подписки на новости"


1) Форма подписки на новости в footer.php

<p class="phead">Будь первым!</p>
<p>Получай новости о новинках и акциях.</p><br>
<input type="text" name="user_email_footer" id="subscribe-email" value="<?=($USER->GetEmail()<>'')?$USER->GetEmail():'';?>">
<input type="submit" value="Подписаться" id="subscribe_btn" class="btn btn_green">

2) js обработка нажатия кнопки id="subscribe_btn" с валидацией введенного емейла


//Валидация email адреса
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}

// Подписка на рассылки
$('#subscribe_btn').click(function(){
var email = $('#subscribe-email').val();

if (validateEmail(email)) {
var post = {};
post['email'] = email;
post['ajax'] = 'y';
BX.ajax.post(
'/include/add_user.php',
post,
function (data) {//data берется из php echo
if(data='yes'){
$('#subscribe-email').val('');
$('#subscribe-email').val("Вы успешно подписались.");
$('#subscribe-email').addClass('after_subscribe');
}
}
);
}
else {
if(!$('#subscribe-email').hasClass('after_subscribe')){
$('#subscribe-email').val('');
$('#subscribe-email').val(email + " Неверный формат");
$('#subscribe-email').css("color", "red");
}
}
});

3) Функция php, вызов которой осуществляется через ajax

<?
// Добавление пользователя при нажатии на "Подписаться на рассылку"

$_SERVER["DOCUMENT_ROOT"] = '/home/a/agromirooo/public_html';
include($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");

$arr = ['name'=>'',
'email'=>$_POST['email'],
'phone'=>'',
'from'=>'Из формы Подписка на рассылку'
];

AddUser($arr); // Функция из init.php
?>

4) Стиль, присвыиваемый для вывода сообщения об успешной регистрации

.after_subscribe{
color: green;
background: none;
border: none;
font-size: 1.2em;
}




Код не претендует на истинность в последней инстанции. Улучшение кода приветствуется.













Комментарии

Популярные сообщения из этого блога

Разместить битрикс модуль в модальном окне

1) В header.php шаблона вставляем скрипт вызова формы $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/mari_scripts.js");// Скрипты для всплывающих окон В месте, где кнопка вызова всплывающего окна: <a href="#" id="loading"><?=GetMessage("H_SEND_MSG")?></a> <div id="ajax-add-answer"></div> - контейнер для окна <div class="background"></div> - фон под окном 2) Скрипт вызова модального окна средствами битрикса mari_scripts.js BX.ready(function(){ var addAnswer = new BX.PopupWindow("my_answer", BX('search')/*/null /*Отобразить окно по центру*/, { content: BX('ajax-add-answer'), autoHide: true, //скрывать при клике вне окна lightShadow : true, overlay: { backgroundColor: 'black', opacity: '70' }, // width: 800, // height: 600, closeIcon: {right: "20px", top: "10px"}, titleBar: {content: BX.create(...

Редирект на страницу раздела, если элемент не найден

При переезде сайта, при смене правил формирования url детальных страниц, может понадобиться перенаправление в случае 404 ошибки. В /bitrix/templates/ххххх/components/bitrix/catalog/catalog-template/element.php прописать: if ( 0 < $ElementID ){...} else localredirect ( '/catalog/' . $arResult [ 'VARIABLES' ][ 'SECTION_CODE' ]. '/' ); // Тут в соответствии с правилами формирования url каталога