Google Chrome Cannot Submit Form with Display:None

Google Chrome cannot submit form with display:none

The cause seems to be HTML 5 constraint validation - it's the require attribute. Chrome has started supporting this with it's recent versions.

Apparently it seems like this is a backward compatibility issue, but you can fix it with setting the formnovalidate attribute for your submit button.

I assume that this is actually a security feature that prevents submitting supposed user data by submitting manipulated, hidden content, this quote points in that direction:

If one of the controls is not being rendered (e.g. it has the hidden attribute set) then user agents may report a script error.

Your inputs are of type text, so their purpose is to let users enter data, submitting their content while hidden is something that a user probably wouldn't want.

If you still want to submit hidden inputs while using client validation, I would suggest using <input type="hidden"> instead - I could imagine that there is no error on validation there because they are intended to be invisible.

Submit form fields inside display:none element

Set them to visibility:hidden and position:absolute instead. The fields will not be sent to the server with display:none, but will be with visibility:hidden. By also toggling "position" to "absolute" you should get the same visual effect.

Update This does not appear to be an issue anymore in any current browser (as of Nov of 2015). Fields are submitted even if display is set to 'none'. Fields that are 'disabled', however, will continue to not be submitted.

Hidden submit button wont submit in chrome when enter is pressed

If you use the keypress handler you won't need the hidden submit button, so just remove it.

Form won't submit using Enter key in Chrome or Firefox

You're relying on the non-obvious behavior that pressing 'enter' in a text field on a form will automatically submit the form, but only if there is only one text field in the form. I had a similar problem, only without trying to use the disabled attribute ...

Apparently this is part of the HTML 2.0 specification:

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

An old, but apparently still valid, and interesting, further discussion here.

... evidently meant as a convenient way to submit simple queries, but reducing the risk, on a complex form, of prematurely submitting it while trying to fill it in. Numerous browser implementers (e.g Netscape, Opera, various versions of Lynx,...) followed this advice, though it seems with slightly different interpretations.

If there's more than just a single text field, however, you will probably need a submit button of some sort, even if you don't want to see it on the form and use CSS to hide it -- (display: none, etc) -- it should still work. (Of course this is all up to how browsers decide to implement, but it seems standard from what I can tell.)

I made a JSFiddle to demonstrate. As far as I can tell (lazily just testing with Chrome), the form will submit on "Enter" if there's only one text field, or if there's a submit button, even if it's hidden.

<h2>Form with one text field only</h2>
<p>Seems to submit automatically when pressing 'enter' in the first text field</p>
<form action="" method="post">
  <div>
    <label for="pt-search-input">Search</label>
    <div>
      <input name="term" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a></div>
  </div>
</form>

<h2>Form with two text fields</h2>
<p>Won't submit when pressing 'enter' in the forms ...</p>
<form action="" method="post">
  <div>
    <label for="pt-search-input">Search</label>
    <div>
      <input name="term" type="text" placeholder="Example: budapest amsterdam" />
      <input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a></div>
  </div>
</form>

<h2>Form with two text fields and a submit button ...</h2>
<p>Now it submits with 'enter' key</p>
<form action="" method="post">
  <div>
    <label for="pt-search-input">Search</label>
    <div>
      <input name="term" type="text" placeholder="Example: budapest amsterdam" />
      <input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a>
      <input type="submit" />
    </div>
  </div>
</form>

<h2>Form with two text fields and a HIDDEN submit button ...</h2>
<p>Seems to work, even with submit hidden ...</p>
<form action="" method="post">
  <div>
    <label for="pt-search-input">Search</label>
    <div>
      <input name="term" type="text" placeholder="Example: budapest amsterdam" />
      <input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a>
      <input type="submit" />
    </div>
  </div>
</form>

<h2>Form with no action or method attribute, HIDDEN submit button ...</h2>
<p>Even this seems to work.</p>
<form>
  <div>
    <label for="pt-search-input">Search</label>
    <div>
      <input name="term" type="text" placeholder="Example: budapest amsterdam" />
      <input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a>
      <input type="submit" />
    </div>
  </div>
</form>

See also
Form not submitting when pressing enter

Onclick javascript stops form submit in Chrome

Eventhough in theory, your code should work, Chrome thinks otherwise, as noted in in this similar SO question and in this chrome groups discussion (may be a bug, may be the intended design).

First, when you want to allow / block a click you should use onclick="return someFunction()" and not onclick="someFunction()" - then the action will follow through only if that function returns true.

Now to make this work, you would have to submit the form from your function:

$(this).parents('form').submit()

display:none property not working in firefox and chrome

You must not use multiple style attributes. Instead of

 <tr style="height:5px" ... style='display:none'>

use

 <tr style="height:5px; display:none">

HTML form onsubmit fails to fire on certain browsers with hidden submit button and readonly input

Use visibility: hidden instead of display: none because display: none elements do not receive events

Or use opacity and absolutely position it offscreen so it does not take up any space and does not appear on the screen

opacity: 0;
position: absolute;
left: -3000px;

Submit button doesn't work

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

Invalid form control only in Google Chrome

Chrome wants to focus on a control that is required but still empty so that it can pop up the message 'Please fill out this field'. However, if the control is hidden at the point that Chrome wants to pop up the message, that is at the time of form submission, Chrome can't focus on the control because it is hidden, therefore the form won't submit.

So, to get around the problem, when a control is hidden by javascript, we also must remove the 'required' attribute from that control.

Enter key' wont submit form in Firefox, but will in Chrome, why?

Enter for submit is only triggered if <input type="submit> exists on the form. You can add a hidden one for this purpose, but keep in mind that it will submit the form and bypass the onclick event you're looking to capture. You'll need to patch into the onsubmit action of the form to run your function.

---

Related Topics