Why a second Bootstrap 3 Button (not marked as 'submit') is submitting my form?

Question

My Bootstrap 3 edit form had initially only a Submit button that worked perfectly. When I added another button to implement a 'Cancel' option, it didn't work as expected, and a click on it is submitting the form (and saving changes). Of course I didn't mark this second button as 'Submit', not being intended for that.

My HTML/PHP code looks like this:

<form method='POST' action='savechanges.php'>
    <div class="form-group">
        <label for="IdDataList">List Id</label>
        <input type="text" class="form-control" id="IdDataList" readonly value="<?php echo $row['IdDataList']; ?>">
    </div>
    <div class="form-group">
        <label for="DataListName">List Name</label>
        <input type="text" class="form-control" id="DataListName" name="DataListName" value="<?php echo $row['DataListName']; ?>">
    </div>
    <div class="form-group">
        <label for="DataListDescription">Description</label>
        <input type="text" class="form-control" id="DataListDescription" name="DataListDescription" value="<?php echo $row['DataListDescription']; ?>">
    </div>

<!-- Submit button -->
    <div class="form-group col-sm">
    <button class="btn btn-primary" name="saveall" type="submit" >Save changes</button>
    </div>

<!-- Here the second 'Cancel' button -->
    <div class="form-group col-sm">
    <button class="btn btn-primary" name="goback" onclick="window.location.href='anotherpage.php'">Cancel</button>
    </div>
</form>

Must be something obvious but I can't see what's going wrong... Thanks in advance!

if button is causing the issue you can give the button type as `type="button"` or use `a` tag their. you can check here https://stackoverflow.com/questions/31644723/what-is-the-default-button-type as default button type is submit — Chilll007, Jan 21 '19 at 11:20
Thanks, @Chilll007 that was the problem, similar question found here too: https://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms Most browsers use 'submit' if the type is not specified. — ManuelJE, Jan 21 '19 at 11:27

ManuelJE · Answer 1 · 2019-01-31T10:28:51.550

-1

Credit for this answer goes to @Chilll007, as I decided to close this question myself.
The current HTML standard, as adopted by most browsers, states that the type attribute should be used to differentiate the button's behavior, defaulting to 'submit' type.

Buttons that don't serve to this purpose should be marked as generic with type='button'. To get hyperlink behavior you can define actions through Javascript or with an <a href=''></a> tag:

<a href="anotherpage.php"class="btn btn-primary" name="back" role="button">Cancel</a>

edited Jan 31 '19 at 10:28

answered Jan 21 '19 at 13:25

ManuelJE

496
6
15

1

`a` tags **cannot have interactive children** like `button` or `label`. The HTML you suggest is invalid. – connexo Jan 21 '19 at 13:38
Absolutely right! I must have pasted that code from another answer (and that worked :), I corrected the code as suggested. – ManuelJE Jan 31 '19 at 10:30

Why a second Bootstrap 3 Button (not marked as 'submit') is submitting my form?

1 Answers1