I am using gravity form to submit my lead to a third party the problem is when I click on submit it takes 5 seconds to get a reply and post the lead, while that is happening I want to show a loading or searching animation to the user.
I am using gravity form and I have no Idea where and how to add this function.
Can somebody please help me to get this resolved, I am not using ajax.
The most recent update should have a default loading image, when you have AJAX as true in the PHP shortcode.
When AJAX attribute is true like here
<?php
echo do_shortcode('[gravityform id="1" title="false" description="false" ajax="true"]');
?>
Do this...
To keep from getting duplicate lead submission when the submit button is clicked. Keep in mind that the Gravity Form will handle the validation. This will style the button, change the text inside of it and disable the buttons click. The loading image will show by default via Gravity Forms.
<script type="text/javascript" language="JavaScript">
$(document).ready(function(){
$('#gform_1 input.gform_button').live('click', function(){
submitContactForm( $(this) );
});
});
function submitContactForm( _this ){
_this.die('click');
_this.css('opacity', '0.5');
_this.val('Sending...');
_this.attr('disabled', 'disabled');// using this will stop the form from submitting
$('#gform_1').submit();// this will make sure that it submits
//console.log('calibrating...');
}
</script>
In jquery try this to override the image src when it's visible, inside of the "submitContactForm" function.
if ( _this.closest('.gform_footer').find('img.gform_ajax_spinner').is(':visible') ){
_this.closest('.gform_footer').find('img.gform_ajax_spinner').attr('src','DIRECTORY OF YOUR CUSTOM SPINNER IMAGE');
}
So that you won't have to remember to override that image anytime that you update the Gravity Form plugin.
Related
Do you know a way to display a php result inside a div dynamically, without refreshing the page?
For example, we have 2 divs: one on the top half of the page and one on the bottom of the page. The top one contains a form with 3 input fields. You type some values inside, then press a button. When you press the button, the bottom div displays the values without refreshing the page.
You can't do it with pure PHP because PHP is a static language. You have to use Javascript and AJAX. I recommend using a library like Zepto or jQuery to make it easy to implement like this:
<form>
<input name="search" />
<input type="submit" />
</form>
<div id="div2"></div>
<script>
// When the form is submitted run this JS code
$('form').submit(function(e) {
// Post the form data to page.php
$.post('page.php', $(this).serialize(), function(resp) {
// Set the response data into the #div2
$('#div2').html(resp);
});
// Cancel the actual form post so the page doesn't refresh
e.preventDefault();
return false;
});
</script>
You can accomplish it using AJAX. With Ajax you can exchange data with a server, make asynchronous request without refreshing the page.
Check this out to see how it can be implemented using Jquery:- http://api.jquery.com/jQuery.ajax/
I have a contact form which is hidden when the page loads. The contact form can then be viewed by clicking the contact form button, causing it to slideUp and slideDown. The problem is that when the form is submitted the page refreshes and if there is an error message or a success message it is hidden because the page has reloaded, you have to click on the 'contact form' button to see it. I'm not great with jquery or php. Any help would be much appreciated. Once the form is submitted I need the messages to appear.
the website is http://www.carlisleironing.co.uk/index.php
My jquery is
$(document).ready(function () {
$("#contactLink").click(function () {
if ($("#contactForm").is(":hidden")) {
$("#contactForm").slideDown("slow");
} else {
$("#contactForm").slideUp("slow");
}
});
});
add the following (just before the last }); in your question):
if ($('#contactForm #error').size() > 0){
$('#contactForm').slideUp('slow'); // or just .show();
}
Test if the #error element is present and, if so, show the form. I'm not sure what your success message looks like but a similar test can also be one for that.
As for the other answers: yes, you can do an AJAX submit but chances are (and I'm assuming context here) that's out of the scope of this question. That would involve special request handling and additional validation librar(y/ies) added.
You can use ajax to submit the form and show the result without reloading the page:
$('form').submit(function() {
$.post($(this).attr('action'), $(this).serialize(), function(data) {
console.log(data);
});
return false;
});
I am assuming that when someone submits the form, the php page generates the errors, but the user is not able to see them, because the form is hidden by default on a page load.
You can name the submit button. If the user clicks the submit button, the value of the button is send with the get or post request. You can then change the behaviour of your php page to not have the contact form hidden if the form was submitted.
<input type="submit" name="theSubmitButton" value="Submit!" />
In php $_GET['theSubmitButton'] (or $_POST if you are using a post request) will be set if the user submitted the form, and it will not be set if that was not the case. You can use isset( $_GET['theSubmitButton'] ) to test if the user did submit the page and alter the class of the contact form accordingly.
1.I've a page where on clicking button brings up the modal. What I would like do to is move all models to a separate page. I've tried this
$('#newSection').click(function(){
$('#temp').load('adminmodels.php');
$('#newSectionModal').modal('show');
});
On first click, nothing happens. On subsequent clicks, the modal appears and fades automatically. Please suggest and corret my code.
2.I would like to submit a form from inside of a modal and then display the response in the modal itself.
$(document).ready(function(){
$('#user_button').click(function(e){
e.preventDefault();
$(this).attr('disabled',true);
$.post('__admin_ajax.php',postString,function(response){
$('#user-modal-body').html(response);
});
});
});
The response of previous form submission retained for subsequent modal loads.
I find for this type of logic, it's easier to just use an iframe.
<div id="newSectionModal">
<iframe id="modal_frame"/>
<div>
And then in the code.
$('#newSection').click(function(){
$('#modal_frame').attr('src', 'adminmodels.php');
$('#newSectionModal').modal('show');
});
Because it's in a frame, you can handle the form submission as if it were in it's own window. At any time, you can trigger the parent frame by calling window.parent. Ex: window.parent.trigger("form-submitted")
Overview
I have div#lead_form that SlideDown in 5 seconds after page loads. And in that div, I have a submit button. Everytime someone clicks submit, the form within #lead_form will validate the input fields and refresh the page.
Issue
Everytime the form validates, it refreshes the web page and the div#lead_form SlideDown takes 5 seconds to slide in. What I want to do is, have a true false variable and check if the submit button has been clicked, if true, disable the div#lead_form SlideDown effect?
My HTML
<div id="lead_form">
<div id="button"></div>
</div>
My jQuery
$(document).ready(function() {
$("#lead_form").hide(0).delay(4000).slideDown(5000);
});
Findings
This is not exactly what I'm after, but similar?
In your server side code check if the request is coming with your form submitted, and write the result as a javascript var in a given section on your page
if( isset($_POST['yourFORMFIELD']) )
{
echo "var postBack = true;";
}
then change your jQuery ready to
$(document).ready(function() {
if(!postBack) {
$("#lead_form").hide(0).delay(4000).slideDown(5000);
}
});
As there is a page reload you can not solve this using javascript only.
you have to somehow persist the state (if the form was submitted) and check that state after the page is reloaded.
you can do this either via a cookie or the local storage (local storage will only work in most recent browsers)
I am currently working on a php e-mail system. I created a javascript pop-up page where I can add users (mail addresses). Now I want to post the selected user('s) from the javascript pop-up window to open the website of course I get the page where you want to post in the pop up to see.
Now I want to now, if there is click on the submit than close the popup and allows the data to the open web page whit post?
How can i do this??
you might want to look to the overlay plugin at jquery tools. Pop-ups are blocked by the browser most of the times. And imo an overlay is a more elegant solution. Furthermore, you can just post your form as you would normal do on a webpage, nu extra js needed there!
--- edit; when reading your question more closely; you don't even need to post the page! Just assign a click event to the submit button (which doesn't necessarily needs to be a submit button). In your event function you can read out the filled in addresses (or other information), paste it into the desired fields (whether it be a form field or just a regular div) and close the overlay again. Now you don't even need a page refresh!
You'll want to use AJAX to post the form asynchronously so the user doesn't have to wait for it to process or view the processing page. jQuery makes it very easy to use AJAX as shown here.
Also, after the work is done in the popup window you can access and refresh the parent window using the window.opener function:
<script language="JavaScript">
function refreshParent() {
window.opener.location.href = window.opener.location.href;
window.close();
}
</script>
<script>
$("a[href=#myModal]").click(function() {
var str = $(this).attr("data-phpvar");
var substr = str.split('||');
$("[name=textinput1]").val(substr[0]);
$("[name=textinput2]").val(substr[1]);
});
</script>
<form>
<table>
<tr>
<td>
</td>
</tr>
</table>
</form>
OnClick of the href link or button you will send the data-php-var to the jQuery function. This function will send the values into the popup. In the popup is a text-field with the same name the jQuery function will put your values into de field.