Why does my form submit in IE but not in Chrome?

Question

I have a form with <input type="submit">. In Chrome submit doesn't do anything. On a Network tab in developer tools I see nothing. No errors in developer tools either. Meanwhile, if I do save a page and open a saved page, then after I press submit button, I see something appears in Network tab. This happens in Chrome and Firefox. This works as expected in IE.

Does anybody have a hindsight, what should I look at?

I don't need a direct answer, I only need to know, where should I look at. If someone posts a direction and that'll help me to solve my problem, I'll accept it as a correct answer.

Structure of a page looks like this:

html
    head
    body
        div
        div
            form
            form
            form
            form
            form
                input
                input
                table
                table
                    tbody
                        tr..td..input type=submit
                

Lilley

We need code... – Delve

@Delve when I open a page from my web app the problem is there, but if I save a page, submit does something. So html code won't help here. Also I don't need a direct answer, what the problem is. I only need a direction, what to look at. – Lilley

...is it inside of the form? Is the form well-formed, or does it have broken HTML? Does the form have an action and a method, and are they correct? Are you developing this locally, and using relative-paths, when it should be run on a server/localhost? We have no idea... – Metric

@Norguard as I told, no errors or warnings, nothing in developer tools, so I believe yes, everything is fine and well-formed. Also if I press F5, a page re-loads fine. I'll update my question with a structure of a page. – Lilley

form form form form form!? Can you please just share code... pleeease? – Delve

@Delve many forms on a page. Ok, if you insist, I'll tidy up a code a bit and post it. – Lilley

Please post your code. Are you using HTML5. If so, Check whether you are using any hidden_fields with required true property.Remove that. IE wont take it But Chrome wil. – Introspection

@Introspection no, no required="true" anywhere, I'm not using HTML5, no doctype at all. Just wait a little, I'll post my code. – Lilley

Answer 1

If you are not using any JavaScript for form validation then a simple layout for your form would look like this:

<form action="formHandler.php" method="post">    
 <input name="fname" id="fname" type="text" value="example" />    
 <input type="submit" value="submit" />
</form>

You need to ensure you have the submit button within the form element and an appropriate action attribute on the form element is present.

For a more direct answer, provide the code you are working with.

You may find the following of use: http://www.w3.org/TR/html401/interact/forms.html

Ohmage

Thank you very much, I think that maybe a problem is that there is empty action attribute in that form. I'll investigate it further. – Lilley

In my case, I had an absolutely positioned div with no content that was overlaid on top of the button. Copied and pasted markup from an example and took me days to determine that the invisible element was the culprit. – Garrison

Answer 2

Are you using HTML5? If so, check whether you have any <input type="hidden"> in your form with the property required. Remove that required property. Internet Explorer won't take this property, so it works but Chrome will.

Introspection

Answer 3

I faced this problem today, and the issue was I was preventing event default action in document onclick:

document.onclick = function(e) {
    e.preventDefault();
}

Document onclick usually is used for event delegation but it's wrong to prevent default for every event, you must do it only for required elements:

document.onclick = function(e) {
    if (e.target instanceof HTMLAnchorElement) e.preventDefault();
}

Acknowledge

Answer 4

Hello from the future.

For clarity, I just wanted to add (as this was pretty high up in google) - we can now use

<button type="submit">Upload Stuff</button>

And to reset a form

<button type="reset" value="Reset">Reset</button>

Check out button types

We can also attach buttons to submit forms like this:

<button type="submit" form="myform" value="Submit">Submit</button>

Fugleman

Answer 5

Check if you are using any sort of jquery/javascript validation on the page and try disabling it and see what happens. You can use your browser's developer tools to see if any javascript file with validate or validation is being loaded. You can also look for hidden form elements (ie. style set to display:none; or something like that) and make sure there isn't a hidden validation error on those that's not being rendered.

Prelacy

You saved me, but do you have any idea how to achieve form submiting and form validation with the same button? – Hope

Yes, that should ideally work with many of the validation libraries and tools out there. They should just tie in with the form. If form submission isn't working, then something is probably broken. For example, I found a bug in a particular version of the jquery validate plugin that was being used by the Nuget Gallery open source website. It was correctly validating based on file extension, but the bug was preventing the validation error from displaying. So I went in and fixed the bug, although I lazily did not issue a pull request to fix the bug in their library. – Prelacy

Answer 6

I ran into this on a friend's HTML code and in his case, he was missing quotes.

For example:

<form action="formHandler.php" name="yourForm" id="theForm" method="post">    
<input type="text" name="fname" id="fname" style="width:90;font-size:10>     
<input type="submit" value="submit"/>
</form>

In this example, a missing quote on the input text fname will simply render the submit button un-usable and the form will not submit.

Of course, this is a bad example because I should be using CSS in the first place ;) but anyways, check all your single and double quotes to see that they are closing properly.

Also, if you have any tags like center, move them out of the form.

<form action="formHandler.php" name="yourForm" id="theForm" method="post">  
<center> <-- bad

As strange it may seems, it can have an impact.

Veil

Answer 7

You can't have a form element as a child (directly or indirectly) of another form element.

If the following does not return null then you need to remove the excess form elements:

document.querySelectorAll('form form');//Must return null to be valid.

Pterosaur

Answer 8

check your form is outside the table

Chromatograph