Category Archives: JS

Отправка формы XMLHttpRequest send form field

XMLHttpRequest send form field JS

document.addEventListener("DOMContentLoaded", function() { // Подключаем скрипт При полной загрузке сайта
	document.getElementById('upload').onclick = function() { // Событие на клик кнопки
		var req = new XMLHttpRequest();
		var formSend = new FormData(); 

		req.open("POST", '/testjs/handler.php');

		obj = 	{	
					'Ключ 1' : 'Значение 1', 	
					'Ключ 2' : 'Значение 2'
				};

		for (key in obj){
			formSend.append(key, obj[key]);
		}

		form = document.forms.test_send;

		for (var i = 0; i <= (form.length - 1); i++){
			value 	= form[i].value;
			name 	= form[i].name;

			if (value){
				formSend.append(name, value);
			}
		}

		req.onreadystatechange = function() 
		{
			if (req.readyState == 4)
			{
				request = req.responseText;
				console.log(request);
				document.getElementById('consoleLog').innerHTML = request;
			}
		}

		req.send(formSend);	

		return false;
	}
});

document.addEventListener("DOMContentLoaded", function() { // Подключаем скрипт При полной загрузке сайта

document.getElementById('upload').onclick = function() { // Событие на клик кнопки

var req = new XMLHttpRequest();

var formSend = new FormData();

req.open("POST", '/testjs/handler.php');

obj = {

'Ключ 1' : 'Значение 1',

'Ключ 2' : 'Значение 2'

};

for (key in obj){

formSend.append(key, obj[key]);

}

form = document.forms.test_send;

for (var i = 0; i <= (form.length - 1); i++){

value = form[i].value;

name = form[i].name;

if (value){

formSend.append(name, value);

}

req.onreadystatechange = function()

{

if (req.readyState == 4)

{

request = req.responseText;

console.log(request);

document.getElementById('consoleLog').innerHTML = request;

}

req.send(formSend);

return false;

}

});

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>test js</title>
	<link rel="stylesheet" type="text/css" href="/testjs/style.css" />
	<script type="text/javascript" src="/testjs/custom.js"></script>
</head>
<body>
<form method="POST" id="test_send" enctype="multipart/form-data">
	<input type="text" name="field1"><br />
	<input type="text" name="field2"><br />
	<input type="submit" value="Отправить" id="upload">
</form>
<hr>
<div id="consoleLog"></div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</form>

<hr>

</body>

</html>

PHP

<?php
var_dump($_REQUEST);

1 2	<?php var_dump($_REQUEST);

mkTimeDate Js

function mkTimeDate(date){
	return new Date(date.replace(/(\d+).(\d+).(\d+)/, '$3/$2/$1')).getTime();
}

function mkTimeDate(date){

return new Date(date.replace(/(\d+).(\d+).(\d+)/, '$3/$2/$1')).getTime();

}

mkTimeDate JavaScript пример ДД.ММ.ГГ $1 — день $2 — месяц $3 — год Пример: ‘01.01.1900’

Cookie js

var CookieManager = {
    set: function (name, value, days) {
         var expires = "";
          if (days) {
              var d = new Date();
              d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
              expires = "; expires=" + d.toGMTString();
          }
          document.cookie = name + "=" + value + expires + "; path=/";
          return this.get(name);
    },
    get: function (name) {
          name += "=";
          var b = document.cookie.split(';'), c;
          for (var i = 0; i < b.length; i++) {
              c = b[i].replace(/(^\s+)|(\s+$)/g, "");
              while (c.charAt(0) == ' ') 
                   c = c.substring(1, c.length);
              if (c.indexOf(name) == 0) 
                   return c.substring(name.length, c.length);
          }
          return null;
    },
    remove: function (name) {
          this.set(name, "", -1);
    }
};

var CookieManager = {

set: function (name, value, days) {

var expires = "";

if (days) {

var d = new Date();

d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));

expires = "; expires=" + d.toGMTString();

}

document.cookie = name + "=" + value + expires + "; path=/";

return this.get(name);

get: function (name) {

name += "=";

var b = document.cookie.split(';'), c;

for (var i = 0; i < b.length; i++) {

c = b[i].replace(/(^\s+)|(\s+$)/g, "");

while (c.charAt(0) == ' ')

c = c.substring(1, c.length);

if (c.indexOf(name) == 0)

return c.substring(name.length, c.length);

}

return null;

remove: function (name) {

this.set(name, "", -1);

}

};

Пример использования

CookieManager.set('name', 'value'); // параметр days можно не указывать
alert(CookieManager.get('name'));
CookieManager.remove('name');

CookieManager.set('name', 'value'); // параметр days можно не указывать

alert(CookieManager.get('name'));

CookieManager.remove('name');

js формат числа тысячи

/**
 * Формат цены типа 1 000
 */
function formatPrice(price){
	return price.toString().replace(/(\d)(?=(\d{3})+(\D|$))/g, '$1 ');
}

/**

* Формат цены типа 1 000

function formatPrice(price){

return price.toString().replace(/(\d)(?=(\d{3})+(\D|$))/g, '$1 ');

}

Вставить элемент после элемента js

Вставить элемент после другого элемента с помощью функции js insertAfter Вставить div после div

function insertAfter(elementInstertAfter, parentElement) {
	return parentElement.parentNode.insertBefore(elementInstertAfter, parentElement.nextSibling);
}

function insertAfter(elementInstertAfter, parentElement) {

return parentElement.parentNode.insertBefore(elementInstertAfter, parentElement.nextSibling);

}

Пример кода

<!DOCTYPE html>
<html>
<head>
	<title>js event</title>
	<meta charset="utf-8">
</head>
<body>
<script>
	document.addEventListener("DOMContentLoaded", function() { 

		function insertAfter(elementInstertAfter, parentElement) {
			return parentElement.parentNode.insertBefore(elementInstertAfter, parentElement.nextSibling);
		}

		element = document.getElementById('touch');

		document.getElementById('test').onclick = function() {

			if ( !element.innerHTML ) {
				element.innerHTML = 0;
			}

			element.innerHTML = parseInt(element.innerHTML) + 1;

			if ( element.innerHTML >= 20 ) {
				div = document.createElement('div');
				div.className = "alert alert-success";
				div.innerHTML = "<strong>Ура!</strong> Вы прочитали это важное сообщение.";
				insertAfter(div, element);
			}

		}
	});
</script>
<button id="test">touch Me</button>
<div id="touch"></div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>js event</title>

</head>

<body>

document.addEventListener("DOMContentLoaded", function() {

function insertAfter(elementInstertAfter, parentElement) {

return parentElement.parentNode.insertBefore(elementInstertAfter, parentElement.nextSibling);

}

element = document.getElementById('touch');

document.getElementById('test').onclick = function() {

if ( !element.innerHTML ) {

element.innerHTML = 0;

}

element.innerHTML = parseInt(element.innerHTML) + 1;

if ( element.innerHTML >= 20 ) {

div = document.createElement('div');

div.className = "alert alert-success";

div.innerHTML = "<strong>Ура!</strong> Вы прочитали это важное сообщение.";

insertAfter(div, element);

}

});

</script>

<button id="test">touch Me</button>

</body>

</html>

jsHttpRequest + загрузка файла на сервер без перезагрузки JS

Загрузка файла на сервер, без перезагрузки страницы на чистом JS Подгрузка элемента страницы без перезагрузки на чистом JS

function reloadRollAgency() // обновляем часть страницыстраницу
{
	createRollAgencyList('actionRollAgencyList',document.getElementById('formFilterRollAgency'), 1);
}

function handleFileRollAgency() // обрабатываем все не обработанные заявки
{
	var req = new JsHttpRequest();
	req.onreadystatechange = function() 
	{
		if (req.readyState == 4)
		{
			reloadRollAgency();
		}
	}			
	req.open(null, '/scripts/handler.php', true);
	req.send(null);		
}

function upload_file_roll_button() // загружаем файл
{
	form = document.forms.upload_file_rollagency;
	var formData = new FormData(form); 

	var req = new XMLHttpRequest();

	req.open("POST", 'request.php');
	req.onreadystatechange = function() 
	{
		if (req.readyState == 4)
		{
			reloadRollAgency();
		}
	}

/*			req.onload = req.onerror = function() {
		if (this.status == 200) {
			// reloadRollAgency();
		} else {
			alert("Ошибка" + this.status);
		}
	};*/

	// обработчик для закачки
	req.upload.onprogress = function(event) {
		document.getElementById('rollagencylist').innerHTML='<div style="text-align:center;" ><br /><img src="/img/loader.gif" width="64" height="64" alt="Ожидайте. Загрузка информации." title="Ожидайте. Загрузка информации." /><br /><br /></div>';
		document.getElementById('rollagencyuploadfile').innerHTML=null;
		document.getElementById('rollagencyuploadfile').style.display="none";
		document.getElementById('mainoverlay').style.display="none";	
	}	

	req.send(formData);		

}

function selectRollAgencyOrderCount() // удаляем выделенные заявки
{

	var arr = [];

    Array.from(document.getElementsByClassName('coloractive')).forEach(function(element){
        arr.push(element.getAttribute('data-id'));
    });		

    if (arr.length > 0){
		var req = new JsHttpRequest();

		req.onreadystatechange = function() 
		{
			if (req.readyState == 4)
			{
				reloadRollAgency();
			}
		}			
		req.open("POST", 'handler_delete.php', true);
		req.send( { elementDelete : arr } );		
	}
}

function selectRollAgencyOrder(id) // выбираем не обработанные заявки для удаления
{
	var row='row_rollagency_'+id;

	if (document.getElementById(row).classList.contains('coloryellow')){ // проверяем наличие класса
		document.getElementById(row).classList.toggle('coloractive'); // добавляем/убираем класс
	}		
}

function reloadRollAgency() // обновляем часть страницыстраницу

{

createRollAgencyList('actionRollAgencyList',document.getElementById('formFilterRollAgency'), 1);

}

function handleFileRollAgency() // обрабатываем все не обработанные заявки

{

var req = new JsHttpRequest();

req.onreadystatechange = function()

{

if (req.readyState == 4)

{

reloadRollAgency();

}

req.open(null, '/scripts/handler.php', true);

req.send(null);

}

function upload_file_roll_button() // загружаем файл

{

form = document.forms.upload_file_rollagency;

var formData = new FormData(form);

var req = new XMLHttpRequest();

req.open("POST", 'request.php');

req.onreadystatechange = function()

{

if (req.readyState == 4)

{

reloadRollAgency();

}

/* req.onload = req.onerror = function() {

if (this.status == 200) {

// reloadRollAgency();

} else {

alert("Ошибка" + this.status);

}

};*/

// обработчик для закачки

req.upload.onprogress = function(event) {

document.getElementById('rollagencylist').innerHTML='<div style="text-align:center;" ><br /><img src="/img/loader.gif" width="64" height="64" alt="Ожидайте. Загрузка информации." title="Ожидайте. Загрузка информации." /><br /><br /></div>';

document.getElementById('rollagencyuploadfile').innerHTML=null;

document.getElementById('rollagencyuploadfile').style.display="none";

document.getElementById('mainoverlay').style.display="none";

}

req.send(formData);

}

function selectRollAgencyOrderCount() // удаляем выделенные заявки

{

var arr = [];

Array.from(document.getElementsByClassName('coloractive')).forEach(function(element){

arr.push(element.getAttribute('data-id'));

});

if (arr.length > 0){

var req = new JsHttpRequest();

req.onreadystatechange = function()

{

if (req.readyState == 4)

{

reloadRollAgency();

}

req.open("POST", 'handler_delete.php', true);

req.send( { elementDelete : arr } );

}

function selectRollAgencyOrder(id) // выбираем не обработанные заявки для удаления

{

var row='row_rollagency_'+id;

if (document.getElementById(row).classList.contains('coloryellow')){ // проверяем наличие класса

document.getElementById(row).classList.toggle('coloractive'); // добавляем/убираем класс

}

js, ajax, request, httpRequest

Получить значение select option js/jquery

element = document.getElementById("brone_operators_id");
result = element.options[element.selectedIndex].text;
console.log(result);

element = document.getElementById("brone_operators_id");

result = element.options[element.selectedIndex].text;

console.log(result);

jQuery

result = $("select#brone_operators_id option:selected").text();
console.log(result);

1 2	result = $("select#brone_operators_id option:selected").text(); console.log(result);

Ссылка на сайт при копировании контента

function defCopySite() {
    var istS = 'Узнайте больше на сайте:'; // Слово должно находится в кавычках!
    var copyR = '© matveevs.ru'; // Слово должно находится в кавычках!
    var body_element = document.getElementsByTagName('body')[0];
    var choose = window.getSelection();
    var myLink = document.location.href;
    var authorLink = "<br /><br />" + istS + ' ' + "<a href='" + myLink + "'>" + myLink + "</a><br />" + copyR;
    var copytext = choose + authorLink;
    var addDiv = document.createElement('div');
    addDiv.style.position = 'absolute';
    addDiv.style.left = '-99999px';
    body_element.appendChild(addDiv);
    addDiv.innerHTML = copytext;
    choose.selectAllChildren(addDiv);
    window.setTimeout(function() {
        body_element.removeChild(addDiv);
    }, 0);
}
document.oncopy = defCopySite;

function defCopySite() {

var istS = 'Узнайте больше на сайте:'; // Слово должно находится в кавычках!

var copyR = '© matveevs.ru'; // Слово должно находится в кавычках!

var body_element = document.getElementsByTagName('body')[0];

var choose = window.getSelection();

var myLink = document.location.href;

var authorLink = "<br /><br />" + istS + ' ' + "<a href='" + myLink + "'>" + myLink + "</a><br />" + copyR;

var copytext = choose + authorLink;

var addDiv = document.createElement('div');

addDiv.style.position = 'absolute';

addDiv.style.left = '-99999px';

body_element.appendChild(addDiv);

addDiv.innerHTML = copytext;

choose.selectAllChildren(addDiv);

window.setTimeout(function() {

body_element.removeChild(addDiv);

}, 0);

}

document.oncopy = defCopySite;

Проверка формы js и отправка

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

		$name = checkString('input[name="form_text_6"]');
		$phone = checkString('input[name="form_text_7"]');
		$email = checkString('input[name="form_email_8"]');
		$comment = checkString('textarea[name="form_textarea_9"]');

		if ($name && $phone && $email && $comment) {
			$('form[name="request_call"] input[name="web_form_submit"]').click();
		}

	});


	function checkString(id) {

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

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

$name = checkString('input[name="form_text_6"]');

$phone = checkString('input[name="form_text_7"]');

$email = checkString('input[name="form_email_8"]');

$comment = checkString('textarea[name="form_textarea_9"]');

if ($name && $phone && $email && $comment) {

$('form[name="request_call"] input[name="web_form_submit"]').click();

}

});

function checkString(id) {

var item = $(id);

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

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

event.preventDefault();

return false;

} else {

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

return true;

}

Проверка формы 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 */