Button inside <form> submits form

[Robin]

I have a button inside a <form> that always submits the entire form, even though it's not a submit button.

HTML:
<button id="button-app-preview" class="k-button">Oppdater</button>

JS:
$("#button-app-preview").click(preview);
function preview() {
    $("#app-preview").html(template({
        overskrift: $("#input-overskrift").val(),
        ingress: $("#input-ingress").val(),
        brodtekst: $("#input-brodtekst").val(),
        bildeurl: $("#bilde-sti").val()
    }));
}

Any ideas how come this button when clicked, first performs the preview() function, but then after it submits the entire form?

[Holger]

Hi Robin,

you should explicitly set the button's type attribute to "button", otherwise it is handled as "submit".

<button id="button-app-preview" class="k-button" type="button">Oppdater</button>

Regards,
Holger

[Robin]

Thanks a lot Holger, it was as easy as you described it.