11

I have the following Bootstrap markup:

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="username">Username</label>
  <div class="col-md-4">
  <input id="username" name="username" type="text" placeholder="" class="form-control input-md" required="" maxlength="8" value="">
  </div>
</div>

<!-- Button (Double) -->
<div class="form-group">
  <label class="col-md-4 control-label" for="submit"></label>
  <div class="col-md-8">
    <button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
    <button id="cancel" name="cancel" class="btn btn-default" value="1">Cancel</button>
  </div>
</div>

When I click the Create Profile button the form works fine letting me know that certain fields are "Required". But when I click the Cancel button I cannot leave the form due to incomplete required fields.

Is there a form cancel button capability in Bootstrap?

Tim Lewis
  • 27,813
  • 13
  • 73
  • 102
H. Ferrence
  • 7,906
  • 31
  • 98
  • 161
  • 1
    What do u mean by leaving the form? U probably need to write ur own JS logic for the button, check this http://stackoverflow.com/questions/18407832/how-to-create-a-simple-html-cancel-button – Natural Lam Nov 02 '15 at 19:19
  • Why don't you just make a button outside of the form? The cancel button outside of the form can act as a "back" button. – Saehun Sean Oh Nov 02 '15 at 19:21
  • 2
    Actually per @NaturalLam's link to another SO question, I simply added `onclick="window.location='http://example.com';return false;"` attribute to the button tag and got the desired result. Thanks. – H. Ferrence Nov 02 '15 at 19:27

4 Answers4

11

Change your code to the following:

<!-- Button (Double) -->
<div class="form-group">
  <label class="col-md-4 control-label" for="submit"></label>
  <div class="col-md-8">
    <button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
    <a href="/link-to/whatever-address/" id="cancel" name="cancel" class="btn btn-default">Cancel</a>
  </div>
</div>
Rox
  • 327
  • 4
  • 7
Adrian Chrostowski
  • 424
  • 9
  • 30
  • 1
    If you do that, Cancel and Submit would look completely different in Bootstrap since one is a link and the other is a button. That's not the idea. – derloopkat Feb 15 '17 at 10:22
  • 4
    This is the correct answer. The `btn` classes style links the same way as buttons. They will look alike. At the same time the links will always work, with or without JavaScript. Best for accessibility. With no coding overhead. (I would avoid using `id`s, though.) – Peterino Mar 26 '17 at 13:14
  • 1
    Changing this to would be a better option for this. – probie Aug 03 '17 at 15:54
  • 3
    For *bootstrap 4* (alpha), use `btn-secondary` instead of `btn-default`, otherwise it will not look like a button. @probie: Do not use `btn-link` if you want a link to look like a button. It makes buttons look like links, not the other way round. – Christopher K. Aug 14 '17 at 15:55
0

simply set the type attribute to reset as shown below;

<button type="reset" class="btn btn-default pull-right">Cancel</button>

Emmanuel Aninze
  • 1
  • 1
  • `type="reset"` will reset the form back to the original values, which isn't what the question poster is asking. They want a cancel button which will jump to another page. – Jim Richards Jun 14 '20 at 14:02
0

if you would like to keep both elements as <button>. You can create a click handler with jQuery:

$('#cancel').click(() => {
    location.href = '../' //returns to parent
})
Dániel L. Némethy
  • 11
  • 2
0

A direct method is to use onclick="history.back()" Like so:

<button id="cancel" name="cancel" class="btn btn-default" onclick="history.back()">Cancel</button>

It is supported in all browsers at the time of this posting

101010
  • 14,866
  • 30
  • 95
  • 172