Forums

Block save function attaching itself to any button in form???

Permalink
I'm building a block similar to the concrete5 image slider. I'm using underscore.js to make the template for each item. Whats interesting is when I use <button> on any items inside the text/template html, C5 automatically binds the controllers save function to it. I could create a button like this:
<button>BLANK</button>

Then click edit block and click that blank button, it will cause the block to be saved immediately.

I spent hours trying to figure out what was wrong with my code! But my code isn't toggling this, its something else. Changing it to a span and the problem is solved.

So wheres the code doing this? What should I do to still use <button> elements in my form without them automatically triggering the block to save?
ob7dev
 
ob7dev replied on at Permalink Best Answer Reply
ob7dev
I'm not sure what causes this, but the fix is to add
type="button"

to the button element.

So the button markup should look like:
<button type="button>BUTTON</button>

and it will no longer trigger the block to save when clicked.

But who wants to explain why buttons without the type set automatically trigger the save functionality of the block?
ob7dev replied on at Permalink Reply
ob7dev
The reason has nothing to do with concrete5 itself, but because the HTML5 <button> element has a default behavior as being of type="submit". So not stating the button type to something else means a blank <button> is going to act as <button type="submit">, which is going to submit the form.

Reference:
http://w3c.github.io/html-reference/button.html...
http://stackoverflow.com/a/10836076/5953311...