Form submission affected with different firefox and chrome versions

JavaScript
1

I have a form starting tag defined like this:

<form action="previewOrSend.do" method="post" name="main_form"
		id="main_form">

And inside that I had this button defined:

<button id="theSendIfAllReadyButton" type="submit" onclick="this.form.method.value='sendIfAllReady'; this.form.target='_top';this.disabled=true;">

I noticed that the form was not submitting with Firefox 129 RC version and was working fine with Firefox 115.14.0 ESR version.

It doesn’t work with Chrome as well - latest version.

So what I had to do was:

change the above button to following:

<button id="theSendIfAllReadyButton" type="button" onclick="sendAll">

And inside script tag, I had to define a function to do the above thing:

var sendAll = function(){
	   let theForm = document.getElementById('main_form');
	   console.log("Inside sendAll Form");
	   if(theForm){
		   
		   theForm.method.value = 'sendIfAllReady';
		   theForm.target = '_top';
		   theForm.target = '_top';
		   console.log("Submitting the form now");
		   theForm.submit();
		   
		   
	   }

Any idea why the first approach has stopped working with newer firefox and chrome browsers? sendIfAllReady is the struts controller end point where it’s handling the logic of dealing with the database etc.

One more thing I noticed that wherever I don’t have anything else defined in the onclick handler, it seems to be working fine. For example, following button works fine since it just has this.form.method.value='updateResult'; defined and nothing else like this.form.target='_top'; or this.disabled=true; or both.

<button id="updateButton" type="submit" onclick="this.form.method.value='updateResult';">

2

“sendIfAllReady” isnt… a valid HTTP Method. So i’m not sure why you’re setting that? It’s going to be impossible to diagnose “it wont submit” without understanding what you’re doing when you tell the thing to submit…

3

Also something that struck me…
this.form.method.value='sendIfAllReady'
method in this context should be a static (string) value. It doesnt have a .value property, because method isnt an object. You would set this with this.form.method = 'some value'

EDIT: Also, you’re forcing the submission in the function, and not in the button. this.form.submit(); at the end of the inline code works for me…

1 Like
4

Appreciate looking into this.

That’s because it’s the Struts 1 Action java class previewOrSend where all the business logic is handled. This is how the form is defined as well (<form action="previewOrSend.do" method="post") It’s defined like this in my java code. Sorry for not providing these details earlier.

public ActionForward sendifAllReady(ActionMapping mapping, ActionForm form, HttpServletRequest request,
			HttpServletResponse response) {

		//business logic
	}

So till Firefox 115.14.0 ESR version, the whole setup is working fine but I’m not sure what has changed in the RC version of Firefox 129 or maybe some earlier version (I’m assuming something after 115) and it is breaking. Not sure how long chrome has been broken,

5

I’m going to say this, but understand i’m operating completely in the blind, because I dont know what “Struts 1 Action” is…

Are you confusing method and action? Maybe i’m just not understanding. Anyway.

Have you tried putting the hard submit() call into the button code?

6

It sounds like you’re running into some issues with how different browsers are handling the form submission when you mix in multiple actions within the onclick event of a submit button.

The reason your original approach might have stopped working in newer versions of Firefox and Chrome likely comes down to how these browsers now handle form submission when the onclick event manipulates the form before submitting it. Modern browsers have tightened up how they handle events and form submissions, which can cause issues when you try to change multiple things at once (like the form method and target) right before the form is submitted.

When you define type="submit" in the button and then manipulate the form properties within the onclick event, some browsers might be executing the form submission before all the changes to the form (like setting the method and target) are fully applied. This timing issue could cause the form to submit with the wrong method or target, or not submit at all, depending on the browser.

By switching the button type to "button" and moving the form submission logic into a separate function (like sendAll), you’re effectively giving the browser more control over the sequence of events. This allows your changes to the form to be fully processed before the form is actually submitted.

This is why your second approach works better. It ensures that:

  1. The form changes are fully applied.
  2. The form is submitted correctly afterward.

As for why your simpler button works (where you only set this.form.method.value), it’s likely because fewer changes need to be applied, reducing the chance of timing issues.

Modern browser versions prioritize security and predictable behavior, which is why these sorts of things might work differently than before. Your solution to move the logic into a separate function is a good practice because it gives you more control over the flow of execution, reducing the chance of unexpected behavior.

If you need to keep using the first method, you might try wrapping your changes in a setTimeout with a delay of 0 milliseconds to push them to the end of the event loop, but using a separate function like you’ve done is usually the more reliable approach.

7

Thanks. Is there any documentation available where I can read about these changes ? Wanted to know what changed after Firefox 115.14.0 ESR version. I believe same changes happened in other browsers long time ago.