modxws/modxws-urok26-4.html

## modxws-urok26-4.html
<!DOCTYPE html>
<html>
<head>
<title>[[++site_name]] - [[*pagetitle]]</title>
<base href="[[++site_url]]" />
<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">
<!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-ie6.min.css"><![endif]-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#send-form').submit(function(){
        //при отправке формы собираем все данные из полей и ИД страницы
        var name = jQuery("input#name").val();
        var email = jQuery("input#email").val();
        var tel = jQuery("input#tel").val();
        var msg = jQuery("textarea#msg").val();
        var pageid = "[[*id]]";
        //складываем все данные в одну строку (наш URL для AJAX-запроса)
        var dataString = 'name='+ name + '&email=' + email + '&tel=' + tel + '&msg=' + msg + '&id=' + pageid;

    jQuery.ajax({
      type: "POST",
      url: "[[~123]]",  //здесь указываем ИД ресурса, куда будет оправлен AJAX запрос
      data: dataString,
      success:  function() {  //сообщение об удачной отправке
                        jQuery('#send-form').html("<div id='message'></div>");
                        jQuery('#message').html("<h2>Вопрос отправлен!</h2>")
                        .append("<p>Скоро мы с вами свяжемся.</p>")
                        .hide()
                        .fadeIn(1500, function() {
                        $('#message').append("<i class=\"icon-ok\"></i>");
                        });
                }
    });
    return false;
                });
        });
</script>
</head>
<body>

    <div class="container">

    <form id="send-form" autocomplete="" method="post">
    <fieldset>
    <legend>AJAX форма отправки сообщения</legend>
    <label for="name">Имя<span>*</span></label>
    <input type="text" name="name" id="name" value="" maxlength="255" required="required">

    <label for="email">Email<span>*</span></label>
    <input spellcheck="false" name="email" id="email" value="" type="email" maxlength="255" required="required">

    <label for="tel">Телефон</label>
    <input name="tel" id="tel" type="tel" maxlength="255" value="">

    <label>Сообщение<span>*</span></label>
    <textarea name="text" id="text" spellcheck="true" rows="10" cols="50" onkeyup="" onchange="" required="required" value=""></textarea>
    <br>
    <input id="sendmail" type="submit" class="btn btn-success" value="Отправить">
    </fieldset>
    </form>

    <div id="site-search-results"></div>
    <hr>

    </div>
    [^t^]
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>[[++site_name]] - [[*pagetitle]]</title>
	<base href="[[++site_url]]" />
	<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">
	<!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-ie6.min.css"><![endif]-->
	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script type="text/javascript">
	jQuery(document).ready(function() {
	jQuery('#send-form').submit(function(){
	//при отправке формы собираем все данные из полей и ИД страницы
	var name = jQuery("input#name").val();
	var email = jQuery("input#email").val();
	var tel = jQuery("input#tel").val();
	var msg = jQuery("textarea#msg").val();
	var pageid = "[[*id]]";
	//складываем все данные в одну строку (наш URL для AJAX-запроса)
	var dataString = 'name='+ name + '&email=' + email + '&tel=' + tel + '&msg=' + msg + '&id=' + pageid;

	jQuery.ajax({
	type: "POST",
	url: "[[~123]]", //здесь указываем ИД ресурса, куда будет оправлен AJAX запрос
	data: dataString,
	success: function() { //сообщение об удачной отправке
	jQuery('#send-form').html("<div id='message'></div>");
	jQuery('#message').html("<h2>Вопрос отправлен!</h2>")
	.append("<p>Скоро мы с вами свяжемся.</p>")
	.hide()
	.fadeIn(1500, function() {
	$('#message').append("<i class=\"icon-ok\"></i>");
	});
	}
	});
	return false;
	});
	});
	</script>
	</head>
	<body>

	<div class="container">

	<form id="send-form" autocomplete="" method="post">
	<fieldset>
	<legend>AJAX форма отправки сообщения</legend>
	<label for="name">Имя<span>*</span></label>
	<input type="text" name="name" id="name" value="" maxlength="255" required="required">

	<label for="email">Email<span>*</span></label>
	<input spellcheck="false" name="email" id="email" value="" type="email" maxlength="255" required="required">

	<label for="tel">Телефон</label>
	<input name="tel" id="tel" type="tel" maxlength="255" value="">

	<label>Сообщение<span>*</span></label>
	<textarea name="text" id="text" spellcheck="true" rows="10" cols="50" onkeyup="" onchange="" required="required" value=""></textarea>
	<br>
	<input id="sendmail" type="submit" class="btn btn-success" value="Отправить">
	</fieldset>
	</form>

	<div id="site-search-results"></div>
	<hr>

	</div>
	[^t^]
	</body>
	</html>