Bootstrap Form Submission and Modal

Stan Published at Dev

Stan

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">&times;</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>

devo

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">&times;</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/

Collected from the Internet

Please contact [email protected] to delete if infringement.