20

There are several questions/answers on this here, here and here and elsewhere, but they all seem JQuery specific and do not appear to apply to this (for example, I am NOT creating a new Form object, this is an existing form in the document. Also I am NOT using Jquery at all).

I have a form which has to be modified before submission for reasons of IE7 compatibility. I have to strip out all the BUTTON tags from my form and then add a hidden field, but this is all in an existing form on the existing HTML page. This code works properly in IE and Chrome but doesn't work in Firefox (versions 23 & 24 both tested).

    buttonClickFunction(formName, buttonObject) {
        var formObject = document.forms[formName];
        var i = 0;

        // Strip out BUTTON objects
        for (i=0;i<formObject.length;i++) {
            if (formObject[i].tagName === 'BUTTON') {
                formObject[i].parentNode.removeChild(formObject[i]);
                i--;
            }
        }

        // Create new field
        var newField = document.createElement('input');
        newField.type = 'hidden';
        newField.id=buttonObject.id;
        newField.name = buttonObject.name;
        if (buttonObject.attributes['value'] != null) {
            newField.value = buttonObject.attributes['value'].value;
        } else {
            newField.value = buttonObject.value;
        }

        // Submit form
        formObject.appendChild(newField);
        document.forms[formName].appendChild(newField);
        document.forms[formName].submit();
    }

In addition to the document.forms[formName].submit() I have also tried formObject.submit() - both work in Chrome but both fail in Firefox. I'm at a loss as to why this doesn't work - I've traced through the JS and watched that document.forms[formName].submit() execute - no exception appears but nothing goes to the server.

Can anyone identify why Firefox won't submit this form, and how I can fix it?

Community
  • 1
  • 1
user3120173
  • 1,758
  • 7
  • 25
  • 39

4 Answers4

23

Firefox expects that, when you submit a form, you have at least a submit button available, meaning there should be something like:

<button type="submit">Click me</button>

or:

<input type="submit" value="Click me" />

When you use the first one in your code, it will not work (because you strip out all buttons before submitting the form). When you use the second option, it will work, also in Firefox. As you can see in this fiddle: http://jsfiddle.net/q9Dzc/1/

g00glen00b
  • 41,995
  • 13
  • 95
  • 133
  • 1
    This turned out to be the problem - Firefox apparently will not submit a form without any buttons. Not sure why this is or if this is "intentional" behavior. – user3120173 Jul 14 '14 at 23:48
  • It's like this for ages, so if this was not intentional, I suppose they would have fixed it by now. The only reason I know this is because I had a similar issue once (more than 2 years ago though :p) – g00glen00b Jul 15 '14 at 05:58
  • 1
    Thanks very much - I couldn't have fixed this without you. – user3120173 Jul 17 '14 at 16:44
  • 7
    Heads up to anyone else looking at this issue, you also need to ensure that the element is appended to the document body, not just that it has a submit button. If this isn't working, try these lines, courtesy of https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Sending_forms_through_JavaScript `form.style.display = "none";` `document.body.appendChild(form);` – carterh062 May 11 '16 at 20:07
  • As @carterh062 said, make sure the form is in the DOM. Dynamically generated forms will need to be appended before they can be submitted. – MCTaylor17 Aug 24 '16 at 21:31
  • You are ABSOLUTELY correct. I'd never had guessed that! – andreszs Sep 26 '16 at 00:20
  • @basZero why not? The issue here is that Firefox will not submit any form without a submit button, so adding a button does solve the problem, right? – g00glen00b Feb 09 '17 at 14:16
  • @g00glen00b I am using a form without any button and I can submit the form via javascript, even in Firefox. However I have an issue with cloning textareas, see http://stackoverflow.com/a/7391988/356815 , the reason why i don't have a submit button in the form is because I have two buttons, "Save" and "Save & Exit"... – basZero Feb 09 '17 at 14:20
  • @g00glen00b The link http://stackoverflow.com/a/7391988/356815 I was adding is because you can clone the whole form and append it to the body of the HTML form, then you can submit that (even in Firefox). However, the cloning does not work as expected. – basZero Feb 09 '17 at 14:21
  • @basZero I don't know how this is related. If I try to submit a form in Firefox without a submit button, but with 2 buttons, I can't submit the form (demo: https://jsfiddle.net/o7f0kasp/1/). The only exception is when I make one or both of them a submit button or when I remove the `type` attribute altogether (which will default to `submit`). – g00glen00b Feb 09 '17 at 14:32
  • @g00glen00b well I meant it like this: this works fine with FF: https://jsfiddle.net/o7f0kasp/9/ , but as I said, I didn't find a solution how to do this if the form contains textareas, because the clone() does not work properly. – basZero Feb 10 '17 at 09:01
  • Also, make sure to _not_ give your submit button a name attribute with value "submit" or javascript's `.submit()` won't work on the form element. – Robin van Baalen Dec 03 '19 at 18:21
7

I had similar behaviour, when form.submit() didn't work on Firefox, but worked on other browsers. Just make sure that all the buttons within form contain type="button".

Simonas
  • 301
  • 2
  • 12
2

For anyone having an issue with making the Firefox submit with the page location changing / reloading afterwards, you need to put your redirect code in the $.post callback:

$(".form").submit(function(e){
    e.preventDefault();
    $.post("submit.php", {data: textData}, function(){
        history.go(-1);
    });
    return false;
});
NBTX
  • 581
  • 1
  • 8
  • 24
0

If your form has a mixture set of "input [type=button]" and "button", the JavaScript of submit() will not work for "input [type=button]" sometimes.

Donghai Huangfu
  • 1