I use some jQuery on a current gravity form. However, when I submit the form and it comes back with bad validation, I lose some of the jQuery targets.
I'm curious how I can swap out $(document).ready(function() { with something that will call my jQuery once the fields are reloaded with bad validation.
I've tried $("#gform_submit_button_1").click(function() { however, that's too soon. It needs to happen when the new fields come back from ajax.
There is actually a hook provided for use here: gform_post_render
This jQuery hook is fired every time the form is rendered to allow custom jQuery to be executed. This includes initial form load, going to the next/previous page on multi-page forms, form rendered with validation errors, confirmation message displayed, etc.
jQuery(document).bind('gform_post_render', function(){
// code to trigger on AJAX form render
});
http://www.gravityhelp.com/documentation/gravity-forms/extending-gravity-forms/hooks/javascript/gform_post_render/
For some reason Gravity Forms still hasn't added a jQuery hook for failed form validation. What they recommend doing is checking for the existence of div.validation_error.
jQuery(document).on('gform_post_render', function(e, form_id) {
if ( jQuery('div.validation_error').length > 0 ) {
console.log('Form validation error.');
}
});
You'll notice I'm not specifying a parent when I check for the validation error element: jQuery('div.validation_error'). If you have multiple forms on the page this would cause issues. The form_id parameter that is returned contains the form's ID in the database (e.g. 1, 2, 35, etc.) but I'm not sure if this value matches the forms ID in the HTML, e.g. <form id="gform_1">. If it does match, then it's good practice to specify the parent, so you could do:
if ( jQuery('div.validation_error', '#gform_' + form_id).length > 0 ) {
Maybe somebody else could weigh in and let us know if the form's HTML ID will always match the form's database ID.
Gravity forms does supply a gform_confirmation_loaded hook, but I don't think this will work in your case since it's not loading the confirmation, but the error state form. They don't have a hook for this but I've had success using jquery delegated events. I use the .gform_wrapper as my first selector and then target the fields I want to actually target.
See this documentation for more info:
http://api.jquery.com/on/#direct-and-delegated-events
http://www.gravityhelp.com/documentation/gravity-forms/extending-gravity-forms/hooks/filters/gform_confirmation_loaded/
One solution is: catch the submit event and start a interval that checks your form for changes and then calls your function:
$('#your-form').submit(function(){
html = $('#your-form').html();
iv = setInterval(function(){
If($('#your-form').html != html){
yourfunc();
clearInterval(iv);
}
}, 200);
});
function yourfunc(){
//your stuff
}
This is however not very neat and it will only work if the html is actually changed after the Ajax call.
Related
I've a jQuery code which show/hide some disabled fields, based on an user select option:
$('.fieldcontent').not('.info').hide();
$('#selector_cs').change(function() {
$('.fieldcontent').customFadeOut(100);
$('.' + $(this).val()).customFadeIn(900);
$('input').prop('disabled',false);
$('textarea').prop('disabled',false);
$('select').prop('disabled',false);
});
});
The big headache is: if one or more fields are fading in, these fields doesn't pass my php validation, nor submitting the form.
If javascript is disabled on all browsers, the form works perfectly.
PHP validation is
if(!isset($_POST['products'])) {
$products[2] = clean_var($_POST['products']);
}
else {
$error = 1;
$products[3] = 'color:#FF0000;';
}
for all fields
Is there any php /jquery solution (no ajax please, 'cause i won't make the whole form again, and don't know anything about ajax)?
Thanks in advance for help
EDIT: Just detected another error: If the jquery script fadein another section of the form, PHP doesn't validate it anymore. Why? Never had problems like this with php-jquery.
If you leave them enabled, but change the property type to hidden then PHP should see the fields when you submit them.
Update
How about the following scenario:
5 fields shown
start-hiding two fields (A+B)
'add' two type=hidden fields with the same name as A+B and copy their current value from A+B to `A+`B
PHP should see these two hidden fields instead of the fields that are currently fading out.
If the user did not submit while fading out, then when the fields have faded out remove the `A+`B fields and set the property of the two faded fields to hidden
Inverse this for showing them fields again.
Do take note that this is not a problem caused by PHP but caused by how/when a browser interprets a form field to be a valid form field to be send when submitting the form
I've the following problem...
My application uses the php, smarty templates and jQuery.
Inside the smarty template there is defined a form with POST method.
The action parameter of the form is defined as follows:
action={if isset($search_place)} {link->somePhpFunction($search_place) {/if}
...because I need to change the action depending on the POSTED parameter.
The input (text) with the "search_place" name is defined inside the form.
The submit button is linked to the jQuery function, as I need to perform some actions on the client side (value check, autocomplete, etc.).
When the button is clicked, I need to
The problem is that when I post the form by the jQuery button, the form will not take the
When the button is clicked then the jQuery handler is called where some checks/corrections are performed and then the page with the form is displayed.
The problem is, that before defining the action parametr from the form the search_place variable in not known and the php function is not called at all.
I've also tried to set a cookie in the button handler and to set the form action to the {$smarty.cookies.search_place} value but the problem changed into another one - the form allway performes action of the previous button click so it is necessary to click the button TWO TIMES to get the correct results.
It is also necessary to mention that there is no way to transfer the needed action parameter to the jQuery event handler as the php function selects the correct one from the large table in database. If this is possible, then it would be easy to change the action parameter from the jQuery function...
The only way I know is to use AJAX to get the right parametr and assign the correct action parametr from the button event handler but it is not the right solution for me as many of my site visitors have not the browser javascipt enabled.
The solution could be also to perform (programmaticaly) one more click on the button from the jQuery event handler but I don't know how to do it...
Any help or idea how to solve this issue will be greatly appreciated...
Thank you in advance. JaM
Try the following:
<form onsubmit="return validationFunction()">
and let this function validate the data and return true if correct and false if not.
now for the js. don't call something like
$("#someForm").submit();
instead use:
if(validationFunction()){
$("#someForm").submit();
}
Update
finally if your validationFunction will do some server-side work
Then instead some variable like
var formSubmitted = false;
then onSubmit return false; and set the formSubmitted to true, and do your ajax call, and when the ajax call is done, check the formSubmitted if it's true then submit the form if not then show some error...
I've got a bit of a weird problem.
I'm creating a location based web app that is using a javascript function to get a user's GPS coordinates. I have a form with a submit button, and when that submit button is clicked, the function is called (onclick='getCoords()"). The javascript then sets that values of two hidden fields (latitude and longitude) to the GPS coords.
My issue is this: PHP is 'beating' the javascript in the sense that the field values aren't being set in time, so that each value becomes a 0. I've done a bunch of testing, and this is definitely the issue. If I do something like set a seperate button to run the javascript function, the run the form everything works fine.
Any ideas on how to solve this problem?
Gists:
https://gist.github.com/2425419
https://gist.github.com/2425394
https://gist.github.com/2425391
Along the lines of what Volkner said, block submit using a submit handler (call preventDefault), then submit at the end of itsWorking. You can either call .submit() to do the submission, or use AJAX.
I think the crux of your problem is that an <input type="image"> will submit a form just as sure as <input type="submit"> will.
However, to fix this as is, add event as a parameter to both the call and declaration of getUserLocation(event).
Then edit your JavaScript as follows:
function getUserLocation(event) {
event.preventDefault(); // prevents form from submitting
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(itsWorking, notWorking);
}
else {
alert("Dang! Your browser doesn't support finding your location, use the zipcode method below.");
}
};
function itsWorking(position) {
var lat = position.coords.latitude;
var longi = position.coords.longitude;
var finalLat = Math.round(lat*1000000)/1000000
var finalLong = Math.round(longi*1000000)/1000000
$("#longi").val(finalLong);
$("#lati").val(finalLat);
document.getElementById('findoneform').submit(); // submits form since we were successful
};
But like I originally stated, it seems if you used an img tag instead of <input type="image">, that would prevent the form from sending in the first place (and maybe you did this on purpose, because you wanted to have two ways to submit the form?).
This issue happens because the page unloads (submits the form) before the geolocator's done doing its thing, but this way, we stop the form from submitting, and itsWorking() only gets called AFTER the geolocator has done its thing, so we don't submit the form until the end of itsWorking() when we've done everything we wanted to do.
I think I got a classic problem but I was not able to find a working solution so far.
I have got a form , the user clicks "Send" and everything works fine using a PRG pattern and doing both client-side and server-side validation.
The problem arises when any user (let's assume he entered valid inputs) clicks more then once quickly before the server script ends its execution...
I do not get any duplicated entry because I took care of that but the browser does not go to my "thanks for submitting page".
Instead it re-submits the same page with the same values and what I get are the custom errors I set to warn the user he is trying to enter details already stored in the database. The details sent in the first place are all in the database but the user has no chance to know that.
I tried to disable the submit button on a submit event using jQuery but in that case the data are not submitted.
HTML
<div id="send-button-container">
<input id="send-emails" type="submit" name="send_emails" value="Send"/>
</div>
jQuery
$(document).ready(function(){
$('#mail-form').submit(function(){
$('#send-emails').attr('disabled','disabled');
});
});
I am wondering if I can force a submission using Javascript after disabling the button and also how to deal with UAs with Javascript disabled
Thanks in advance
Depending on server-side language, the submit button being disabled could cause problems. This is because disabled elements are not POSTed to the server. Languages like ASP.NET require the button value to be submitted so it knows what event handler to fire. What I usually do is hide the submit button, and insert a disabled dummy button after it, which appears identical to the user. Then in your onsubmit handler, you can return false and submit the form programmatically...
$('#mail-form').submit(function(){
var btn = $('#send-emails');
var disBtn = $("<input type='button'/>").val(btn.val()).attr("disabled", "disabled");
btn.hide().after(disBtn);
this.submit();
return false;
});
Contradictory to the other up-voted answers, please note that you do not need to explicitly return true from your submit handler for natural form submission: http://jsfiddle.net/XcS5L/3/
I assume this means you are depending on the value of the submit button to service the request? That is you are checking
$_REQUEST['send_emails'] == 'Send';
This is not good practice. You should never depend on the value of the submit button because that is the just what is displayed to the user. Instead, you should add a hidden input that contains the event you want to fire. After the form is submitted, you don't need to care what the value of the submit button is and you can disable it. All other non-disabled data in the form is still submitted.
You can indeed force the submission after disabling the button.
$(function () {
$("#mail-form").submit(function () {
$("#send-emails").attr('disabled', 'disabled');
window.location = '?' + $("#mail-form").serialize() + '&send_mails=Send';
return false;
});
});
Server side set a $_SESSION variable that keeps track of the last time they made a submission and block submissions within a certain time.
<?php
session_start();
if (isset($_REQUEST['send_emails'])) {
if (isset($_SESSION['mail_sent'])
&& strtotime($_SESSION['mail_sent']) < strtotime('5 seconds ago')
) {
redirect_to_thanks();
}
do_post();
}
function do_post() {
if (do_validate()) {
$_SESSION['mail_sent'] = time();
redirect_to_thanks();
}
else {
yell_at_user_a_lot();
}
}
?>
You have to return true; You could try this if u want a simple button to submit the form.
$(function(){
$('#submitID').one('click',function(){
$('#formTobeSubmitted').submit();
$(this).attr('disabled','disabled');
})
});
On server side, generate a random number into each form, store the number when the form is submitted, and discard the submit if that number has already been stored earlier. When the user has disabled javascript, this is the best you can do. (Concurrency issues can be tricky as the two identical requests are handled at the same time - make sure you use some sort of locking mechanism, such as a table with a unique field or the flock() command in PHP.)
On browser side, just set a flag when the form is submitted, and discard all later submits:
$('#mail-form').submit(function() {
if ($(this).data('submitted') {
return false;
} else {
$(this).data('submitted', true).addClass('submitted');
}
});
You can use the submitted class to make the buttons gray or something. This has a few advantages to simply disabling them; Josh already said one. Another is that Firefox likes to remember disabled states when you hit refresh, which can cause your users getting stuck in certain situations.
I want show Loader img with jQuery when you post by PHP Simple action="search.php" Not ajax post or jquery post
and Thanx for all
This problem is not solvable in a meaningful way without the use of AJAX. In other words, you need AJAX to show a "loading" image while the response from a form submission is handled by the server.
If I understand you correctly, then you have a form:
<form action="search.php" method="post">
...
</form>
And it is handled as a regular HTML form. The data is passed by the page to the server that uses PHP to handle it. Without AJAX, you have no good way of finding out when the response of the form, the search results, are ready.
Generally, what is done is that the form is submitted to the server with the use of AJAX. The form is handled by the server (PHP does its stuff). During this time, a "searching" image is shown. Then when the server responds, the image is removed and the search results are shown.
Using jQuery and AJAX on a page this could be done like this:
jsFiddle example
// The form has an id of "theForm".
// This function defines what happens when it is submitted.
$('#theForm').submit(function() {
// Replace the form w the search icon.
$("#theForm").html('Searching...<br/>' +
'<img src="http://i.stack.imgur.com/ZK0sq.gif" />');
// Make the search request to the PHP page.
// The 3 arguments are:
// 1 - The url. 2 - the data sent
// 3 - The function called when data is sent back
$.post("/ajax_html_echo/", $(this).serialize(), function(result){
// Here we replace the search image with the data
$("#page").html(response);
});
// Cancel the regular submission of the form.
// You have to do this, or the page will change and things won't work.
return false;
});
The nice thing about the above is that it degrades nicely if JS is off, since you still have the regular HTML form and its regular submit functionality to fall back on, and if JS is on, then it blocks this regular functionality with the return false and uses the AJAX.
Jquery used:
.submit()
.html()
.post()
.serialize()