Bootstrap Форма Подчинение и модальные

Question

Я пытаюсь получить мою самозагрузку 3.0 формы: 1. Представить данные формы, когда кнопка нажата представить и 2. Открыть модальное окно, где я доставить сообщение с подтверждением

Прямо сейчас я могу получить только тот или иной.

Вот мой код формы:

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

Answer 1

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

И СЦЕНАРИЙ,

$("#sbm").click(function(e){ 
    e.preventDefault(); 
    // validate form inputs 
    // if validated 
    $("#myForm").submit() 
    $('#myModal').modal('show'); 
}); 

Попробуйте, как это. Не забудьте включить jQuery, Bootstrap и сделать также проверки. Прочитано http://api.jquery.com/submit/