Отправить без перезагрузки страницы
У меня есть 2 раскрывающихся списка, как показано ниже;
<div class = "form-group">
<label>Category</label>
<select class = "form-control bg-dark btn-dark text-white" id = "drpcategory" name = "drpcategory" onchange = "submit()" required>
<?php
$category = ''.$dir.'/template/post/category.txt';
$category = file($category, FILE_IGNORE_NEW_LINES);
foreach($category as $category)
{
echo "<option value='".$category."'>$category</option>";
}
?>
</select>
</div>
<div class = "form-group">
<label>Item</label>
<select class = "form-control bg-dark btn-dark text-white" id = "drpitem" name = "drpitem">
<?php
$category = $_POST['drpcategory'];
$item = ''.$dir.'/template/post/'.$category.'/item.txt';
$item = file($item, FILE_IGNORE_NEW_LINES);
foreach($item as $item)
{
echo "<option value='".$item."'>$item</option>";
}
?>
</select>
</div>
Раскрывающийся список drpitem заполняется в соответствии с выбором, сделанным в раскрывающемся списке drpcategory. В настоящее время я могу поймать переменную $category в drpitem с помощью $_POST['drpcategory'], и это работает. Но проблема в том, что я использую функцию submit() для события onchange в drpcategory, так что вся страница просто перезагружается, а затем drpitem заполняется, как и ожидалось. Это приводит к тому, что drpcategory возвращается к выбору по умолчанию, поскольку он не помнит, каким было его значение до перезагрузки страницы.
Как я могу поймать $_POST['drpcategory'] в drpitem без перезагрузки страницы? Я стараюсь придерживаться PHP и использовать минимальное количество JavaScript, если это необходимо.
Этот вопрос был позже обновлен и ответил здесь: AJAX POST и PHP POST на одной странице
как первое раскрывающееся меню должно влиять на второе? Отправляются ли какие-либо данные на сервер при изменении первого меню выбора?
@RamRaider Он берет выбранное значение из 1-го раскрывающегося списка и применяет его к пути к файлу, который используется для заполнения 2-го раскрывающегося списка. Это уже проверено и работает для меня, как я и ожидал, но проблема в том, что страница полностью перезагружается после каждого выбора, а 1-й выпадающий список теряет память о своем предыдущем выборе перед перезагрузкой страницы.
удалить функцию submit
хорошо - я еще не выпил свой второй кофе этим утром, но теперь я вижу, как я думаю, что это должно работать. Вам нужно будет использовать ajax для этого
@RamRaider Точно. Ищете простое решение AJAX здесь.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете указать значение первого раскрывающегося списка в сеансе.
Затем при отправке вы можете просто установить первое значение раскрывающегося списка на значение в сеансе.
Никаких изменений в обработке отправки не требуется
У вас может быть условие if в операторе foreach.
foreach($category as $category_item)
{
if ($_POST['drpcategory'] == $category_item) {
echo "<option selected value='".$category_item."'>".$category_item."</option>";
} else {
echo "<option value='".$category_item."'>".$category_item."</option>";
}
}
Я вижу, что ваш оператор foreach неверен в синтаксисе. Не используйте одно и то же имя переменной для списка и элемента.
Как только важная часть информации известна, это довольно просто, и, без сомнения, вы могли бы найти другие примеры chained select using ajax, но непроверенный пример может быть полезен/интересен.
В этом случае событие change запускает ajax-запрос к той же php-странице — php в верхней части скрипта обрабатывает этот POST-запрос и использует данные POST для построения пути к следующему исходному файлу меню.
<?php
/* top of same page to the javascript/html */
if ( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_POST['drpcategory'] ) ){
ob_clean();
$category=$_POST['drpcategory'];
$path=$dir.'/template/post/'.$category.'/item.txt';
$item = file($path, FILE_IGNORE_NEW_LINES);
foreach( $item as $item ) printf('<option value = "%s">%s',$item,$item);
exit();
}
?>
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>chained select</title>
<script>
const ajax=function( params ){
let xhr=new XMLHttpRequest();
with( xhr ){
onreadystatechange=function(e){
if ( this.status==200 && this.readyState==4 ){
document.querySelector('select[name = "drpitem"]').innerHTML=this.response
}
}
open( 'POST', location.href, true );
setRequestHeader('Content-Type','application/x-www-form-urlencoded');
send( params );
}
}
document.addEventListener('DOMContentLoaded', event=>{
document.querySelector('select[name = "drpcategory"]').addEventListener('change',e=>{
e.preventDefault();
ajax( 'drpcategory='+e.target.value );
},false);
},false );
</script>
</head>
<body>
<div class = "form-group">
<label>Category</label>
<select class = "form-control bg-dark btn-dark text-white" name = "drpcategory" required>
<?php
$category = $dir.'/template/post/category.txt';
$category = file($category, FILE_IGNORE_NEW_LINES);
foreach($category as $category) {
printf('<option value = "%s">%s',$category,$category);
}
?>
</select>
</div>
<div class = "form-group">
<label>Item</label>
<select class = "form-control bg-dark btn-dark text-white" name = "drpitem"></select>
</div>
</body>
</html>
Вы находитесь в правильном направлении, говоря об AJAX здесь. Но из-за того, что я новичок в программировании, просто смотреть на этот код для меня слишком сложно. Каким будет самый короткий способ переопределить поведение перезагрузки страницы по умолчанию для функции submit() с помощью AJAX без перезагрузки страницы? Я имею в виду ту же самую функцию submit() по умолчанию без перезагрузки страницы. Я также использую JQUERY, если это еще больше сокращает код.
Ну, я думаю, что вышеизложенное довольно кратко. Там нет ничего, что не должно быть там, чтобы заставить эту работу работать. Я не знаю, где, по вашему мнению, вы могли бы сделать ярлыки - вам нужен PHP для чтения текстового файла, поэтому либо страницу необходимо перезагрузить, либо выполнить с помощью ajax (есть и другие возможности) - конечно, вы могли бы использовать методы, связанные с jQuery (сам не использую его, поэтому не могу помочь), но, по сути, по большей части это будет просто другая версия вышеперечисленного. функция ajax может быть упрощена - вам нужно отправить только 1 параметр, я думаю
Я думаю, пришло время для нового вопроса. +1 за направление на правильный путь к AJAX.
@haZh jQuery не является необходимостью, просто попробуйте скопировать это решение на свою страницу, и оно должно сработать. если нет, вы можете добавить детали в вопрос.
@ techie_28 Я не говорю, что это не работает, но я пробовал это, но не могу заставить его работать, вероятно, потому, что я не понимаю стандартный JavaScript. Я просто не могу вставить весь этот код и использовать его, даже если он действительно работает. Может быть, JQUERY и не нужен, но для таких новичков, как я, я предпочитаю использовать его, чтобы код выглядел проще.
@haZh Хорошо. Откройте консоль браузера (клавиша F12 или щелкните правой кнопкой мыши> проверить), затем снова попробуйте запустить этот код. Вы должны увидеть что-то под панелью Console или Network, что скажет вам, почему это не работает. Пожалуйста, напишите об этом в вопросе.
пожалуйста, добавьте функцию
submitк вопросу