How to create a Cancel button in Bootstrap - html

Question

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?

Answer 1

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>
Cancel
</div>
</div>

Answer 2

simply set the type attribute to reset as shown below;
<button type="reset" class="btn btn-default pull-right">Cancel</button>

Answer 3

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
})

Answer 4

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