One of the mistake which I see often during development on the frontend side is the cancel button, which actually submits the form when clicked. Saw it once, wait a while, saw it again, wait a while, saw it again, and the loop continues. Some people doesn’t even realize.

So what’s the problem? Let’s take a look at a normal html form in AngularJS. HTML Code

<div ng-app="MyApp">
    <div ng-controller="MyController">
    <form ng-submit="submitTheForm()">
        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" ng-model="someone.name" id="name" placeholder="Enter name"></input>
        </div>
        <button class="btn btn-default" ng-click="cancel()">Cancel</button>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>
    </div>
</div>

JavaScript Code

So I was working on a private project with angular js and video js, and I am loading videojs dynamically after I got the source of the video, and there’s this very interesting problem where videojs will only be loaded only if you hard-refresh the page (f5-button). If you navigate to the page where it contains the video, or if you were on the page, go somewhere else, then come back again, the video won’t be loaded anymore and you’ll only get your old html5 video from the browser.