Bootstrap Form Submission and Modal - forms

Question

I'm trying to get my bootstrap 3.0 form to:
1. Submit the form data when the submit button is clicked AND
2. Open a modal window where I deliver the confirmation message
Right now I can only get one or the other.
Here's my form code:
<form class="form-inline" role="form" action="https://dr113.infusionsoft.com/app/form/process/c187fc8ec993976a148e2c952f89e9fb" method="POST">
<input name="inf_form_xid" type="hidden" value="c187fc8ec993976a148e2c952f89e9fb" />
<input name="inf_form_name" type="hidden" value="Sign-up 50 Design Report" />
<input name="infusionsoft_version" type="hidden" value="1.29.6.37" />
<div class="form-group">
<label class="sr-only" for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" name="inf_field_Email">
</div>
<input type="submit" data-target="#myModal" data-toggle="modal" value="Download Your Guide" class="btn btn-primary btn-large" />
</form>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<p><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></p>
</div>
<div class="modal-body">
<h4 class="text-center">Share this Guide with your readers</h4>
<p class="text-center">Twitter | Facebook | LinkedIn</p>
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- JS Code -->
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script>$('#myModal').modal(options)</script>

Answer 1

The HTML,
<form class="form-inline" role="form" action="https://dr113.infusionsoft.com/app/form/process/c187fc8ec993976a148e2c952f89e9fb" method="POST" id="myForm">
<input name="inf_form_xid" type="hidden" value="c187fc8ec993976a148e2c952f89e9fb" />
<input name="inf_form_name" type="hidden" value="Sign-up 50 Design Report" />
<input name="infusionsoft_version" type="hidden" value="1.29.6.37" />
<div class="form-group">
<label class="sr-only" for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" name="inf_field_Email">
</div>
<input type="submit" id="sbm" value="Download Your Guide" class="btn btn-primary btn-large" />
</form>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<p><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></p>
</div>
<div class="modal-body">
<h4 class="text-center">Share this Guide with your readers</h4>
<p class="text-center">Twitter | Facebook | LinkedIn</p>
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
And the SCRIPT,
$("#sbm").click(function(e){
e.preventDefault();
// validate form inputs
// if validated
$("#myForm").submit()
$('#myModal').modal('show');
});
Try like this. Don't forget to include jQuery, Bootstrap and make validations also.
Read http://api.jquery.com/submit/