2 buttons on form only 1 with submit type but both triggers submit event

Question

Not using jQuery, just plain javascript with DOM. There are 2 buttons on the form, one has no type, one has type="submit"

Here is an example of my question:

https://plnkr.co/edit/wAlpawx2wJUZ9FXWXL9h?p=preview

         <div>
            <button class="add">add</button>
        </div>
        <div>
            <button type="submit">submit</button>
        </div>

both buttons trigger the submit event. how do I get only the button with type="submit" to trigger the submit event?

Also, how do I persist the form data so that the result can stay in the "pre" tag when the submit is triggered?

Answer 1

set the type attribute to "button" or manually cancel the event

<button type='button' class='add'>add</button>

-or-

$('button.add').click(function(e){
    e.preventDefault(); // cancel default behavior
    // my add logic
});