PHP Calculator - Show results on page and in Ajax Popup - javascript

UPDATE - this was solved by adding $('.popup-with-form').magnificPopup('open'); to the StateChanged function in the JS. Thanks to #Bollis.
Original Question:
I have a simple calculator here: http://www.roofingcalculator.org/popup/popup.htm
when click on "Calculate" button, i need results to be displayed on that page AND initiate Ajax Popup (Magnific inline) with results displayed in popup as well.
Question: How do i make it so that pressing "calculate" button would both of these at the same time:
1) display results on page
2) Launch pupup with results of calculator
Right now, to show Popup, user needs to click on the link "Open Form".
If you open popup AND don't click "calculte" button, no results are displayed.
If you click Calculate first and then open popup, results are shown on both the page and in popup (see image).
The two things that initiate popup are:
<a class="popup-with-form" href="#test-form">
If i add class="popup-with-form" and href="#test-form" to the Calculate button, it launches popup, but no calculation is done.
All codes for calculator (JS / PHP) can be seen here.
Here is AJAX code that opens popup (i think)
$(document).ready(function() {
$('.popup-with-form').magnificPopup({
type: 'inline',
preloader: false,
focus: '#name',
// When elemened is focused, some mobile browsers in some cases zoom in
// It looks not nice, so we disable it:
callbacks: {
beforeOpen: function() {
if($(window).width() < 700) {
this.st.focus = false;
} else {
this.st.focus = '#name';
}
}
}
});
});

Try adding onsubmit="openPopupFunctionHere()" to your form tag. The onsubmit event will be triggered whenever the form should submit, which happens when you press the "Calculate" button.

Related

Gravity Forms Javascript Hook To Fire Script When User is on Specific Page on Multipage Form

I have a multi-page form created with gravity forms. It's form I use for lead generation, with the last step asking for the user's name, email, and phone number.
In the second last step before asking for user's personal info, there is a page with a "loading" gif spinner and the animated text "searching for a quote".
I need help to set up a javascript code for the second last page for when the user is on that page with the loading gif after 6.5 seconds it will automatically click the hidden page next button to take the user to the last page asking for their personal info.
I'm using the code below, which works only when the user manually clicks using the mouse or mousepad and click on the third last page. If the user enters details in the third last page and hits the enter or return key on the keyboard the code doesn't fire.
I'm not too familiar with Javascript. Just getting started learning.
I understand there's a gravity forms javascript gform_page_loaded, but that seems to fire the code on every single page rather than just when the second last page is in the user's viewport. Please help.
SEE CODE BELOW
<script type="text/javascript">
const btnSearchMortgage = document.getElementById("gform_next_button_13_16");
btnSearchMortgage.addEventListener("click", function () {
setTimeout(function () {
document.getElementById("gform_next_button_13_9").click();
}, 6500);
});
</script>
The gform_page_loaded is the way to go. You can use the currentPage parameter it passes to only trigger code on a given form page.
jQuery( document ).on( 'gform_page_loaded', function( event, formId, currentPage ) {
if ( currentPage == 2 ) {
// bind your custom event
}
} );

Delay issue in displaying live chat box upon button click

I have implemented the following requirement:
1) Initially a contact us button.
2) Upon clicking one window with 3 options will come
3) one of them is to show live chat box(like phplive chat/ zenduslive chat etc) by hiding the existing window.
But the problem is that, after clicking the submit button by selecting the live chat radio button option, it is taking some time to show live chat box after the exsiting window gets hiddden. What I need is to reduce the time delay between showing live chat widget and closing the window with radio button options. Also upon submitting the button, live chat showuld be visible in such a way that "a window that actually had the login form to type the question".
Eg of live chat : http://livechat.mirrormx.net/
SNIPPET CODE:
(function( $ ) {
$('#submit').click(function(){
var selValue = $('input[name=chat-options]:checked').val();
if (selValue == "form-one") {
$("#contacts-popup-link").click();
} else if (selValue == "form-two") {
$("#contacts-popup-link1").click();
} else if (selValue == "live-chat") {
$("#loader").show();
$("#text-7").fadeOut(1700, "swing"); // hiding the window contatining
$.getScript("//testwebsite.com/livechat/php/app.php?widget-init.js"); //loading the live chat using this url
}
});
==============================================
<div id="customer-chat-widget" class="customer-chat customer-chat-widget contact-form"> - normal chat box without window have form type question.
<div id="customer-chat-widget" class="customer-chat customer-chat-widget contact-form customer-chat-visible"> - a window that actually had the form to type the question(auto popup on each time user see the chat)
Thanks

How to close color box popup on browser back button

I want to close my color box popup on browser's back button click.
I used an iframe and inside the iframe there are many links. When user click on particular link then a color box popup will open.
Currently after opened the popup if user click on back button then popup is not closing.
So i want such a functionality that if user click on back button then popup will be close and also page should not go to back (Disable back button).
I have used the following code but it's not working for me.
<script>
$(document).ready(function() {
function disableBack() { window.history.forward() }
window.onload = disableBack();
window.onpageshow = function(evt) { if (evt.persisted) disableBack() }
});
</script>
Please give me any suggestion to close the color box popup on back button or disable the back button completely.
You should use window.location.hash, and window.onhashchange.
Basically, after popup open, you change hash to something (like window.location.hash = "popup_opend").
Then when user clicks back, that back click will remove the hash you just added.
You just need to handle window.onhashchange to check for that and close the popup.
Of course, hope you don't have any other code that manipulate the hash.

Restrict user to submit the form while processing the previous request

I have a button "print" in my jsp page. When I click on the button, a child window is opened and pdf is genarted in the child window. Once user already clicked on print button and the request is processing, I need to disable the button and show a message. My form is submitting in javascript.
I have searched for disabling buttons, but no luck. Please help me
Get the button id and disable the button in javascript as
$(#btnid).attr("disabled", true);
If you are opening a new child window and have no control on the parent page to enable it then disable it for a particular amount of time and then enable it back
setTimeout(function() { enableButton(#btnid) }, 1000);
var enableSubmit = function(btnid) {
$(#btnid).removeAttr("disabled");
}

How to add history to jQuery UI tabs using a back button

I've got a PHP file with 5 tabs (jquery ui). Tab four and five contain
forms. Forms and tab work fine - expect to this: I submit the form (POST
method not XHR), then click the right mouse button (Firefox and IE behave
identical) and select back and then select tab five in the page by mouse
click the entered form data is still available.
I try to build a link, that is more convenient for the user.
<a href="#" onClick='history.back();$("#tabs").tabs("select","4");'>modify</a>
If click on my modify link, it still jumps back to tab one and the form fields in tab five are empty.
I read several posts about jQuery UI tabs and the back button, but all seem not to address my problem.
Where is my fault and is the difference between doing this steps by hand and my link with JS?
Javascript stops executing once you leave the page that it's running on -- the second half of your onClick handler never runs.
Following from the comments here is a function that will remember what your last tab was that you selected. It does rely on you using a set "Back" button.
The problem you will find, as far as I can see, is that you can't intercept a user clicking the browser back button. I have found that creating an obvious and clear back button on the site does the job and the feedback I have had so far on our sites seem to back that up.
The function is:
$(function() {
var $previousTab = 0;
var $backButtonUsed = false;
// Initialise tabs
$("#tabs").tabs();
$("#tabs").bind("tabsselect", function(event, ui) {
if ($backButtonUsed)
{
$backButtonUsed = false;
} else {
$previousTab = $("#tabs").tabs('option', 'selected');
}
return true;
});
$("#back").live('click', function() {
$backButtonUsed = true;
$("#tabs").tabs({ selected: $previousTab });
return true;
});
});​
I have also included this in a JSFiddle, so you can see it in action with the HTML and jQuery UI Tabs.
Let me know what you think.

Categories