Control buttons submit parent forms

[drekinov]

We were using latest v4 so we tried to switch to v5.

however change from https://github.com/mediaelement/mediaelement/commit/7d1845b475dd6d9d951343be485f5b65758a5dd7 lead to that clicking Play or any other button control lead to submit of parent form which was not the case with previous version.

Is there new way to handle that case or is that not expected side effect of the change. probably other way is to have some listener preventing submit and etc but i think that 99.99% of use cases will require that kind of listener if there is parent form.

[jsiemon-edv]

Ran into the same problem today and this took me an hour or two to find... I am using mediaelement/audio which is located inside form-tags in a modal. Subsequently, clicking the control buttons tried to submit the form.

Mediaelement(-and-player) output constructs those controls with the following classes and attributes (showing only the play button and setting language to German in this case):

<div class="mejs__controls">
   <div class="mejs__button mejs__playpause-button mejs__play">
      <button aria-controls="mep_0" title="Abspielen" aria-label="Abspielen">
      ...

The problem in our case is the button-tag, which does NOT specify a "type" / is not constructed with a "type" attribute of value "button".

   ...
   <button aria-controls="mep_0" title="Abspielen" aria-label="Abspielen" type="button">
   ...

If the type attribute is omitted, web browsers assume these buttons to be of default type "submit", hence the form being submitted "on click". Construction of buttons without the "type" attribute seems to appear in the core only. A quick look through the code of the plugins revealed that most of them construct the html-code of buttons with the "type" attribute.

The commit you quoted, https://github.com/mediaelement/mediaelement/commit/7d1845b475dd6d9d951343be485f5b65758a5dd7, does in fact remove the "type" attribute; cf. line 30 through 32. Ironically, the title of this commit already says "... remove unnecessary html attributes".

Quick fix Since I do not want to mess with the code of mediaelement itself, I added same jquery to my page that will add the attribute back in to any button of class "mejs__button":

$( '.mejs__button' ).children( 'button' ).attr( 'type', 'button' );

[alexvanniel]

At first I thought I could fix thi sby setting enableKeyboard to false and by emptying keyAction (by setting it to []) but that did not really work. Every input control would trigger the submit action somehow. It was only when I set ALL of the buttons inside the player to type="button" that the unwanted sideeffect was "fixed". I tried to apply the code above to change the buttons, but that will leave out the big play button since that does not seem to be declared as a mejs__button. I sincerely hope this get's fixed but for now we will not be upgrading to the latest MediaelementJS ...

[dorianfm]

Having this problem as well, with mediaelementjs videos inside a form. Taking a pointer from the comment by @jsiemon-edv which didn't work for me, this solution works for now.

$( '.mejs__container' ).find( 'button' ).attr( 'type', 'button' );

[digitas-git]

This was fixed a while ago. An update to the latest version automatically fixes this problem.