JSP Two submit buttons on one page and one form

[Paul_Wilkins]

[quote=“hybrisser, post:20, topic:230019, full:true”]
@Paul_Wilkins @m3g4p0p

addEventSelector(“submit”, submitHandler, false); is throwing the error.[/quote]

Can we see a test page that has this error? That will help us to figure out what is causing the problem for you.

@hybrisser

I changed it to
addEventSelector(“submit”, submitHandler(), false). It worked.

But now it is throwing error as Cannot read property ‘preventDefault’ of undefined

The submitHandler function expects an event object to be passed to it. That is not something that you do manually, that is something that the submit event does when the submit event is triggered. When the submit event is triggered, it calls the submitHandler function with the event argument.

Leave it as submitHandler. Don’t invoke is as submitHandler(), and other’s can take a look at your test page to help figure out what is getting in the way.

[m3g4p0p]

@hybrisser

Also, I am getting an error in console as document.querySelector(…).addEventSelector is not a function

That is because addEventSelector() is not a function. ;-) It’s called addEventListener(). If you’re getting an error like this, just double-check your function names… e.g. I’m regularly typing addEventLIstener() myself. ^^

@hybrisser

I changed it to addEventSelector(“submit”, submitHandler(), false). It worked.

Huh… there must be something else going on in your script then. Can you provide the full JS, or maybe set up a fiddle?

[hybrisser]

Hi @m3g4p0p , @chrisofarabia, @felgall,

This way works absolutely fine. Thanks for that.

But now I have a scenario: After submit, when the I click Browser Back Button , the ajax part is not retained (Generated during validate button click) and the initial page is displayed.

How to retain the ajax part that was generated on click of validate button, when user press back button from next page.

Actual: Original Page–>Validate–>Submit–>Next Page. Browser Back Button -->Original Page
Required:: Original Page–>Validate–>Submit–>Next Page. Browser Back Button → Original Page +Validate

[hybrisser]

@Paul_Wilkins

Any idea how to do this?

[m3g4p0p]

@hybrisser

How to retain the ajax part that was generated on click of validate button, when user press back button from next page.

You could store the generated HTML in the session storage, and check for the corresponding property at the top of your script; if it’s there, replace the innerHTML of the element that holds the AJAX content accordingly. The basic (quick and dirty) approach might look like

var generatedContent = sessionStorage.generatedContent;
var contentContainer = document.getElementById('my-content-container');

if (generatedContent) {
  contentContainer.innerHTML = generatedContent;
  delete sessionStorage.generatedContent;
}

// Later, in the success callback of your AJAX form validation
sessionStorage.generatedContent = contentContainer.innerHTML;

However, wouldn’t this kind of defeat the purpose of that validation? The values could still be changed, so you’d have to re-validate the form nevertheless…

Maybe a better approach would be to have a dedicated validation-success page, and replace the browser history entry with the form after submission.