Restrict Form submission on second request

Posted by Virendradugar under jQuery on 2/3/2010 | Views : 3695 | Status : [Member] [MVP] | Replies : 7
Hi All,

I have a problem. On my page, there is an Add button which adds records in the database. After successful database operation, if I press F5 then browser sends the previous request to the server and it add duplicate record in the database. I know I can handle it through many ways.

But I am interested to know whether it's possible via JQuery or not. If yes, then kindly let me know how.

Thanks,
Virendra Dugar




Responses

Posted by: RtpHarry on: 2/3/2010 [Member] [MVP] Bronze

Up
0
Down
I think one accepted way to do this is to redirect the user to a success page when the operation is complete. That way if they click back they just go back to the edit page. They would have to submit the page again to redo the operation.

Another way would be to generate a unique ticket id with the operation and mark that ticket as used once the operation has been done. That way if you get a subsequent request you can check if the ticket has been used and discard the request.

I know you said you wanted to do this via jQuery but I dont think you will have much with this method.

Virendradugar, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Virendradugar on: 2/3/2010 [Member] [MVP] Silver

Up
0
Down
Thanks for your response.

Reason for asking via JQuery is, As I know it's possible via JQuery. I had visited a website where the solution was provided and now I am not able to recall it.

Thanks,
Virendra Dugar

Virendradugar, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: SheoNarayan on: 2/4/2010 [Administrator] HonoraryPlatinum

Up
0
Down
I think one way is following

function SubmitData() {

var fText = document.getElementById("TextBox1").value;
$(document).ready(function() {
$.post("Child.aspx", {
firstName: fText,
},
function(data) {
$("div#divResult").html(data);
});
});
}


Here on click event of the submit button you fire the SubmitData function. The form will be submitted using Post method so in the server side you will have to get the form data using Request.Form["firstName"] (here we have passed only one form element firstName, see the 5th line).

Whatever results will be returned from the server page where you are submitting the data will be inserted into the div element whose id will be "divResult".

As the form data will be submitted without whole page post back using jQuery so even if the user is hitting F5 the data will not be submitted to the server but the form page will be refreshed.

I hope this solution will help.

Regards,
Sheo Narayan
http://www.dotnetfunda.com

Virendradugar, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Virendradugar on: 2/4/2010 [Member] [MVP] Silver

Up
0
Down
Hi Sheo,

Thanks for your response.

I found couple of links where solution is provided but solution does not seem to work.

http://greatwebguy.com/programming/dom/prevent-double-submit-with-jquery/
http://henrik.nyh.se/2008/07/jquery-double-submission

I am trying and if you have time then please look into this.

Thanks,
Virendra Dugar

Virendradugar, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: SheoNarayan on: 2/4/2010 [Administrator] HonoraryPlatinum

Up
0
Down
Thanks Virendra.

I think the solution given in the urls will not work in your specific scenario as you will post back the page to the server and when user will click F5 the form will be submitted again even if somehow you have implemented the given solution in the urls.

I think you should first find the solution to submit the data without completely posting back the page. For this you can use Ajax or jQuery.

Thanks

Regards,
Sheo Narayan
http://www.dotnetfunda.com

Virendradugar, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Virendradugar on: 2/4/2010 [Member] [MVP] Silver

Up
0
Down
Hi Sheo,

Yes, you are correct.

Just for your info, My Page is already placed in UpdatePanel. As I am using File Upload control and which works only with Postback trigger within updatepanel. So it does a full postback. That;s where the problem is.

Let me know if you have any solution for this.

Thanks,
Virendra Dugar



Virendradugar, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: SheoNarayan on: 2/4/2010 [Administrator] HonoraryPlatinum

Up
0
Down
You can try using iframe for FileUpload.

Try this way (the 2nd option)
http://geekswithblogs.net/ranganh/archive/2008/04/01/file-upload-in-updatepanel-asp.net-ajax.aspx

I am not sure if it does a complete page postback as have not tried this one earlier, I am sorry for this. See if this is also doing the same.
http://www.aspsnippets.com/Articles/Using-FileUpload-Control-inside-ASP.Net-AJAX-UpdatePanel-Control.aspx

Regards,
Sheo Narayan
http://www.dotnetfunda.com

Virendradugar, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response