I have a confirm step in one of my pages.
Desired action:
user clicks 'submit' and an AJAX request is made that does the appropriate action and returns a confirm dialog
user 'confirms' and then the form is submitted using a standard post.
So for the first part I'm fine using the jQuery form plugin:
$('form').ajaxForm(...options...);
For the second part I'd like to submit the form again, but non-ajax. Basically I want to do this:
$('form').submit();
And have it do an actual browser post. The problem is that $('form').submit() just triggers the ajax submit.
Is there a way to use the form for both purposes?
$('forms-submit-button').click()
..does that work , for the second submit?
:) :)
Can't you just unregister the submit event handler after you've ajax-posted the results? Why do you need to post the same data twice, by the way? If the data haven't changed between the Ajax post and the regular one, why is the regular one needed?
You can try to change a value in the form (se some hidden value to 1), do another ajax request and finally do a redirect. It's not the same but it should work.
Note that it's very strange to submit the same data twice though..
Answered by Surya as a comment (if you check this question again please post the answer so I can mark it!)
$('forms-submit-button').click() ..does that work , for the second submit?
form onsubmit='ajaxCheck();'
...
/form
script
var ajaxCheck = function()
{
//do check
return confirm(); // if ok form submit normaly / if cancel form doesn't submit
}
/script
or something with a flag:
var flag = true;
var firstCheck = function()
{
if( flag )
{
//do the ajax Call which will fire an event,
// let's call it onData
$.post(url,{param1:val1,...,paramN:valN},onData);
return false;
}
return true;
}
var onData = function (data)
{
flag = !confirm(...);
//if user click ok and try to re-submit the form
//this time will just go
}
Related
I'm facing a sort of dummy problem.
On my site there is an order form (simple html form) and I noticed that I get double commands from time to time.
I realized that if I clicked repeatedly few times the submit button (before the action page is loaded) I got as many commands as I have clicked.
So I wonder if there are simple solution to make form submission asyncronous?
Thanks
P.S. I added JQuery UI dialog on submit "wait please..." but I get still double commands.
UPDATE
As GeoffAtkins proposed I will:
disable submit after dialog is shown
make use of unique form's token (as it is already added by Symfony) Do not use Symfony token as unique form token as it is always the same for current session. Use just random or something like that.
I would consider doing this (jQuery since you said you used that)
$(function() {
$("#formId").on("submit",function() {
$("#submitBut").hide();
$("#pleaseWait").show();
});
});
if you submit the form and reload the page.
If you Ajax the order, then do
$(function() {
$("#formId").on("submit",function(e) {
e.preventDefault();
var $theForm = $(this);
$("#submitBut").hide();
$("#pleaseWait").show();
$.post($(this).attr("action"),$(this).serialize(),function() {
$theForm.reset();
$("#submitBut").show(); // assuming you want the user to order more stuff
$("#pleaseWait").hide();
});
});
});
NOTE that disabling the submit button on click of the submit button may stop the submission all together (at least in Chrome): https://jsfiddle.net/mplungjan/xc6uc46m/
Just disable the button on click, something like:
$("#my-button-id").on("click", function() {
$(this).attr("disabled", "disabled");
});
var bool = true;
function onclick()
{
if(bool)
{
//do stuff
bool = false;
}
else
{
//ignore
}
}
You could disable the button on the form when it is clicked, and then continue to perform the action. You would probably change the text to say "loading..." or some such.
You may also want to re-enable the button on fail or complete of the ajax request.
I've done this many times similar to this: https://stackoverflow.com/a/19220576/89211
I have a form that uploads a file and targets an iframe on the page. When the user clicks submit, I want the file contents to "clear" out.
I tried this
$('#imageaddform').submit(function(){
$('#imagefile').val('');
});
But it clears the form before the submit, so nothing is ever uploaded.
Is how do I clear after submit?
If you have no other handlers bound, you could do something like this:
$('#imageaddform').submit(function(e) {
e.preventDefault(); // don't submit multiple times
this.submit(); // use the native submit method of the form element
$('#imagefile').val(''); // blank the input
});
Lonesomeday's solution worked for me but for Google Chrome I found it would still submit empty form data unless I added a timeout like this:
$('#imageaddform').submit(function(e) {
e.preventDefault(); // don't submit multiple times
this.submit(); // use the native submit method of the form element
setTimeout(function(){ // Delay for Chrome
$('#imagefile').val(''); // blank the input
}, 100);
});
You could do something like this:
$('#imageaddform').submit(function(){
setTimeout(function() {
$('#imagefile').val('');
},100);
});
How are u submitting the form? if this is normal form post then then page wont exist in that case i am wondering if u are looking to clear the form before the page refreshses so that when the user comes back he doesn't see the values populated.
If the form is submitted by ajax then you can
function(){
$('form1')[0].submit();
clearForm();
}
Did i miss the question?
Is there a way to disable/submit the form submit button if the form has validation errors in such a way that the user can click it only if the form is valid.
I'm using unobtrusive validation with "remote" attribute validation with ASP.Net MVC 4 and razor.
Thanks and best regards
Depends on where you are doing your validation. If you are doing it server side with jquery you can add e.preventDefault to the check if it is invalid and the button click won't fire until your conditions are met. If you are doing server side validation using attributes then you can check model state like
if (ModelState.IsValid){
}else{
}
and if the model state is valid (the data passes all the checks) run one set of code. If the model state is invalid then just return view to go back to where you started and pass a message with whatever failed for the user. Hopefully this helps.
Update:
just saw the edit on your comment. For an ajax call you will want to use prevent default.
$('.SubmitButton').on('click', function(e){
$.ajax({
//your call
success: function(result){
if(result.false){
e.preventDefault();
alert(result.message);
}
}
});
});
so if the call is successful the submit call will go through. If it is false then jquery will stop the button click and you can then display a message or do something else.
At management's request, I need to open the user's email client and submit a form on a button click. I initially had
window.location = "mailto:email#example.com";
as the callback to the click event for the submit input, but this doesn't work. It seems like the form submits to quickly.
Using window.open does work, but it creates a blank window that is undesirable.
I also had the idea to prevent and delay the form submission as in
window.location = "mailto:personalcounselor#gleim.com";
setTimeout(function () {
$(this).closest('form').trigger('submit');
}.bind(this), 1000);
e.preventDefault();
This also works, but it seems sketchy to me.
Is there any way to submit the form and open a mailto link at the same time?
I don't know if this will work, but I am sure with a bit of tweaking it should work and have the desired result which you are after (it was too long to fit in a comment, if it will not work I will gladly delete it!);
$("form").on("submit", function() {
window.onbeforeunload = function() {
window.location = "mailto:email#example.com";
};
});
Simply put when the form is submitted, set the onbeforeunload event to change the location to the mailto. I think doing it this way will only make the mailto open if the form is submitted rather than when a user just navigates away.
I don't know if this will work, or how hacky it is, but thought I would throw in my two cents!
UPDATE
On form submit, mailto from javascript with form values
This does seem to work and verified by others.
$("input[type=submit]").click(function(){
window.location.href = "mailto:email#example.com";
});
I am making a webapplication that uses a jquery submit to request some data, but i don't want people submit the form multiple times after they submit the first time. So i want after a submit, that the next submit does nothing for a few seconds.
$("#updatestock_form").submit(function(e){
// requesting my data..
});
How can i achieve this?
"So i want after a submit, that the next submit does nothing for a few seconds."
If you mean that you want the user's second and subsequent submit attempts to be ignored until after a certain number of seconds you can do that in a number of ways. Here's the first that came to mind:
var allowSubmit = true;
$("#updatestock_form").submit(function(e){
if (!allowSubmit) return false;
allowSubmit = false;
setTimeout(function(){ allowSubmit = true; }, 5000);
// your existing submit code here
// requesting my data..
});
That is, have a flag that indicates whether submit is currently allowed. On the submit event if that flag is false just return false immediately to cancel the submit event. Otherwise (if it is currently true) set the flag to false, set a timeout to change the flag back after, say, 5 seconds, and then carry on with your existing submit code.
$("#updatestock_form").submit(function(e){
$(this).unbind("submit")
$("#submitButton").attr("disabled", "disabled")
});
Very simple.
You are doing an ajax-request to submit? So create some locking variable var locked;and set it to locked = true; when submitting and reset it to false when the ajax call is finished. (sucess-condition)
Disable button on onclick event of button
$("#buttonId").bind('click', function() { $(this).attr("disabled", "disabled"); });
and remove disabled attribute after successful operation