Prevent page from refreshing on form submission?

Yoyo Bubble asked on April 13, 2018 19:51

Hello, DevNet!

I'm wondering if there is a way to submit an online form without the page refreshing for validation/submission.

I've created a form that consists of two seperate "views" - two divs that contain the form fields that I toggle visibility on with jquery.

The first view contains two fields (name and email) and a continue button that transitions you to the second view of the form that displays the rest of the fields and the submit button.

The issue I am facing is that if a user doesn't fill out a required field on the second view, Kentico performs a postback to validate the fields but this refreshes the entire page, bringing the user back to the first part of the form where the two fields have already been filled out. There is no way for the user to know what went wrong since they would need to hit continue to move on to the second part of the form to see the validation errors.

Maybe there is a way to create a custom submit button that posts the form WITHOUT refreshing? Not sure if that's possible...

Any help on this is greatly appreciated. Thanks in advance!

Correct Answer

Brenden Kehren answered on April 14, 2018 00:03

That's an asp.net form submission for you. If you want only a partial postback, wrap it in an update panel. On the webpart on the page template, you can check a box to do this. I believe this might cause some other issues with you jquery though so you might want to test it.

2 votesVote for this answer Unmark Correct answer

Recent Answers

Yoyo Bubble answered on April 16, 2018 18:27 (last edited on April 16, 2018 19:51)

Hey Brenden,

Thanks for taking the time to answer this!

This does solve the page refresh issue, however I’m still running into the overall issue of the form layout resetting to its original state.

Do you know of a way I can listen for the completion of the partial postback? I’m thinking I can run a script once it’s complete to check the second view of the form for validation errors and display that part of the form if there are any.

Thanks!

UPDATE:

I was able to use the method below to do this successfully!

<body onload="RefreshContent()">

<script type="text/javascript">
  function RefreshContent()
  {
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
  }

  function EndRequestHandler()
  {
    alert("Add your logic here" );
  }
</script>

0 votesVote for this answer Mark as a Correct answer