My issue is simple -
I am submitting form using jquery and ajax . When the button is clicked the data is submitted to database .
Question - If the user clicks the submit twice there are two entries in the database . how can I solve this ?
I cannot use .one() because the submit button invokes validation function if the errors happen the data will not be submitted .So , user has to call the same function again .
Obviously I can do that with a variable on .success .but what is the best solution to this issue .
Thanks for the help.
Overlaying to prevent click is one way.
If you want something plug and play blockUI.js is good. All you need is
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
or you can just use .ajaxstart() and .ajaxstop() to overlay an element yourself to enable and disable the submit button.
You can disable the submit button once you have submitted the form. Any form can be submitted only using the Submit button. So:
$(form).submit(function () {
$(this).find("input:submit").prop("disabled", true);
// You can enable it back once the AJAX request is successful.
$.ajaxSuccess(function () {
$(form).find("input:submit").prop("disabled", false);
});
});
Related
is there way to submit part of a form without refreshing the whole page? Basically, I want to add a search box with a button in the view, when I click this button it runs a function / action in the controller. My apology if this has been asked before but I've searched for couple of hours and I couldn't understand the ones I came across.
This page will help you learn about how CakePHP handles AJAX:
http://book.cakephp.org/3.0/en/controllers/components/request-handling.html
Now, be aware the default behavior of a form is submit itself to a page or to the same page (reloads). If you want to prevent the form from submitting (reload the page) have something like this:
<form onsubmit = myFunc() >
..
function myFunc(){
//Send the ajax request. You can use JQuery
//Handle response
return false; //This will prevent the page reload...
}
By using gravity form I have generated a contact form. When I submit the form, the form disappears and a success message is shown.
What I want, is that the form stays, and a success message is shown below the form. Can anyone help me solve this..
Enable AJAX
Checking this option will enable your form to be submitted via AJAX. Submitting the form via AJAX allows the form to be submitted without requiring a page refresh.
https://www.gravityhelp.com/documentation/article/embedding-a-form/
You can enable it in the settings if you go into Wordpress admin -> form -> settings
You can use this filter
add_filter('gform_get_form_filter', function($form_string, $form) {
$form_string = str_replace( "replaceWith", "append", $form_string );
return $form_string;
}, 10, 2);
$form_string contains javascript which is executed after form submit.
You're replacing the javascript function replaceWith with append.
Works perfect for me.
This answer responds to Adrian's comment on Svetlozar's answer.
To disable the Ajax realoader thing just go to posts, find the form from there and you can disable it in the settings on the right side in advanced options.
Alternatively I am thinking just find the CSS for that reloader and use display:none in CSS.
At the moment I'm working on a project that requires the submission of a form for 'voting' for specific posts. At the moment clicking on the submit button works as it should, although if the button is clicked more than once, it does exactly that - submits the POST variables more than once causing them to be able to 'vote' for the item multiple times in one set of clicks.
I've looked at every jQuery code example I can find to solve this but nothing works. It works to disable the button, but after that the redirection page that grabs the data and runs the queries returns an error as nothing has been submitted. In short, it seems to disable the button but at the same time disable the information from being submitted.
Here's my jQuery code:
$('#vote').submit(function(){
$(this).children($btn).attr('disabled', true);
return true;
});
Any help would be great.
Thanks.
Use jquery .one
Description: Attach a handler to an event for the elements. The handler is executed at most once per element.
$(document).one("click","#vote",function(){
$(this).children($btn).attr('disabled', true);
return true;
});
Probably your best option is to only allow a single submission and adjust the button appearance some other way:
var submitted = false;
$('#vote').submit(function(){
if(submitted) {
// cancel additional submits
return false;
}
submitted = true;
$(this).children($btn).val('Please wait...');
});
you could add an click event. Instead of using submit button use a button click event.
the code might look like this
$($button).click(function(){
$(this).attr("disabled","disabled");
$($form).submit();
});
Jquery's on and off can be used here.
for example after submission,you can completely disable the click by
$('#vote').off('click');
and then switch it back if you want by
$('#vote').on('click');
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 have some code that isn't doing what I want it to in IE8. When you hit the "preview" submit button, a bit of Javascript jumps in and changes the form's action to franchisepreview.php. This sets a session variable so when you go back to the form you won't loose anything. Hitting "Update" or "Insert" goes straight to a query that inserts a franchise.
In IE8 the Javascript isn't jumping in. It submits the form without ever changing the action.
The bit of jQuery I'm using:
The bind:
jQuery("#preview").bind("click", changeForm);
The function changeForm:
function changeForm(event)
{
alert("Before: "+ jQuery("#franchiseform").attr("action"));
jQuery("#franchiseform").attr("action", "franchisepreview.php");
alert("After: "+ jQuery("#franchiseform").attr("action"));
jQuery("#franchiseform").submit();
}
Maybe try chaining to make sure the attribute is set before the form is submitted:
jQuery("#franchiseform").attr("action", "franchisepreview.php").submit();
Doesn't look like .attr() accepts a callback.