Что нового

Проверка кнопки buttom html (1 Viewer)

  • Автор темы vjpitbul
  • Дата начала
V

vjpitbul

Участник
Регистрация
17 Дек 2019
Сообщения
177
Реакции
176
Здравствуйте, имеется форма обратной связи на html + обработчик на php, при нажатии на кнопку отправить, когда формы имя, телефон и email не заполнены, выходит вспылающее окно об успешной отправки формы, и получается что он на заднем фоне пишет заполните поля, а диалоговое окно уже вышло об успешной отправке, никак не могу реализовать чтобы сначала при нажатии на кнопку отправить, выходила сначала проверка полей, а при заполнении этих полей уже модальное окно об успешной отправке, вот как у меня прописано (поля обязательные для заполнения указаны посредством required)
Это само вспылающее окно:
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="&#x0417;&#x0430;&#x044F;&#x0432;&#x043A;&#x0430;"> <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">Нажимая на кнопку, вы даете согласие на обработку&nbsp;</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 на код не обращайте внимание, это для теста все делается))
 
Для полного комплекта не хватает JS-кода который обрабатывает отправку и вызывает модальное окно
 
Для полного комплекта не хватает JS-кода который обрабатывает отправку и вызывает модальное окно
Нашел такой только, можете пожалуйста посмотреть

JavaScript:
flexbe_cli.entity.setClientJs("element","media01",{components:["image","video","slider"]});

flexbe_cli.entity.setClientJs("element","zone_cards",{components:["cards"],onUpdate(e){e.originId===e.id&&this.fixSwiper(e)},fixSwiper(e={}){var i;clearTimeout(this._changeTimer);const s=null==(i=flexbe_cli.components.getInstances(this).filter((e=>"cards"===e.is)))?void 0:i[0],t=s&&s.swiper;if(!t)return!1;if(document.body.contains(t.el)){if(e&&"items_add"===e.reason){const i=t.realIndex,s=e.reasonData.to;let n=i;i+t.params.slidesPerView<=s&&(n=s-t.params.slidesPerView+1),n!==i&&(this._changeTimer=setTimeout((()=>{t.slideTo(n)}),30))}e.styleRendered&&t.update(!1)}else this._changeTimer=setTimeout((()=>{this.fixSwiper(e)}),16)}});

flexbe_cli.entity.setClientJs("element","zone",{components:["backgroundElement"],onInit(){this.setMeta()},onUpdate(){this.setMeta()},setMeta(){const i=this.lastViewport,e=this.lastVisibility;this.lastViewport=flexbe_cli.resize.viewportWidth,this.lastVisibility=flexbe_cli.is_admin&&$("body").hasClass("show-hidden"),this.needFixOrder=this.needFixOrder||this.lastViewport!==i||this.lastVisibility!==e},onResize(){this.inScreen&&this.isVisible&&this.fixElementOrder()},fixElementOrder(){if(this.setMeta(),!this.needFixOrder)return;this.needFixOrder=!1;const i=this.$area.find(".elements-list");i.find("[data-hidden]").length&&i.each(((i,e)=>{const t=$(e).find(".element-item--static"),s=t.filter(":visible");t.removeClass("is-first-child is-last-child"),s.first().addClass("is-first-child"),s.last().addClass("is-last-child")}))}});

flexbe_cli.entity.setClientJs("modal","GRID",{components:["background"],onClose(){this.$area.find(".component-form .is_error").removeClass("is_error")}});

flexbe_cli.entity.setClientJs("widget","ANCHORS",{require:["/_s/lib/anime/anime.min.js?321"],$list:null,onLoad(){this.$list=this.$widget.find(".anchors-list"),this.list="object"==typeof this.$list.data("anchors")&&this.$list.data("anchors").list||[];const t={style:1,show_title:0,...this.$list.data("anchors")};this.style=t.style,this.show_title=t.show_title,this.$list.removeAttr("data-anchors"),flexbe_cli.run.is_mobile||(this.drawList(),this.bindEvents(),flexbe_cli.is_admin&&(flexbe_cli.events.off("layout_change.anchors").on("layout_change.anchors",((t,e)=>{"block"===e.is&&this.drawList()})),flexbe_cli.events.off("page-settings_update").on("page-settings_update",((t,e)=>{e.p_data.p_data.show_bullets?this.$list.show():this.$list.hide()}))))},check(){const t=flexbe_cli.block.$blocks.not("[data-overlayed]");this.list=this.list.filter((e=>{const i=t.closest(`[data-id="${e.id}"]`),s=i.attr("data-hidden")||"none";return e.enabled&&i[0]&&["none","mobile"].includes(s)}))},drawList(){flexbe_cli.block.$blocks.length&&flexbe_cli.vars._page.showBullets||this.$list.hide(),this.check();let t="";flexbe_cli.is_admin&&this.list.length<2?t='<svg style="color: #adadad" width="18" height="98" viewBox="0 0 18 98" xmlns="http://www.w3.org/2000/svg">\n                <g fill="none" fill-rule="evenodd">\n                    <circle opacity=".05" cx="9" cy="5" r="5"/>\n                    <circle opacity=".2" cx="9" cy="25" r="5"/>\n                    <circle opacity=".2" cx="9" cy="73" r="5"/>\n                    <circle opacity=".05" cx="9" cy="93" r="5"/>\n                    <path d="M9 40a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm5.126 9.626h-4.5v4.5H8.34v-4.5h-4.5V48.34h4.5v-4.5h1.286v4.5h4.5v1.286z" opacity=".45"/>\n                </g>\n            </svg>':this.list.length>=2&&(this.list.forEach((e=>{const i=this.show_title&&e.title?` data-title="${e.title}"`:"";t+=`<li${i}><a href="#${e.id}"></a></li>`})),t+='<li class="helper"><a></a></li>'),this.$list.find("ul").html(t),this.$helper=this.$list.find(".helper"),this.animateList()},animateList(){if(!(this.list.length<1)){if(flexbe_cli.is_admin)this.$helper.css({opacity:1,transform:`translateY(${24*this.index}px)`});else{const t=anime({targets:this.$list.find("li").not(this.$helper).get(),duration:350,opacity:[0,1],scale:[.8,1],translateY:[10,0],easing:"easeInOutQuad",autoplay:!1,delay:(t,e)=>30*e,complete:()=>{anime({targets:this.$helper.get(),duration:400,translateY:24*this.index,scale:[2.5,1],opacity:[0,1],easing:"easeInExpo"})}});this.$list.addClass("hide"),setTimeout((()=>{this.$list.removeClass("hide"),t.play()}),800)}this.$list.find("li").removeClass("active").eq(this.index).addClass("active")}},index:0,bindEvents(){flexbe_cli.events.off("entity_event.anchors").on("entity_event.anchors",((t,{type:e,core:i,params:s})=>{"focus"===e&&s.state&&"block"===i.is&&this.setBlock(i)})),flexbe_cli.block.$blocks.each(((t,e)=>{const i=e._core;i&&i.inFocus&&this.setBlock(i)})),this.$list.on("click","li",(t=>{if(!$(t.target).is("a"))return $(t.currentTarget).find("[href]").trigger("click"),t.preventDefault(),!1}))},setBlock(t){let e=this.index,i="#6a6a6a";const s=t.content||t.$area.find(".container")[0];if(s){const e=t.content.getAttribute("data-contrast");i=e?"light"===e?"#FFF":"#1B1B1C":getComputedStyle(s).color}this.$list.css("color",i),this.list.some(((i,s)=>i.id===t.id&&(e=s,!0))),e=Math.max(0,Math.min(this.list.length-1,e)),e!==this.index&&(this.animate(e),this.index=e)},animate(t){if(this.$list.find("li").removeClass("active"),this.$list.find("li").eq(t).addClass("active"),1==+this.style){const e=24*t,i=t-this.index>0?12:-12;anime.remove(this.$helper[0]),anime({targets:this.$helper[0],translateY:e-i,scaleY:2.5,scaleX:.6,duration:100,easing:"easeInQuad",complete:()=>{anime({targets:this.$helper[0],translateY:e,scaleY:1,scaleX:1,duration:100,easing:"easeOutQuad"})}})}}});

!function(){const e="hidden-mobile",t="mobile-navigation--created",a="nav-header-controls--cart",n="nav-header-controls--burger",s=".b_block",i=".element-item",o=".mobile-navigation",r=".header-wrapper",l=".widget-list .cart-button",c=".header-cart-button",d=".nav-header",h=".nav-header-content",u=".nav-header-controls",b=".nav-menu",m=(t,a=!1)=>{let n=$(t);if(!n.is(i)){const e=n.closest(i);n=e.length?e:n}n.toggleClass(e,!a)};flexbe_cli.entity.setClientJs("widget","MENU01",{created:{},navbarStyle:null,onLoad(){requestAnimationFrame((()=>this.createWidget()));let e=flexbe_cli.resize.responsiveMode;$(window).on("resized",(()=>{const t=flexbe_cli.resize.responsiveMode;e!==t&&"mobile"===t&&this.createWidget(),e=t}))},onMsg(e){"postProcessSave"===e&&this.createWidget(e)},createWidget(){this.clickEvent="click",this.navbarStyle=!1,this.navmenuCreated=!1,this.created={},this.contrast="dark",this.background="#FFFFFF";const e=flexbe_cli.block.$list,t=$(s),a=e.find(r);if(m(a,!0),m(t,!0),this.mobileHeadersMap=t.not('[data-hidden="mobile"]').toArray().map((e=>{const t=$(e),a=t.find(r),n=a.hasClass("floating-header"),s=!!a.data("mobile-menu"),i=a.data("widget-color"),o=a.data("widget-contrast"),l=a.closest("[data-contrast]").attr("data-contrast");return{$block:t,$header:a,isFixed:n,hasMobileMenu:s,widgetColor:i,widgetContrast:o,contrast:l}})).filter((e=>e.hasMobileMenu)),this.mobileHeadersMap.length){var n;const e=null!=(n=this.mobileHeadersMap.find((e=>e.isFixed)))?n:this.mobileHeadersMap[0];"contrast"===e.widgetColor?(this.contrast=e.contrast,this.background="dark"===this.contrast?"#ffffff":"#1b1b1c"):(this.background=e.widgetColor,this.contrast=e.widgetContrast)}if(this.$headers=$(this.mobileHeadersMap.map((e=>e.$header[0]))),this.$nav=this.$area.find(o),this.$navbar=this.$area.find(d),this.$navmenu=this.$area.find(b),this.shouldBeFixed=!flexbe_cli.is_admin&&this.mobileHeadersMap.some((e=>e.isFixed)),this.fillNavMenu(),this.fillNavbar(),this.$navbar.css("background-color",""),this.$navmenu.css("background-color",""),a.closest(".b_block").each(((e,t)=>{t._core&&t._core.updateTween()})),this.navbarStyle){if(this.background&&(this.$navbar.css("background",this.background),this.$navmenu.css("background",this.background),i=this.background,!/^\s*(?:linear-gradient|repeat-linear-gradient)\(.*\)/i.test(i))){const e=$("head"),t=e.find('meta[name="theme-color"]');t.length?t.attr("content",this.background):e.append(`<meta name="theme-color" content="${this.background}"/>`)}this.contrast?this.$nav.attr("data-contrast",this.contrast):this.color&&this.$nav.css("color",this.color),this.shouldBeFixed=this.shouldBeFixed||"round"===this.navbarStyle,this.$nav.toggleClass("menu-fixed",this.shouldBeFixed),this.$nav.toggleClass("menu-static",!this.shouldBeFixed),this.animationMobileShow()}else $("body").removeClass("is-mobile-menu--round is-mobile-menu--panel");var i;this.navmenuCreated&&(flexbe_cli.entity.initArea(this.$nav),flexbe_cli.events.off("ui_mobilemenu_open").on("ui_mobilemenu_open",(()=>{this.openMenu()})),flexbe_cli.events.off("ui_mobilemenu_close").on("ui_mobilemenu_close",(()=>{this.$nav.length&&[!0,"true"].includes(this.$nav.attr("data-opened"))&&this.closeMenu()})));const l=flexbe_cli.components.getGlobalInstance("lazyLoading");l&&(l.forceLoadInlineInArea(this.$area[0]),l.forceLoadLazyInArea(this.$area[0]))},animationMobileShow(){const e=$("body");this.$nav.removeClass("header-style-round header-style-panel"),this.$nav.addClass(`${t} header-style-${this.navbarStyle}`),this.$headers.each(((e,t)=>{$(t).find(".element-item").toArray().every((e=>!e.offsetHeight))&&m($(t).closest(".header-area, .b_block"),!1);$(t).find(".elements-list").each(((e,t)=>{$(t).find(".element-item").toArray().every((e=>!e.offsetHeight))&&m($(t).closest(".elements-list"),!1)}))})),e.removeClass("is-mobile-menu--round is-mobile-menu--panel"),e.addClass(`is-mobile-menu--${this.navbarStyle}`)},fillNavbar(){const e=this,{created:t,$navbar:s,$headers:i,navmenuCreated:o}=e,r=s.find(h),d=s.find(u);r.empty(),d.empty();const b=[],g=[];!function(){const n=$(l).eq(0),s=$(c).eq(0);if(s.length||n.length){t.cart=!0,g.push("cart");const i=n.find(".cart-button-icon"),o=n.find(".cart-button-count"),r=s.find(".header-cart-button-icon"),l=s.find(".header-cart-button-count");let c,h,u;c=r.length?r.html():i.html(),l.length?(h=l.css("color"),u=l.css("background-color"),"rgba(0, 0, 0, 0)"===u&&(h="rgb(255, 255, 255, 1)",u="rgb(234, 127, 84, 1)")):(h=o.css("color"),u=o.css("background-color"));const b=`\n                        <li class="${a}">\n                            <div class="cart-button">\n                                <svg class="cart-button-icon">\n                                    ${c}\n                                </svg>\n                                <div class="cart-button-count" style="color: ${h}; background: ${u}">0</div>\n                            </div>\n                        </li>`;e.$cart=$(b),d.append(e.$cart),s.length||e.background||(e.color=n.css("color"),e.background=n.css("background-color"))}else t.cart=!1;if(t.cart){const t=e.$area.find(".cart-button"),a=t.find(".cart-button-count"),n=flexbe_cli.ecommerce.cartStore.getCount();d.toggleClass("cart-empty",!n),a.text(n),e.$cart.on(e.clickEvent,(()=>{e.toggleMenu(!1),flexbe_cli.events.emit("ui_cart_open")})),setTimeout((()=>{flexbe_cli.ecommerce.cartStore.on("dispatch.mobilemenu",((e,{name:n})=>{const s=flexbe_cli.ecommerce.cartStore.getCount();d.toggleClass("cart-empty",!s),a.text(s),"addItem"===n&&(t.addClass("blink"),setTimeout((()=>{t.removeClass("blink")}),300))}))}))}t.cart}(),function(){o?(e.$burger=$(`<li class="${n}"><i></i><i></i><i></i></li>`),d.append(e.$burger),g.push("burger"),e.$burger.on(e.clickEvent,(()=>{e.toggleMenu()})),t.burger=!0):t.burger=!1;t.burger}(),this.$nav.attr("data-enabled",!!g.length),g.length&&function(){const e=i.find(".component-logo").eq(0);if(e.length){const a=40/Math.max(.25,e.innerHeight()/e.innerWidth()),n=e.clone();t.logo=!0,n.css({fontSize:"",maxWidth:`${a}px`}),r.append(n),b.push("logo"),m(e,!1)}else t.logo=!1;t.logo}(),b.length&&g.length||g.length>1?this.navbarStyle="panel":0===b.length&&1===g.length?(this.navbarStyle="round",this.shouldBeFixed=!0):this.navbarStyle=!1},fillNavMenu(){const{created:e,$navmenu:t,$headers:a}=this;return["header_menu","header_text","header_contacts","header_social","header_button","header_html","header_cart","header_spacer"].forEach((n=>{const s=t.find(`[data-element=${n}]`),i=a.find(`[data-e-id="${n}"]`),o=i.length,r=s.hasClass("nav-menu-item--cart"),l=s.hasClass("nav-menu-item--spacer");if(s.empty(),o){if(!r&&!l){const e=i.clone();e.find('[class^="editor-"]').remove(),e.attr("data-cloned",!0),s.append(e),s.find("[data-direction]").attr("data-direction","column"),s.find("[data-direction-adaptive]").attr("data-direction-adaptive","column"),s.find(".element-content").removeClass("justify-content-center justify-content-end").addClass("justify-content-start")}m(i,!1),e[n]=e[n]?e[n]+o:o}})),this.navmenuCreated=Object.keys(e).length,this.navmenuCreated},toggleMenu(e){this[(e=void 0===e?!(e=[!0,"true"].includes(this.$nav.attr("data-opened"))):!!e)?"openMenu":"closeMenu"]()},openMenu(){this.isOpen=!0,this.$area.addClass("show"),this.$nav.outerHeight(),this.$nav.attr("data-opened",!0),this.$navmenu.addClass("active"),this.$burger&&this.$burger.addClass("active"),flexbe_cli.is_admin||flexbe_cli.scroll.scrollLock.lock(),this.setAreaSize(),this._onOpen(),$(window).on("resized.mobilemenu",(()=>{this.setAreaSize()})),"mobile"===flexbe_cli.resize.responsiveMode&&($("body").addClass("is-widget-open").css("background",this.background),this.shouldBeFixed||$("body, html").scrollTop(0))},closeMenu(){this.isOpen=!1,"mobile"===flexbe_cli.resize.responsiveMode&&($("body").removeClass("is-widget-open").css("background",""),Array.from(this.$navmenu.find(".folder-item")).forEach((e=>{$(e).removeClass("show"),$(e.lastElementChild).slideUp(0)}))),this.$area.removeClass("show"),this.$area.css("height",""),this.$nav.attr("data-opened",!1),this.$navmenu.removeClass("active"),this.$burger&&this.$burger.removeClass("active"),flexbe_cli.is_admin||flexbe_cli.scroll.scrollLock.unlock(),$(window).off("resized.mobilemenu"),this._onClose()},setAreaSize(){const e=this.isOpen?`${flexbe_cli.resize.viewportHeight}px`:"";this.$area.css("height",e)}})}();

!function(){class t{constructor(t){if(this.interacted=!1,this.inited=!1,this.activeUid=void 0,this.$activeTab=void 0,this.$activeSection=void 0,this.opts=t,this.$area=t.$area,this.dataAttr=t.dataAttr,this.classContainer=t.classContainer,this.initTabs(),t.activeUid)this.selectTab(t.activeUid);else if(window.location.hash){const t=window.location.hash.replace("#",""),i=$(`._anchor[name="${t}" i]`),s=i.length?i.closest("[data-id]"):$(`[data-id="${t}" i]`),e=i[0]||s[0];e&&this.selectTabFromTarget(e)}this.$area.on("bringIntoView",(t=>this.selectTabFromTarget(t.target)))}initTabs(){if(this.$mainContainer="self"===this.classContainer?this.$area:this.$area.find(this.classContainer),this.$tabsContainer=this.$area.find(".container-tabs"),this.$tabsList=this.$area.find('[role="tablist"]'),this.$swiperHelper=this.$area.find(".tab-swiper-helper"),this.inited=!!this.$tabsList.length,this.inited&&(this.$tabs=this.$tabsList.find('[role="tab"]'),this.$sections=this.$mainContainer.find('[role="tabpanel"]'),this.normalizeLines(),setTimeout((()=>{this.$mainContainer.addClass("main-area--tabs-inited")}),50),this.$tabsContainer.on("click",".tab",(t=>{const i=$(t.currentTarget).closest(`[${this.dataAttr}]`).attr(`${this.dataAttr}`);i&&(this.selectTab(i),this.setHash())})),this.$tabsList.on("touchstart",(()=>{this.interacted=!0,this.destroySwipeAnimation()})),flexbe_cli.is_admin)){let t;this.$tabsContainer.on("mouseenter",".tab",(i=>{clearTimeout(t),1===i.buttons&&(t=setTimeout((()=>{const t=$(i.target).closest(`[${this.dataAttr}]`).attr(`${this.dataAttr}`);this.selectTab(t),this.setHash()}),700))})),this.$tabsContainer.on("mouseleave",".tab",(()=>{clearTimeout(t)}))}}isTabsOnScreen(){if(!this.inited)return!1;const{top:t,height:i}=this.$tabsList[0].getBoundingClientRect();return t>0&&t+i<flexbe_cli.resize.viewportHeight}swipeAnimationController(){if(!this.inited)return;const t=this.$tabsList[0]&&this.$tabsList[0].scrollWidth>this.$tabsList[0].clientWidth,i=this.isTabsOnScreen();t&&i?this.initSwiperAnimation():i||this.destroySwipeAnimation()}initSwiperAnimation(){this.$swiperHelper.hasClass("show")||this.interacted||this.$swiperHelper.addClass("show")}destroySwipeAnimation(){this.$swiperHelper.hasClass("show")&&this.$swiperHelper.removeClass("show")}selectTabFromTarget(t){const i=$(t).closest(`[${this.dataAttr}]`).attr(`${this.dataAttr}`);this.selectTab(i)}selectTab(t,{force:i}={}){var s,e;if(!t||!i&&this.activeUid===t)return;this.inited||this.initTabs();const a=null!=(s=null==(e=this.$tabs)?void 0:e.filter(`[${this.dataAttr}="${t}"]`))?s:[];if(!a.length)return;const n=this.$sections.filter(".active"),r=n[0]&&n[0].offsetTop,o=this.$sections.filter(`[${this.dataAttr}="${t}"]`);this.scrollToTab(a),this.$tabs.removeClass("active").attr("aria-selected",!1).attr("tabindex",-1),a.addClass("active").attr("aria-selected",!0).attr("tabindex",0),this.$sections.removeClass("active").prop("hidden",!0),o.addClass("active").prop("hidden",!1);const l=o[0]&&o[0].offsetTop;if(this.activeUid=t,this.$activeTab=a,this.$activeSection=o,"function"==typeof this.opts.onSelectTab&&this.opts.onSelectTab({uid:t,$tab:a}),!flexbe_cli.run.is_mobile&&null!=r&&null!=l&&Math.abs(r-l)>0&&"undefined"!=typeof anime){const t=this.$mainContainer,i=r-l;t.css("will-change","transform"),anime({targets:t[0],translateY:[i,0],duration:250,easing:"easeOutCubic",complete:()=>{t.css({transform:"","will-change":""})}})}}normalizeLines(){if(!this.inited)return;let t;const i=this.$tabs;this.$tabsList.find(".tab-spacer").remove(),i.removeClass("first-in-line last-in-line"),i.first().addClass("first-in-line"),i.last().addClass("last-in-line"),i.each(((i,s)=>{t&&t.offsetTop!==s.offsetTop&&($(s).addClass("first-in-line"),$(t).addClass("last-in-line"),$(t).after('<span class="tab-spacer"></span>')),t=s}))}scrollToTab(t){if(!this.inited)return;const i=this.$tabsList,s=i[0].scrollWidth;if(s>i[0].offsetWidth){const e=t[0].offsetLeft,a=t[0].getBoundingClientRect(),n=flexbe_cli.resize.viewportWidth;let r;a.width>n||a.left<20?r=e-20:a.right>n-20&&(r=e-(n-20-a.width)),null!=r&&(r=Math.max(0,Math.min(s-n,r)),i.animate({scrollLeft:r},{duration:250}))}}setHash(){const t=this.$activeSection.find("._anchor").eq(0).attr("name");this.currentAnchor=t,t&&i(t)}resetHash(){if(!this.inited)return;String(window.location.hash).replace(/^#{1,2}/,"")===this.currentAnchor&&i("")}}function i(t){flexbe_cli.is_admin||(flexbe_cli.lockPopstate=!0,window.history.replaceState(null,null,`#${t}`),flexbe_cli.lockPopstate=!1)}flexbe_cli.entity.setClientJs("block","BUNDLE",{components:["background"],tabsController:void 0,shouldInitTabs:!0,onUpdate({templateRendered:t}){t&&(this.shouldInitTabs=!0)},onResize(){this.tabsController&&this.tabsController.normalizeLines()},onBeside(t){t&&this.shouldInitTabs&&this.createTabs()},onFocus(t){this.tabsController&&(t?this.tabsController.swipeAnimationController():this.tabsController.resetHash())},createTabs(){this.shouldInitTabs=!1,this.$area.find(".layout-type-tabs").length?this.tabsController=new t({$area:this.$area,dataAttr:"data-item-uid",classContainer:".main-area",activeUid:this.selectedTabUid,onSelectTab:({uid:t})=>{this.selectedTabUid=t,this.updateTween()}}):this.tabsController=null}})}();

flexbe_cli.entity.setClientJs("block","FOOTER",{components:["background"]});

flexbe_cli.entity.setClientJs("element","avatar01",{components:["icon","image"]});

flexbe_cli.entity.setClientJs("element","button01",{components:["icon"]});

flexbe_cli.entity.setClientJs("element","contacts01",{components:["icon"],onInit(){this.initNodes(),this.fixDesc()},onUpdate(){this.initNodes(),this.fixDesc()},onMsg(t){"change_contact"===t&&this.fixDesc()},initNodes(){this.$desc=this.$area.find(".element-text--desc"),this.$icon=this.$area.find(".component-icon"),this.$contact=this.$area.find(".element-text--contact")},fixDesc(){if(this.$desc.length&&this.$icon.length){const t=this.$contact[0].offsetHeight,i=this.$icon[0].offsetHeight;if(t>i){const e=t/2-i/2;this.$icon.css("margin-top",`${e}px`)}else this.$icon.css("margin-top","")}}});

flexbe_cli.entity.setClientJs("element","form01",{components:["form","icon"]});

flexbe_cli.entity.setClientJs("element","form02",{components:["form","icon"]});

flexbe_cli.entity.setClientJs("element","header_button",{components:["icon"]});

flexbe_cli.entity.setClientJs("element","header_contacts",{components:["icon"],onInit(){this.initNodes(),this.fixDesc()},onUpdate(){this.initNodes(),this.fixDesc()},onMsg(t){"change_contact"===t&&this.fixDesc()},initNodes(){this.$desc=this.$area.find(".element-text--desc"),this.$icon=this.$area.find(".component-icon"),this.$contact=this.$area.find(".element-text--contact")},fixDesc(){if(this.$desc.length&&this.$icon.length){const t=this.$contact[0].offsetHeight,i=this.$icon[0].offsetHeight;if(t>i){const e=t/2-i/2;this.$icon.css("margin-top",`${e}px`)}else this.$icon.css("margin-top","")}}});

flexbe_cli.entity.setClientJs("element","icon01",{components:["image","icon"]});
 
Честно даже не знаю с чем едят, только познаю азы как говорится, я не прошу готового конечно решения на блюдечке, знаю что самому надо разобраться, просто уже столько дней на это потратил, а результата нет, но стараюсь исправить
 
Если кто может помочь, отпишите пожалуйста, могу скинуть демо на крайний случай, сейчас пока хостинга нет
 
перепробовал множество вариантов, уже забрёл на 11 страницу гугла по каждой ссылке, но так и не нашел ответа на свой вопрос, может я не много не так выразился, мне просто нужен пример, который работает, типо такой формы:
Имя:
Телефон*: (обязательно для заполнения)
кнопка "Отправить"
При заполнении или не заполнении поля ИМЯ, выходит сообщение что поле телефон* не заполнено, на основе required, когда поле телефон заполненно и проверенно атрибутом pattern, то после нажатия кнопки отправить, выходит вспылающее окно об успешной отправке сообщения, которая указана в первом посте. Но нигде ответа так и не нашел, есть формы с обычной проверкой, но чтобы после этого выходило вспылающее окно, не видел такого
 
JavaScript:
function chek()
{
if (телефон) проверяешь не пустое ли поле;
if (почта) проверяешь не пустое ли поле;

$.ajax({
type: 'POST',
url: "form.php",
dataType: 'text',
cache: false,
data: 'name=имя&email=почта&итд',
success: function( data )
{
if(если форма сработала и данные приняты выводишь модальное окно);
}
});
}
 
JavaScript:
function chek()
{
if (телефон) проверяешь не пустое ли поле;
if (почта) проверяешь не пустое ли поле;

$.ajax({
type: 'POST',
url: "form.php",
dataType: 'text',
cache: false,
data: 'name=имя&email=почта&итд',
success: function( data )
{
if(если форма сработала и данные приняты выводишь модальное окно);
}
});
}
это всё есть в обработчике php, можно сказать один в один, только если туда поставить код вспылающего окна, то он не будет работать, а здесь ничего не понятно, но очень интересно)) спасибо, попросил пример, вы дали, но теперь не могу понять)
 
В твоем коде черт ногу сломит))) Это что за верстка такая)
Проще новое написать.
По сути как бы делал я:
1. Делал это на ajax, без перезагрузки страницы.
2. Написал бы форму отправки
3. JS проверил бы поля на заполненость, если поля заполнены, вызвать функцию отправки.
4. php скрипт возвращает ответ что все ок
5. Вывожу модульное окно об успешной отправке.

У тебя по сути идет отправка формы на form.php, то есть переход на этот файл. Как вариант убрать у кнопки буттон type="submit", и на onclick повесить свою функцию.

В этом коде тяжело разобраться, он как говориться вырван из контекста. На живом сайте хоть глянуть.
 
В твоем коде черт ногу сломит))) Это что за верстка такая)
Проще новое написать.
По сути как бы делал я:
1. Делал это на ajax, без перезагрузки страницы.
2. Написал бы форму отправки
3. JS проверил бы поля на заполненость, если поля заполнены, вызвать функцию отправки.
4. php скрипт возвращает ответ что все ок
5. Вывожу модульное окно об успешной отправке.

У тебя по сути идет отправка формы на form.php, то есть переход на этот файл. Как вариант убрать у кнопки буттон type="submit", и на onclick повесить свою функцию.

В этом коде тяжело разобраться, он как говориться вырван из контекста. На живом сайте хоть глянуть.
Данный человек разобрался, скинул ему демо, он всё сделал как надо, ему огромное спасибо
 

Пользователи, просматривающие данную тему

Верх