Форумы портала PHP.SU :: Версия для печати

1. kikosik666 - 26 Марта, 2020 - 14:52:12 - перейти к сообщению

Здравствуйте, кто поможет мне?

Нужен код на ajax, которая передает значение checkbox, select, radiobutton, text на другую страницу с помощью ajax, чтобы страница не перезагружалась. Значение должно передать когда один или несколько из этих элементов(checkbox, select, radiobutton, text) будут изменены.

Пример можно посмотртеть тут https://auto.am/search/passenger-cars?q={%22category%22:%221%22,%22page%22:%221%22,%22sort%22:%22latest%22,%22layout%22:%22list%22,%22user%22:{%22dealer%22:%220%22,%22id%22:%22%22},%22year%22:{%22gt%22:%221911%22,%22lt%22:%222021%22},%22usdprice%22:{%22gt%22:%220%22,%22lt%22:%22100000000%22},%22mileage%22:{%22gt%22:%2210%22,%22lt%22:%221000000%22}}

Кто поможет мне с кодом, не как не могу найти такой код

Спасибо

2. Vladimir Kheifets - 29 Марта, 2020 - 16:55:16 - перейти к сообщению

kikosik666 пишет:

Добрый день!
Вам хотелось бы обрабатывать, событие change для тэгов checkbox, select, radiobutton, text без перезагрузки страницы.
Можно это сделать на чистом JS так:

Спойлер (Отобразить)

CODE (html):
скопировать код в буфер обмена

<html>
<head>
  <title>test</title>
 <style>
 div{border:1px solid black; padding:10px;min-height:20px}
 </style>
</head>
<body>
<form>
a:<input name="a" type="text"><br>&nbsp;<br>
b:<input name="b" type="text"><br>&nbsp;<br>
c:<input name="c" type="text"><br>&nbsp;<br>
<hr>
d1:<input name="d1" type="checkbox" value="checkbox1">checkbox1<br>
d2:<input name="d2" type="checkbox" value="checkbox2">checkbox2<br>
d3:<input name="d3" type="checkbox" value="checkbox3">checkbox2<br>
<hr>
e:<input name="e" type="radio"  value="radio1">radio1<br>
e:<input name="e" type="radio"  value="radio2">radio2<br>
e:<input name="e" type="radio"  value="radio3">radio3<br>
<hr>
&nbsp;<br>selA:<select name="selA">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<br>&nbsp;<br>selB:<select name="selB">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
 
</form>
Здесь то, что изменили:
<div id="сhanged"></div>
<script>
var elements = document.getElementsByTagName("input")
for (i = 0;i<elements.length; i++){
  elements[i].addEventListener("change", function() {
        ViewChange(this);
  });
}
//-----------------------------------------------------
var elements = document.getElementsByTagName("select")
for (i = 0;i<elements.length; i++){
  elements[i].addEventListener("change", function() {
        ViewChange(this);
  });
}
//----------------------------------------------
function ViewChange(el_ch){
    patt = new RegExp("checkbox|radio");
    if(patt.test(el_ch.type))
    {
         v=el_ch.checked?el_ch.value:"";
         inChanged(el_ch.type, el_ch.name, v);
    }
    else
    {
         inChanged(el_ch.type, el_ch.name, el_ch.value);
    }
}
//--------------------------------------------------------------
function inChanged(t, n, v){
 el=document.getElementById("сhanged");
 inh=el.innerHTML;
 if(inh) inh+="<br>";
 el.innerHTML = inh + "<b>type:</b>"+t+ " <b>name:</b>"+ n + " <b>value:</b>" + v;
}
</script>
</body>
</html>

Потребуется определить один или несколько контейнеров, контент, в которых будет изменяться.
Новый контент, при изменение одного из тэгов, без перезагрузки страницы, можно получить так:

Спойлер (Отобразить)

Удачи!