Модальное окно Bootstrap 3 с формой, отправляющей email по Ajax (JQuery/PHP/HTML5/JqBootstrapValidation)

Для 2 форм на одной странице будет в файле скрипта recall_me.js выбор например по классу, чтобы отделить 2 формы:

/*

  Jquery Validation using jqBootstrapValidation

   example is taken from jqBootstrapValidation docs 

  */

$('.form1').click( function() {

//$(function() {





 $("#contactForm input,#contactForm textarea").jqBootstrapValidation(

    {

     preventSubmit: true,

     submitError: function($form, event, errors) {

      // something to have when submit produces an error ?

      // Not decided if I need it yet

     },

     submitSuccess: function($form, event) {

      event.preventDefault(); // prevent default submit behaviour

       // get values from FORM

       var name = $("#contactForm input#name").val();  

			 var phone = $("#contactForm input#phone").val(); 

       var email = $("#contactForm input#email").val(); 

       var message = $("#contactForm textarea#message").val();

        var firstName = name; // For Success/Failure Message

           // Check for white space in name for Success/Fail message

        if (firstName.indexOf(' ') >= 0) {

	   firstName = name.split(' ').slice(0, -1).join(' ');

         }        

	 $.ajax({

                url: "recall_me.php",

            	type: "POST",

            	data: {name: name, phone: phone, email: email},

            	cache: false,

            	success: function() {  

            	// Success message

            	   $('#success').html("<div class='alert alert-success'>");

            	   $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")

            		.append( "</button>");

            	   $('#success > .alert-success')

            		.append("<strong>Спасибо! Ваше сообщение отправлено.</strong>");

 		  		   $('#success > .alert-success')

 				    .append('</div>');

 						    

 		  //clear all fields

 		  $('#contactForm').trigger("reset");

			

			setTimeout(function() {

			                 $("#myModal").modal('hide');

			            }, 4000);

									

 	      },

 	   error: function() {		

 		// Fail message

 		 $('#success').html("<div class='alert alert-danger'>");

		 $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")

		  .append( "</button>");

		 $('#success > .alert-danger').append("<strong>Извините "+firstName+" кажется проблемы на сервере отправки писем...</strong> Вы не могли бы написать напрямую на адрес <a href='prazdniknayra@1gb.ru?Subject=Перезвоните мне'>prazdniknayra@1gb.ru</a> ? Приносим извинения за это неудобство!");

		 $('#success > .alert-danger').append('</div>');

		 

		  

 		//clear all fields

 		$('#contactForm').trigger("reset");

 	    },

           })

         },

         filter: function() {

                   return $(this).is(":visible");

         },

       });





      $("a[data-toggle=\"tab\"]").click(function(e) {

                    e.preventDefault();

                    $(this).tab("show");

        });

  });

 





/*When clicking on Full hide fail/success boxes */ 

$('#name').focus(function() {

     $('#success').html('');

  });

  

  

  

  

 

$('.form2').click( function() {





   $("#contactForm1 input,#contactForm1 textarea").jqBootstrapValidation(

      {

       preventSubmit: true,

       submitError: function($form, event, errors) {

        // something to have when submit produces an error ?

        // Not decided if I need it yet

       },

       submitSuccess: function($form, event) {

        event.preventDefault(); // prevent default submit behaviour

         // get values from FORM

         var name = $("#contactForm1 input#name").val();  

  			 var phone = $("#contactForm1 input#phone").val(); 

         var email = $("#contactForm1 input#email").val(); 

         var message = $("#contactForm1 textarea#message").val();

          var firstName = name; // For Success/Failure Message

             // Check for white space in name for Success/Fail message

          if (firstName.indexOf(' ') >= 0) {

  	   firstName = name.split(' ').slice(0, -1).join(' ');

           }        

  	 $.ajax({

                  url: "recall_me.php",

              	type: "POST",

              	data: {name: name, phone: phone, email: email},

              	cache: false,

              	success: function() {  

              	// Success message

              	   $('#success1').html("<div class='alert alert-success'>");

              	   $('#success1 > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")

              		.append( "</button>");

              	   $('#success1 > .alert-success')

              		.append("<strong>Спасибо! Ваше сообщение отправлено.</strong>");

   		  		   $('#success1 > .alert-success')

   				    .append('</div>');

 						    

   		  //clear all fields

   		  $('#contactForm1').trigger("reset");

			

  			setTimeout(function() {

  			                 $("#myModal").modal('hide');

  			            }, 4000);

									

   	      },

   	   error: function() {		

   		// Fail message

   		 $('#success1').html("<div class='alert alert-danger'>");

  		 $('#success1 > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")

  		  .append( "</button>");

  		 $('#success1 > .alert-danger').append("<strong>Извините "+firstName+" кажется проблемы на сервере отправки писем...</strong> Вы не могли бы написать напрямую на адрес <a href='prazdniknayra@1gb.ru?Subject=Перезвоните мне'>prazdniknayra@1gb.ru</a> ? Приносим извинения за это неудобство!");

  		 $('#success1 > .alert-danger').append('</div>');

		 

		  

   		//clear all fields

   		$('#contactForm1').trigger("reset");

   	    },

             })

           },

           filter: function() {

                     return $(this).is(":visible");

           },

         });





        $("a[data-toggle=\"tab\"]").click(function(e) {

                      e.preventDefault();

                      $(this).tab("show");

          });

    });

и на странице для 2-й формы укажите id свой - contactForm1 и для сообщения success1, чтобы различались:

<!-- Form itself -->

					<form name="sentMessage" class="form form-register1" id="contactForm1"  novalidate>

										

						<div class="control-group">

							<div class="controls">

								<input type="text" class="form-control" onblur='if(this.value=="") this.placeholder="Ваше имя"' onfocus='if(this.value=="Ваше имя") this.value=""' placeholder="Ваше имя" id="name" required data-validation-required-message="Пожалуйста укажите ваше имя" />

						  		<p class="help-block"></p>

							</div>

						</div> 	

						<div class="control-group">

							<div class="controls">

								<input type="text" class="form-control" onblur='if(this.value=="") this.placeholder="Телефон"' onfocus='if(this.value=="Телефон") this.value=""' placeholder="Телефон" id="phone" required data-validation-required-message="Пожалуйста, укажите номер телефона" />

								<p class="help-block"></p>

							</div>

				    </div> 	

						<div class="control-group">

							<div class="controls">

								<input type="email" class="form-control" onblur='if(this.value=="") this.placeholder="Email"' onfocus='if(this.value=="Email") this.value=""' placeholder="Email" id="email" />

							</div>

				    </div>

	  		 

						<div id="success1"> </div>

						

						<button type="submit" class="form2 button_zvonok zvonok btn-block buttoncall uppercase">Я хочу незабываемое торжество!</button>

						<!--<a type="submit" class="button_zvonok zvonok btn-block buttoncall" href="#" data-label="ХОЧУ НЕЗАБЫВАЕМЫЙ КОРПОРАТИВ!">

							ХОЧУ НЕЗАБЫВАЕМЫЙ КОРПОРАТИВ!

						</a>-->

					</form>