File Manager

X7ROOT File Manager

Current Path: /home/okeydcqc/public_html/wp-content/uploads/ac_assets/submit-button

home / okeydcqc / public_html / wp-content / uploads / ac_assets / submit-button /

ðŸ“ ..
ðŸ“„ .htaccess(123 B)
ðŸ“„ preview_addon.png(2.34 KB)
ðŸ“„ preview_icon.svg(796 B)
ðŸ“„ ue-submit-button.js(10.88 KB)

Editing: ue-submit-button.js

function ueSubmitButton(){
	
	t = this;
	
	//objects
	var g_objWidget, g_objButton, g_objLoader, g_objMultistepForm;
	
	//selectors
	var g_fieldSelector, g_errorSelector, g_elementorWidgetParentSelector, g_multistepFormSelector;
	
	//classes
	var g_loadingClass, g_resultClass, g_resultSuccessClass, g_resultErrorClass, g_debugClass, g_submitButtonClass, g_submitButtonElementClass, g_conditionsClass, g_errorClass, g_multistepModeClass, g_elementorWidgetParentClass;
	
	//helpers
	var g_dataEditor;
	
	/**
	* get element widget id from parent wrapper
	*/
	function getElementWidgetID(objElement){
		if(!objElement || objElement.length == 0)
		throw new Error("Element not found");
		
		//get widget id
		var objWidget = objElement.parents(g_elementorWidgetParentSelector);
		
		if(objWidget.langth == 0)
		throw new Error("Elementor parent widget not found");
		
		var widgetID = objWidget.data("id");
		
		if(!widgetID)
		throw new Error("widget id not found");
		
		return(widgetID);
	}
	
	/**
	* is element in viewport
	*/
	function isElementInViewport(objElement) {
		
		var elementTop = objElement.offset().top;
		var elementBottom = elementTop + objElement.outerHeight();
		
		var viewportTop = jQuery(window).scrollTop();
		var viewportBottom = viewportTop + jQuery(window).height();
		
		return (elementBottom > viewportTop && elementTop < viewportBottom);
	}
	
	/**
	* check fro empty required fields
	*/
	this.isFieldRequiredAndEmpty = function(objField){
		
		var requiredAttribute = objField.attr("required");
		
		//check if required attr exist in the field 
		if(!requiredAttribute)
		return(false);
		
		var fieldValue = objField.val();
		
		//see if value is empty or equal false
		if(fieldValue == "" || fieldValue == false || fieldValue == "false")
		return(true);
		
	}
	
	/**
	* get Error object
	*/
	function getErrorObject(objField, elementorWidgetParentSelector, errorClass){
		
		var objWidgetContainer = objField.closest(g_elementorWidgetParentSelector);
		
		if(!g_elementorWidgetParentSelector)
		objWidgetContainer = objField.closest(elementorWidgetParentSelector);
		
		var objError = objWidgetContainer.find(g_errorSelector);
		
		if(!g_errorSelector)
		objError = objWidgetContainer.find("."+errorClass);
		
		return(objError);
	}
	
	/**
	* show emty required field error and scroll to field
	*/
	this.showEmptyRequiredFieldError = function(objField){
		
		objField.css({
			"background-color": "#ffe5e9"
		});
		
		g_elementorWidgetParentClass = "elementor-widget";
		g_errorClass = "ue-form-error";
		
		var objWidgetContainer = objField.closest("."+g_elementorWidgetParentClass);
		var textError = "This field cannot be empty.";
		var errorHtml = "<div class='"+g_errorClass+" ue-empty-required-field' style='color:#be001b'>"+textError+"</div>";
		
		var objError = getErrorObject(objField, g_elementorWidgetParentSelector, g_errorClass);
		var objWidget = objWidgetContainer.find(">div");		
		
		if(!objError || objError.length == 0)
		objWidget.prepend(errorHtml);	
		
		if(isElementInViewport(objField) == false){
			
			var offsetTop = objField.offset().top;
			
			jQuery("html").animate({ scrollTop: (offsetTop - 100) }, 500);
			
		}
		
	}
	
	/**
	* remove errors 
	*/
	this.removeErrors = function(fieldSelector, elementorWidgetParentSelector, errorClass){
		
		var objFields = jQuery(fieldSelector);
		
		objFields.each(function(){
			var objField = jQuery(this);
			
			objField.css({
				"background-color": ""
			});
			
			var objError = getErrorObject(objField, elementorWidgetParentSelector, errorClass);
			
			if(objError && objError.length)
			objError.remove();
			
		});
		
	}
	
	/**
	* verify field
	*/
	this.isVerified = function(objField, conditionsClass){		
		//check if objFiled is hidden
		var isHidden = objField.hasClass(conditionsClass);
		
		if(isHidden == true)
		return(false);
		
		//check if objFiled has hidden parents
		var objHiddenParents = objField.parents("."+conditionsClass);
		
		if(objHiddenParents && objHiddenParents.length)
		return(false);
		
		//check if required fields are not empty
		var isRequiredAndEmpty = t.isFieldRequiredAndEmpty(objField);
		
		if(isRequiredAndEmpty == true){
			
			t.showEmptyRequiredFieldError(objField);
			
			throw new Error("Required Field is empty");
			
		}
		
		//if all verifications are passed return true
		return(true);
		
	}
	
	/*
	** get all field values on the page
	*/
	function getValues(){
		var objFields = jQuery(g_fieldSelector);
		var idValueArray = [];
		
		//show error if no field foiund on tthe page
		if(!objFields.length){
			var textError = "Couldn't find any UE Field widget on the page.";
			
			g_objWidget.prepend("<div class="+g_errorSelector+">"+textError+"</div>")
			
			throw new Error(textError);
		}
		
		objFields.each(function(){
			var objField = jQuery(this);
			
			//skip field if not verified
			if(t.isVerified(objField, g_conditionsClass) == false)
			return(true);
			
			//if all verifications are passed remove empty required field errors
			t.removeErrors(g_fieldSelector, g_elementorWidgetParentSelector, g_errorClass);
			
			var id = getElementWidgetID(objField);
			var fieldValue = objField.val();
			
			var idValueObject = {
				id: id,
				value: fieldValue
			}
			
			idValueArray.push(idValueObject);
		});
		
		return(idValueArray);
	}
	
	/**
	* get form Id
	*/
	function getFormId(){
		var objWidget = g_objButton.parents(g_elementorWidgetParentSelector);
		var buttonId = objWidget.data("id");
		
		return(buttonId.toString());
	}
	
	/**
	* get layout Id
	*/
	function getLayoutId(){
		var objLayout = g_objWidget.parents(".elementor");
		var layoutId = objLayout.data("elementor-id");
		
		return(layoutId);
	}
	
	/**
	* on success ajax
	*/
	function onAjaxSuccess(data){
		g_objButton.addClass(g_resultSuccessClass);
		g_objWidget.find("." + g_resultClass).remove();
		g_objWidget.find("." + g_debugClass).remove();
		
		var resultElement = jQuery('<div />')
		.addClass(g_resultClass)
		.addClass(data.success === true ? g_resultSuccessClass : g_resultErrorClass)
		.html(data.message);
		
		g_objWidget.append(resultElement);
		
		if (data.debug) {
			var debugElement = jQuery('<div />')
			.addClass(g_debugClass)
			.html(data.debug);
			
			g_objWidget.append(debugElement);
		}
		
		if (data.redirect) {
			location.href = data.redirect;
		}
	}
	
	/**
	* small ajax request
	*/
	function ajaxRequest(postId, formId, data){
		g_objButton.prop("disabled", true);
		g_objLoader.addClass(g_loadingClass);
		
		g_objWidget.find("." + g_resultClass).remove();
		g_objWidget.find("." + g_debugClass).remove();
		
		var ajaxOptions = {
			method: "POST",
			url: location.href,
			data: {
				ucfrontajaxaction: "submitform",
				formdata: data,
				formId: formId,
				postId: postId,
			},
			dataType: 'json',
			success: function(response){
				onAjaxSuccess(response);
			},
			complete: function () {
				g_objButton.prop("disabled", false);
				g_objLoader.removeClass(g_loadingClass);
			},
		}
		
		var handle = jQuery.ajax(ajaxOptions);
		
		return(handle);
	}
	
	/**
	* click on submit button
	*/
	function onSubmitButtonClick(){
		var formData = getValues();
		var formId = getFormId();
		var postId = getLayoutId();
		
		ajaxRequest(postId, formId, formData);
	}	
	
	/*
	** show error for other submit buttons on the page
	*/
	function showMultipleSubmitButtonsError(objButton){
		
		var textError = "Found more then one Submit Button widget on the page. Please use only one Submit Button per page.";
		
		objButton.html("<div class="+g_errorSelector+">"+textError+"</div>")
		
		throw new Error(textError);
		
	}
	
	/**
	* chek if submit button is unique on the page
	*/
	function findOtherSubmitButtons(){
		
		var objSubmitButtons = jQuery("."+g_submitButtonClass);
		
		//if button is unique then exit function
		if(objSubmitButtons.length === 1)
		return(false);
		
		//if button is not unique then make sure it's same widget
		objSubmitButtons.each(function(index, elem){
			
			var objButton = jQuery(this);
			var objButtonChild = objButton.find("."+g_submitButtonElementClass);
			
			//if no such child skip the element
			if(!objButtonChild || !objButtonChild.length)
			return(true);
			
			var buttonType = objButtonChild.attr("type");
			
			//if type id different skip element as well
			if(buttonType != "submit")
			return(true);
			
			//skip first button to display it
			if(index == 0)
			return(true);
			
			showMultipleSubmitButtonsError(objButton);
			
		});
		
	}
	
	/**
	* see if any multi step form widget is added to the page
	*/
	function isMultiStepFormWidgetAdded(){
		
		if(!g_objMultistepForm)
		return(false);
		
		if(g_objMultistepForm.length == 0)
		return(false);
		
		return(true);
		
	}
	
	/**
	* get multi step widget id attribute
	*/
	function getMultistepFormId(){
		
		var multiStepFormId = g_objMultistepForm.attr("id");
		
		if(!multiStepFormId)
		return(null);
		
		return(multiStepFormId);
		
	}
	
	/**
	* show multi step form message in editor
	*/
	function showMultistepFormMessage(){
		
		if(g_dataEditor == "no")
		return(false);
		
		var multistemFormId = getMultistepFormId();
		var messageHtml = '<div class="ue-message">The submit button is connected to the Multistep From Widget with id: '+multistemFormId+'. To edit the submit actions click here. </div>'; 
		
		g_objWidget.prepend(messageHtml);
		
	}
	
	/**
	* add multistep form class to Button on frontend
	*/
	function hideSubmitButton(){
		
		if(g_dataEditor == "yes")
		return(false);
		
		g_objWidget.addClass(g_multistepModeClass);
		
	}
	
	/**
	* show message in editor and hide Submit button if Multi Step form is found
	*/
	function initMultiStepFormMode(){
		
		var isMultiStepFormWidgetMode = isMultiStepFormWidgetAdded();
		
		if(isMultiStepFormWidgetMode == false)
		return(false);
		
		//show message in editor
		showMultistepFormMessage();
		
		//hide button on frontend
		hideSubmitButton();
		
	}
	
	
	this.init = function(widgetId){
		//init vars
		
		//classes
		g_loadingClass = "ue-loading";
		g_resultClass = "ue-submit-button-result";
		g_resultSuccessClass = "ue-success";
		g_resultErrorClass = "ue-error";
		g_debugClass = "ue-submit-button-debug";
		g_conditionsClass = "ucform-has-conditions";
		g_errorClass = "ue-form-error";
		g_multistepModeClass = "ue-multistep-mode";
		g_elementorWidgetParentClass = "elementor-widget";
		
		//selectors
		g_fieldSelector = "input.ue-input-field, select.ue-input-field, textarea.ue-input-field, button.ue-input-field";
		g_errorSelector = "."+g_errorClass;
		g_elementorWidgetParentSelector = "."+g_elementorWidgetParentClass;
		g_multistepFormSelector = ".ue-multi-step-form";
		
		g_objWidget = jQuery("#"+widgetId);
		g_objButton = g_objWidget.find(".ue-submit-button-element");
		g_objLoader = g_objWidget.find(".ue-submit-button-loader");
		g_objMultistepForm = jQuery(g_multistepFormSelector);
		
		//helpers
		g_dataEditor = g_objWidget.data("editor");
		
		//check for multiple submit buttons 
		findOtherSubmitButtons();
		
		//check for multistep form mode
		initMultiStepFormMode();
		
		//init events
		g_objButton.on("click", onSubmitButtonClick);
	}
}

Upload File

Create Folder