CODEWITHSUNDEEP
asp.netdouble-submit-problem
pita
pita

Reputation: 537

asp.net form submitted twice

I have a web page with a form and a submit button, and in the server side I used a session value to prevent the form submit twice, which is like the initial value of the session is 0 and turn it to 1 after user click submit button, every time submit button will check the session value first.

But, when our project published, I found there were two records for the same person (which means they submit twice I guess, and it didn't happen very often maybe on one or two persons), and the time interval between these two records is very small, like 0.3 second, so first I thought they might double click the submit button, but after I tried on my computer, it still only insert one record into the database

I am confused how does this happen, and how to prevent it?

Here is the code:

        protected void Page_Init(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Session["IsBackForwordPayment"] = 0;
        }
    }

    protected void submit_Click(object sender, EventArgs e)
    {

       if (Session["IsBackForwordPayment"] != null && Session["IsBackForwordPayment"].ToString() != "0")
            Response.Redirect("~/pages/renewal/duplicaterenewal.aspx");

.......
}

Is it possible because that after checking the session value the program just redirect to another page but not terminate the submit process ??

Upvotes: 0

Views: 3053

Answers (3)

Hawkeye
Hawkeye

Reputation: 638

This can happen with a double click.

When the connection is slow, the page can hang and allow the user to make two idential submits.

If this is a double click issue, you may be able to test it using Google Chrome's DevTools, under the Network Tab. Change "No throttling" to "Slow 3G"

enter image description here

I was able to duplicate my issue in a testing environment with some inconsistency, which is why I advise just going for the fix.

THE FIX:

HIDE THE BUTTON! But not totally. Show a fake button after the click.

Use a visible real button, and a hidden mock button, then hide one and show the other on the button click using JavaScript.

<button id="realbutton" type="submit"  name="Action" value="DoSomething" class="buttonstyle"> 
    Do Something
</button>

<div id="mockbutton" style="cursor: not-allowed; opacity: .5; display:none;" class="buttonstyle"> 
    Do Something
</div>

Note: style="cursor: not-allowed will change the mouse cursor to the red circle with a line through it (to indicate the button is not clickable). And make sure to use the same styling on the div as the button so it will look the same.

At the bottom of the page, include this JavaScript to switch which one is shown.

<script type="text/javascript">

  const myButton = document.querySelector('#realbutton');
  myButton.addEventListener('click', myFunction);

  function myFunction() {
    document.getElementById("realbutton").style.display = "none";
    document.getElementById("mockbutton").style.display = "block";
    // optionally you can show a modal indicating what is going on. 
    // show modal here.
  }
</script>

RESULT

Before click:

Before click image

After click:

After click image

While the testing with Google Chrome DevTools, it wasn't conclusive that slow connections allowed double clicks, but when I implemented this measure on my website, our double submit issues went away.

Upvotes: 0

theyetiman
theyetiman

Reputation: 8908

Apparently Response.End() will NOT stop the execution of the code (which is what it says it does). I discovered this here:

Response.Redirect not ending execution

You will need to add a return statement to end the execution after you do Response.Redirect().

Upvotes: 0

chead23
chead23

Reputation: 1879

Try

Response.Redirect("~/pages/renewal/duplicaterenewal.aspx", true);

This will stop execution on the current Page.

Upvotes: 0

Related Questions