Category Archives: JS

Проверка формы js

        /* check form START */

        $("input[name=form_text_2]").mask("+7 (999) 999-9999");

        $(document).on('click', '#form_id_1', function() {

            checkInput('input[name="form_text_1"]', 'string');
            checkInput('input[name="form_text_2"]', 'phone');
            checkInput('input[name="form_text_3"]', 'string');
        });

        function checkInput(id, type) {

            switch (type) {
                case 'string':
                    checkString(id);
                    break;
                case 'email':
                    checkEmail(id);
                    break;
                case 'phone':
                    checkPhone(id);
                    break;
            }

        }

        function checkString(id) {

            var item = $(id);
            if (item.val() == '') {
                item.css('border', '1px solid #da6060');
                event.preventDefault();
            } else {
                item.css('border', '1px solid #2b9619');
            }
        }

        function checkEmail(id) {

            var item = $(id);
            var result = isValidEmail(id);

            if (result === false) {
                item.css('border', '1px solid #da6060');
                event.preventDefault();
            } else if (result === true) {
                item.css('border', '1px solid #2b9619');
            }
        }

        function isValidEmail(id) {

            var string = $(id).val();

            var atSym = string.lastIndexOf("@");
            var space = string.lastIndexOf(" ");
            if (space > 1) {
                return false;
            }
            if (atSym < 1) {
                return false;
            }
            if (atSym == string.length - 1) {
                return false;
            }
            if (atSym > 64) {
                return false;
            }
            if (string.length - atSym > 255) {
                return false;
            }
            var lastDot = string.lastIndexOf(".");
            if (lastDot > atSym + 1 && lastDot < string.length - 1) {
                return true;
            }
            if (string.charAt(atSym + 1) == '[' && string.charAt(string.length - 1) == ']') {
                return true;
            }
            return false;
        }

        function checkPhone(id) {
            var item = $(id);
            phone = item.val();
            phone = phone.slice(2);
            phone = phone.match(/^\([0-9]{3}\)[0-9]{3}-[0-9]{2}\-[0-9]{2}/);

            if (!phone) {
                item.css('border', '1px solid #da6060');
                event.preventDefault();
            } else {
                item.css('border', '1px solid #2b9619');
            }
        }

        /* check form END */

/* check form START */

$("input[name=form_text_2]").mask("+7 (999) 999-9999");

$(document).on('click', '#form_id_1', function() {

checkInput('input[name="form_text_1"]', 'string');

checkInput('input[name="form_text_2"]', 'phone');

checkInput('input[name="form_text_3"]', 'string');

});

function checkInput(id, type) {

switch (type) {

case 'string':

checkString(id);

break;

case 'email':

checkEmail(id);

break;

case 'phone':

checkPhone(id);

break;

}

function checkString(id) {

var item = $(id);

if (item.val() == '') {

item.css('border', '1px solid #da6060');

event.preventDefault();

} else {

item.css('border', '1px solid #2b9619');

}

function checkEmail(id) {

var item = $(id);

var result = isValidEmail(id);

if (result === false) {

item.css('border', '1px solid #da6060');

event.preventDefault();

} else if (result === true) {

item.css('border', '1px solid #2b9619');

}

function isValidEmail(id) {

var string = $(id).val();

var atSym = string.lastIndexOf("@");

var space = string.lastIndexOf(" ");

if (space > 1) {

return false;

}

if (atSym < 1) {

return false;

}

if (atSym == string.length - 1) {

return false;

}

if (atSym > 64) {

return false;

}

if (string.length - atSym > 255) {

return false;

}

var lastDot = string.lastIndexOf(".");

if (lastDot > atSym + 1 && lastDot < string.length - 1) {

return true;

}

if (string.charAt(atSym + 1) == '[' && string.charAt(string.length - 1) == ']') {

return true;

}

return false;

}

function checkPhone(id) {

var item = $(id);

phone = item.val();

phone = phone.slice(2);

phone = phone.match(/^$[0-9]{3}$[0-9]{3}-[0-9]{2}\-[0-9]{2}/);

if (!phone) {

item.css('border', '1px solid #da6060');

event.preventDefault();

} else {

item.css('border', '1px solid #2b9619');

}

/* check form END */

Замена ссылки JS (jQuery)

Для замены ссылки с помощью JS (jQuery) используем attr

function spbMenu() {
    $('[href="/promo/"]').attr('href','/promo-spb/');
    $('[href="/blog/"]').attr('href','/blog-spb/');
};

function spbMenu() {

$('[href="/promo/"]').attr('href','/promo-spb/');

$('[href="/blog/"]').attr('href','/blog-spb/');

};

Затем вызываем функцию

spbMenu();

1	spbMenu();

js перемешать div

Имеется такая структура

<div class="myItems">
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
</div>

</div>

Нужно сделать

<div class="myItems">
     <div class="item">2</div>
     <div class="item">3</div>
     <div class="item">1</div>
</div>

</div>

Для этого используем функцию

function reorder() {
           var grp = $(".myItems").children();
           var cnt = grp.length;

           var temp,x;
           for (var i = 0; i < cnt; i++) {
               temp = grp[i];
             x = Math.floor(Math.random() * cnt);
             grp[i] = grp[x];
             grp[x] = temp;
         }
         $(grp).remove();
         $(".myItems").append($(grp));
       }

function reorder() {

var grp = $(".myItems").children();

var cnt = grp.length;

var temp,x;

for (var i = 0; i < cnt; i++) {

temp = grp[i];

x = Math.floor(Math.random() * cnt);

grp[i] = grp[x];

grp[x] = temp;

}

$(grp).remove();

$(".myItems").append($(grp));

}

Не забываем про вызов функции Используем jQuery Полезная информация Перемешивание DOM-элементов в jQuery stackoverflow

Добавление класса js по содержимому

$('.article__button.button.button--basket span:contains("Товар в корзине")').each(function(){
  $(this).parent('div').addClass("item_in_basket");
});

$('.article__button.button.button--basket span:contains("Товар в корзине")').each(function(){

$(this).parent('div').addClass("item_in_basket");

});

Пример:

<div class="article__button button button--basket">
<span>Товар в корзине</span></div>

1 2	<div class="article__button button button--basket"> <span>Товар в корзине</span></div>

Кнопка наверх jQuery

Не забываем подключить jQuery js (перед </head>)

<script type="text/javascript">
$(function() {
	$(window).scroll(function() {
		if($(this).scrollTop() != 0) {
			$('#toTop').fadeIn();	
		} else {
			$('#toTop').fadeOut();
		}
	});
 
	$('#toTop').click(function() {
		$('body,html').animate({scrollTop:0},800);
	});	
});
</script>

$(function() {

$(window).scroll(function() {

if($(this).scrollTop() != 0) {

$('#toTop').fadeIn();

} else {

$('#toTop').fadeOut();

}

});

$('#toTop').click(function() {

$('body,html').animate({scrollTop:0},800);

});

</script>

css

<style> 
#toTop {
        width:100px;
        border:1px solid #ccc;
        background:#f7f7f7;
        text-align:center;
        padding:5px;
        position:fixed; /* this is the magic */
        bottom:10px; /* together with this to put the div at the bottom*/
        right:10px;
        cursor:pointer;
        display:none;
        color:#333;
        font-family:verdana;
        font-size:11px;
}
</style>

<style>

#toTop {

width:100px;

border:1px solid #ccc;

background:#f7f7f7;

text-align:center;

padding:5px;

position:fixed; /* this is the magic */

bottom:10px; /* together with this to put the div at the bottom*/

right:10px;

cursor:pointer;

display:none;

color:#333;

font-family:verdana;

font-size:11px;

}

</style>

html Перед </body>

<div id="toTop">^ Back to Top</div>

1	<div id="toTop">^ Back to Top</div>

Еще больше примеров тут.

Маска телефона JS

Подключаем библиотеку jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

1	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

С официального сайта скачиваем maskedinput.js В итоге получаем маску телефона на input

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.maskedinput.js"></script>
<script type="text/javascript">
jQuery(function($){
   $("input[name=telefon]").mask("+7 (999) 999-9999");
});
</script>

jQuery(function($){

$("input[name=telefon]").mask("+7 (999) 999-9999");

});

</script>

Если необходимо, можно использовать аргумент (для отключения чистки при частично заполненном номере)

<span class="pun">{</span><span class="pln">autoclear</span><span class="pun">:</span> <span class="kwd">false</span><span class="pun">}</span>

1	<span class="pun">{</span><span class="pln">autoclear</span><span class="pun">:</span> <span class="kwd">false</span><span class="pun">}</span>

Например:

$(control).mask('999-999-9999', {autoclear: false});

1	$(control).mask('999-999-9999', {autoclear: false});

Отправка формы обратной связи средствами AJAX

Для отправки формы обратной связи без перезагрузки страницы, сделаем следующее: Создадим 2 файла: index.php, mail.php. index.php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<style>
	.top_form_ok,.top_form_error {
		display: none;
	}
</style>
</head>
<body>
<?
echo time();
?>
<hr>
<div class="top_form">
	<form method="POST">
		Введите имя: <input name="name"><br/>
		Введите телефон: <input name="tel"><br/>
		Ваше сообщение: <textarea name="text"></textarea><br/>
		<input type="submit">
	</form>
</div>
<div class="top_form_ok">Успешно отправлено</div>
<div class="top_form_error">Что-то пошло не так</div>

<script>
	$(".top_form").submit(function() { // С каким объектом взаимодействует аякс

		var name = $('.top_form input[name="name"]').val(); 
		var tel = $('.top_form input[name="tel"]').val();
		var text = $('.top_form textarea[name="text"]').val();
																// создаем переменные из полей формы

		var str = {

			'name' : name,
			'tel': tel,
			'text': text
		}														// собираем их в масив	


		$.ajax({
			type: "POST",											// тип отправки данных
			url: "mail.php",  // путь до пхп файла отправки письма
			data: str,												// какие данные отправляем
			success: function(msg) {                              // получаем ответ сервера

				if(msg) {                //если ответ равен  ... то
					$('.top_form_error').css('display','block');
				} else {
					$('.top_form_ok').css('display','block');
					$('.top_form').css('display','none');
				}
			}
		});

		return false;
	});

</script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.top_form_ok,.top_form_error {

display: none;

}

</style>

</head>

<body>

echo time();

<hr>

Введите имя: <input name="name"><br/>

Введите телефон: <input name="tel"><br/>

Ваше сообщение: <textarea name="text"></textarea><br/>

</form>

</div>

<div class="top_form_ok">Успешно отправлено</div>

<div class="top_form_error">Что-то пошло не так</div>

$(".top_form").submit(function() { // С каким объектом взаимодействует аякс

var name = $('.top_form input[name="name"]').val();

var tel = $('.top_form input[name="tel"]').val();

var text = $('.top_form textarea[name="text"]').val();

// создаем переменные из полей формы

var str = {

'name' : name,

'tel': tel,

'text': text

} // собираем их в масив

$.ajax({

type: "POST", // тип отправки данных

url: "mail.php", // путь до пхп файла отправки письма

data: str, // какие данные отправляем

success: function(msg) { // получаем ответ сервера

if(msg) { //если ответ равен ... то

$('.top_form_error').css('display','block');

} else {

$('.top_form_ok').css('display','block');

$('.top_form').css('display','none');

}

});

return false;

});

</script>

</body>

</html>

mail.php

<?php
function mailSend () {
	$name 		 = $_POST['name'];
	$tel 		 = $_POST['tel'];
	$text 		 = $_POST['text'];

	$site 		 = $_SERVER['HTTP_HOST'];

	$to 		 = "prog@site.ru";// от кого
	$from 		 = "admin@site.ru";// кому

	$subject	 = "Новое письмо с сайта {$site}";

	$message 	 = "<h1>Вам сообщение с сайта {$site}</h1>";
	$message 	.= "Имя: {$name}<br/>";
	$message 	.= "Телефон: {$tel}<br/>";
	$message 	.= "<hr>";
	$message 	.= $text;

	$header  	 = 'MIME-Version: 1.0' . "\r\n";
	$header 	.= "From: {$from}\r\n";
	$header 	.= "Content-type: text/html; charset=utf-8\r\n"; 
	$header 	.= "X-Mailer: PHP mail script";

	mail($to, $subject, $message, $header);
}

mailSend();
?>

<?php

function mailSend () {

$name = $_POST['name'];

$tel = $_POST['tel'];

$text = $_POST['text'];

$site = $_SERVER['HTTP_HOST'];

$to = "prog@site.ru";// от кого

$from = "admin@site.ru";// кому

$subject = "Новое письмо с сайта {$site}";

$message = "<h1>Вам сообщение с сайта {$site}</h1>";

$message .= "Имя: {$name}<br/>";

$message .= "Телефон: {$tel}<br/>";

$message .= "<hr>";

$message .= $text;

$header = 'MIME-Version: 1.0' . "\r\n";

$header .= "From: {$from}\r\n";

$header .= "Content-type: text/html; charset=utf-8\r\n";

$header .= "X-Mailer: PHP mail script";

mail($to, $subject, $message, $header);

}

mailSend();