Самое простое обновление БД

[desperate_one]

Есть такая задача обновлять настройки сайта без перезагрузки страницы.
Нужен самый простой скрипт без сторонних библиотек на чистом js. Элементов всего два: имя настройки и её значение (on/off), последнее и должно меняться в БД при нажатии на неё. Также нужно чтобы после нажатия button менялся (цвет на green и его value на on).

Вёрстка

<form name="sets" onsubmit="formsend(); return false;">
                <input name="setname" type="text" value="registration">
                <button name="set_go" type="submit" style="background-color:red; color:#fff;">off</button>
            </form>

Попытки:

function formsend() {
        var formData = new FormData(document.forms.sets);

        var xhr = new XMLHttpRequest();
        xhr.open("POST", "processor.php", true);
        xhr.send(formData);
        
        alert(document.forms.sets.setname); // для проверки, получил ли значения инпутов, выводит [object HTMLInputElement]
    }

Может кто поможет решить проблему иным способом или если я близок к решению подправит меня =)

[ksa]

для проверки, получил ли значения инпутов

Для проверки "получил ли сервер данные" alert() в таком месте тебе не поможет.

var xmlhttp = getXmlHttp()
xmlhttp.open('GET', '/xhr/test.html', true);
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4) {
     if(xmlhttp.status == 200) {
       alert(xmlhttp.responseText);
         }
  }
};
xmlhttp.send(null);

http://xmlhttprequest.ru

[ksa]

если я близок к решению подправит меня

Просто хоть что-то прочти на эту тему.
https://learn.javascript.ru/ajax-xmlhttprequest

[desperate_one]

var xmlhttp = getXmlHttp()
xmlhttp.open('GET', '/xhr/test.html', true);
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4) {
     if(xmlhttp.status == 200) {
       alert(xmlhttp.responseText);
         }
  }
};
xmlhttp.send(null);

Почему метод get? и к чему test.html? Документацию читал..

[ksa]

Почему метод get? и к чему test.html?

Видно понятие "пример" тебе не особо знакомо...

Документацию читал..

Тогда из нее и, приведенного мной, примера тебе должно быть понятно как же нужно проверять получил ли сервер данные.

Т.е. не так как у тебя alert после

xhr.send(formData);

А в колбек-функции, что указана в onreadystatechange объекта XMLHttpRequest.

[desperate_one]

В общем пока такие букоффки:

function getXmlHttp() {
    var xhr;
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
        xhr = false;
      }
    }
    if (!xhr && typeof XMLHttpRequest!='undefined') {
      xhr = new XMLHttpRequest();
    }
    return xhr;
  }

function formsend(setnamepost,setstat) {

    var xhr = getXmlHttp();
    xhr.open('post', 'processor.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // Отправляем тип содержимого
    xhr.send('setname=' + encodeURIComponent(setnamepost) + '&setstat=' + encodeURIComponent(setstat));

    xhr.onreadystatechange = function() { // Ждём ответа от сервера
      if (xhr.readyState == 4) { // Ответ пришёл
        if(xhr.status == 200) { // Сервер вернул код 200 (что хорошо)
            if (xhr.responseText) document.getElementById("return").innerHTML = 'fine';
            else document.getElementsByClassName("return").innerHTML = 'error';

            alert(setstat + ', ' + setnamepost);
        }
      }
    };
}

<form action="javascript:void(0);" method="post" name="sets" onsubmit="formsend('registration','off'); return false;">
                <input name="setname" type="text" value="registration">
                
                    <input name="setstat" type="hidden" value="off">
                    <button name="set_go" type="submit" style="background-color:green; color:#fff;">on</button>
            </form>

Если в обработчик отправлять форму без использования ajax, то работает прекрасно, иначе в базе данные не меняются, консоль пуста, alert выводит и setstat, и setnamepost. А значит код 200 вернулся. Где эта ошибка хрен знает...

[Dilettante_Pro]

desperate_one,
getElementsByClassName - это список элементов с данным классом.
Если такой элемент один - надо getElementsByClassName("return")[0]

[ksa]

А значит код 200 вернулся.

Попробуй данные засунуть прямо у УРЛ, который отправляешь запросом.

var url='processor.php';
url+='?setname='+'тут имя';
url+='&setstat='+'тут статус';
xhr.open('post', url, true);

А в send ничего не передавай...

xhr.send();

[ksa]

desperate_one, вот такой вариант у меня показал ответ сервера

tmp.csp

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<style type='text/css'>
</style>
<script type='text/javascript'>
function getXmlHttp() {
    var xhr;
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
        xhr = false;
      }
    }
    if (!xhr && typeof XMLHttpRequest!='undefined') {
      xhr = new XMLHttpRequest();
    }
    return xhr;
  }

function formsend(setnamepost,setstat) {
    var xhr = getXmlHttp();
    var url='tmp1.csp';
	var val=document.getElementsByName('setname')[0].value;
	url+='?setname='+encodeURIComponent(val);
	var val=document.getElementsByName('setstat')[0].value;
	url+='&setstat='+encodeURIComponent(val);
	xhr.open('post', url, true);
    xhr.open('post', url, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // Отправляем тип содержимого
    xhr.send();
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4) {
        if(xhr.status == 200) { 
            alert(xhr.responseText);
        }
      }
    };
}
</script>
</head>
<body>
<form method="post" name="sets" onsubmit="formsend('registration','off'); return false;">
	<input name="setname" type="text" value="registration">
	<input name="setstat" type="hidden" value="off">
	<button name="set_go" type="submit" style="background-color:green; color:#fff;">on</button>
</form>
</body>
</html>

tmp1.csp

setname=#($g(%request.Data("setname",1)))#
setstat=#($g(%request.Data("setstat",1)))#

[ksa]

Вот такой вариант работает...

function formsend(setnamepost,setstat) {
    var xhr = getXmlHttp();
    var url='tmp1.csp';
    *!*var str='setname='+document.getElementsByName('setname')[0].value*/!*;
	 *!*str+='&setstat='+document.getElementsByName('setstat')[0].value;*/!*
	xhr.open('post', url, true);
    xhr.open('post', url, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // Отправляем тип содержимого
    *!*xhr.send(str);*/!*
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4) {
        if(xhr.status == 200) { 
            alert(xhr.responseText);
        }
      }
    };
}