V
vjpitbul
Участник
- Регистрация
- 17 Дек 2019
- Сообщения
- 191
- Реакции
- 219
Здравствуйте, имеется форма обратной связи на html + обработчик на php, при нажатии на кнопку отправить, когда формы имя, телефон и email не заполнены, выходит вспылающее окно об успешной отправки формы, и получается что он на заднем фоне пишет заполните поля, а диалоговое окно уже вышло об успешной отправке, никак не могу реализовать чтобы сначала при нажатии на кнопку отправить, выходила сначала проверка полей, а при заполнении этих полей уже модальное окно об успешной отправке, вот как у меня прописано (поля обязательные для заполнения указаны посредством required)
Это само вспылающее окно:
Пробовал поставить код вспылающего окна в обработчик, но он не видит классы и открывает в новом окне просто текст без ничего (ps на код не обращайте внимание, это для теста все делается))
Это само вспылающее окно:
HTML:
<div class="m_modal m_done10343" data-is="modal" data-id="done10343" data-m-id="GRID" data-mod-id="6" data-page-id="1346182">
<div class="modal-data" data-contrast="light">
<div class="component-bg bg-color " data-component="background" data-type="color" data-lazy="true" data-img-original="false" data-loaded="false" data-has-placeholder="true">
<div class="overlay " data-opacity="0.8"></div>
</div>
<div class="scroller" data-overlay="true">
<div class="modal-content width--s"> <a class="close close-times"></a>
<div class="layout-type-column gap-zero gap-am-zero">
<div class="flexbe-row align-items-stretch justify-content-start only-row" data-item-id="1">
<div class="flexbe-column gap-item only-column" data-cols="24" data-item-id="1">
<div class="content-zone content-zone--vertical content-zone--single adaptive-auto-gap bg-element bg-element--color js-hover " data-is="zone" data-id="282159" data-e-id="zone" data-mod-id="0" data-zone-type="modal" data-contrast="dark" data-hover-contrast="dark" data-component="backgroundElement">
<div class="bg-element__shadow"></div>
<div class="bg-element__fill bg-element__fill--color" data-type="color"></div>
<div class="elements-list elements-list--vertical lightbox-container elements-list--only elements-list--allowFill" data-element-align="start" data-element-justify="center" data-direction="y" data-elements-scope="282159:zone" data-control-descent="true">
<div class="e_195922 element-item is-first-child element-item--static element-item--vertical" style="--zIndex: 3" data-mr="0" data-ml="0" data-element-justify="center" data-is="element" data-id="195922" data-e-id="media01" data-mod-id="image_ru">
<div class="element-content element-content--static element-content--vertical">
<div class="component-image loading " data-component="image" data-img-scale="contain" data-img-type="background" data-img-id="24327513" data-img-ext="png" data-img-proportion="22.41" data-img-width="946" data-img-lazy data-img-autoload data-img-transparent style="--imagePositionX: 50%; --imagePositionY: 50%">
<div class="component-image__image component-image__bg component-image__bg--contain" data-original="/images/24327513.png" alt></div> <noscript><img alt src="images/ggRMI8kbK2Wp.png"></noscript> </div>
</div>
</div>
<div class="e_135162 element-item element-item--static element-item--vertical" style="--zIndex: 2" data-mr="0" data-ml="0" data-element-justify="center" data-is="element" data-id="135162" data-e-id="text01" data-mod-id="4">
<div class="element-content element-content--static element-content--vertical">
<div class="text-block element-text text-style-subtitle"> Спасибо ! </div>
</div>
</div>
<div class="e_494183 element-item element-item--static element-item--vertical" style="--zIndex: 1" data-mr="0" data-ml="0" data-element-justify="center" data-is="element" data-id="494183" data-e-id="text01" data-mod-id="0">
<div class="element-content element-content--static element-content--vertical">
<div class="text-block element-text text-style-content"> Ваша заявка принята в обработку. <br>Мы свяжемся с Вами в кротчайшее время. </div>
</div>
</div>
<div class="e_530209 element-item is-last-child element-item--static element-item--vertical" style="--zIndex: 0" data-mr="0" data-ml="0" data-element-justify="center" data-is="element" data-id="530209" data-e-id="button01" data-mod-id="0">
<div class="element-content button-1 element-content--static element-content--vertical"> <button class="component-button is-old-button wide background--gradient text--auto effect--opacity line_size--medium weight--bold size--large js-hover filled rounded" data-action-target><a data-action="close"></a><div class="btn-content btn-content-text icon-on-left"><span class="btn-text"> ВЕРНУТЬСЯ НА САЙТ </span></div></button> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
HTML:
<div class="layout-type-column gap-normal gap-am-normal grid-zone container lightbox-container" data-is="zone" data-id="692369" data-e-id="zone_grid" data-mod-id="0">
<div class="flexbe-row align-items-start justify-content-start only-row" data-item-id="1">
<div class="flexbe-column gap-item only-column" data-cols="24" data-item-id=1>
<div class="content-zone content-zone--vertical content-zone--single adaptive-auto-gap bg-element bg-element--color js-hover bg-element--hover bg-element--hover-scale " data-is="zone" data-id="496847" data-e-id="zone" data-mod-id="0" data-zone-type="column" data-effects-desktop="true" data-effects-mobile="true" data-contrast="dark" data-hover-contrast="dark" data-component="backgroundElement">
<div class="bg-element__shadow"></div>
<div class="bg-element__fill bg-element__fill--color" data-type="color"></div>
<div class="elements-list elements-list--vertical lightbox-container elements-list--only elements-list--allowFill" data-element-align="start" data-element-justify="center" data-direction="y" data-elements-scope="496847:zone" data-control-descent="true">
<div class="e_215658 element-item is-first-child is-last-child element-item--static element-item--vertical" style="--zIndex: 0" data-mr="0" data-ml="0" data-element-justify="center" data-is="element" data-id="215658" data-e-id="form02" data-mod-id="ru">
<div class="element-content element-content--static element-content--vertical">
<form action="form.php" class="component-form form-fields fields-count-3 style-filled inline" method="post">
<div class="form-info"> <input type="hidden" name="id" value="215658"> <input type="hidden" name="goal" value=""> <textarea name="goal_html" style="display:none"></textarea> <input type="hidden" name="name" value="Заявка"> <input type="hidden" name="action" value="modal"> <input type="submit" hidden="hidden"> </div>
<div class="form-fields-advanced"></div>
<div class="form-fields" data-count="3">
<div class="form-field" >
<div class="form-field-text">
<div class="form-field-text__wrap">
<input type="message" pattern="\+?[0-9\s\-\(\)]+" placeholder="+7 (999) 999-99-99" class="form-field-text__input" name="message" autocomplete="on" required />
<hr class="border">
<label class="form-field-title">Ваш телефон *</label>
</div>
</div>
</div>
<div class="form-field" >
<div class="form-field-text">
<div class="form-field-text__wrap">
<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" placeholder="e-mail" class="form-field-text__input" name="email" autocomplete="on" data-required="true" required />
<hr class="border">
<label class="form-field-title">Ваш e-mail: *</label>
</div>
</div>
</div>
<div class="form-field" >
<div class="form-field-text">
<div class="form-field-text__wrap">
<input type="name" class="form-field-text__input" name="name" placeholder="Имя" autocomplete="on" required />
<hr class="border">
<label class="form-field-title">Ваше имя:</label>
</div>
</div>
</div>
</div>
<div class="form-submit"> <button type="submit" class="component-button is-old-button wide background--gradient text--auto effect--opacity line_size--medium weight--bold size--medium js-hover filled rounded form-field-submit" data-action-target><a data-action="modal" data-modal-id="done10343" data-product="{}"></a><div class="btn-content btn-content-text icon-on-left"><svg class="btn-icon success-icon" viewBox="0 0 18 14"><path d="M 2.205 5.77223L 0 7.92347L 6.3 14L 18 2.15124L 15.795 0L 6.3 9.74699L 2.205 5.77223Z"/></svg><div class="submitting-status"><i class="icon"><svg class="circular-loader" viewBox="25 25 50 50"><circle class="loader-path" cx="50" cy="50" r="20" /></svg></i></div><span class="btn-text"> ПОЛУЧИТЬ АКТУАЛЬНЫЙ ПРАЙС </span></div></button>
<div id="recaptcha-215658" class="g-recaptcha g-recaptcha-invisible"></div>
</div>
<p class="policy-data-warning policy-data-warning--text"> <span class="policy-message">Нажимая на кнопку, вы даете согласие на обработку </span><a href="#" class="button open-popup" >персональных данных</a> </p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
PHP:
<?php ob_start(); ?>
<?php
$post = (!empty($_POST)) ? true : false;
if($post) {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$error = '';
if(!$name) {$error .= 'Укажите свое имя. ';}
if(!$email) {$error .= 'Укажите электронную почту. ';}
if(!$message || strlen($message) < 1) {$error .= 'Введите телефон. ';}
if(!$error) {
$address = "";
$sub = "Новая заявка на сайте ";
$mes = "Пользователь запросил звонок\n\nТелефон: ".$message."\n\nE-mail: ".$email."\n\nИмя: ".$name."";
$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email");
if($send) {echo 'ОК';
header( "refresh:5;url=/" );
}
}
else {echo '<div class="err">'.$error.'</div>';}
}
?>Пробовал поставить код вспылающего окна в обработчик, но он не видит классы и открывает в новом окне просто текст без ничего (ps на код не обращайте внимание, это для теста все делается))
