Javascript-форум - Создать(показать ранее скрытую) форму после нажатия на кнопку

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Создать(показать ранее скрытую) форму после нажатия на кнопку (https://javascript.ru/forum/misc/69002-sozdat-pokazat-ranee-skrytuyu-formu-posle-nazhatiya-na-knopku.html)

Создать(показать ранее скрытую) форму после нажатия на кнопку

Добрый день, помогите пожалуйста решить такую задачу.
У меня есть форма с селекторами для выбора критериев(предмет, группа, год и семестр):
index.php

//Если появляется POST со значением селектора -  разблокировать следующий связанный и отправить значения сл. селектора
<?php
 if($_POST['disciplinesval']){
      $return = selectGroup();
      exit($return);
    }
  if($_POST['groupval'] && $_POST['disciplinesval2']){
      $return = selectYear();
      exit($return);
    }
//по аналогии год, семестр.


$disciplines = selectDisciplines($about_lector['id_lect']); //Массив со значениями Дисциплин из функции (глобальный параметр для расчет - id лектора)
?>

<form name="selector" action="" method="POST">
   <div id="divdisciplines">
     <select name="disciplines" id="disciplines">
       <option value="0">Выберите дисциплину</option>
       <?php foreach($disciplines as $discipline){
       ?>
       <option value="<?php echo $discipline['id_disc'];?>"><?php echo $discipline['name']; ?></option>
       <?php } ?>
     </select>     
   </div>

   <div id="divgroup">
     <select name="group" id="group" disabled></select>
   </div>

   <div id="divyear">
     <select name="year" id="year" disabled></select>
   </div>

   <div id="divsemestr">
     <select name="semestr" id="semestr" disabled></select>
   </div>

   <input type="submit" name="submitSelector" value="Отправить">
 </form>

данные в которую загружаются таким методом:
selector.php

function selectDisciplines ($lector_ID) {
	$res = R::getAll(" SELECT * FROM disciplines WHERE lecturer='$lector_ID' ");// Запрос на список дисциплин для текущего преподавателя
	$disciplines = array();
	foreach($res as $item){
		$disciplines[] = $item;
   }
   return $disciplines;
}

function selectGroup(){
	$disciplinesval = (int)$_POST['disciplinesval'];
	// $res = array_unique(R::getAll(" SELECT * FROM student_groups, students, performance WHERE student_groups.id_group=students.id_group AND students.id_student=performance.id_stud AND performance.id_disc='$disciplinesval' "));
	$res = R::getAll(" SELECT DISTINCT g.id_group, g.group_name FROM student_groups g
JOIN  students st ON st.id_group=g.id_group
JOIN  performance per ON g.id_group=st.id_group AND st.id_student=per.id_stud AND per.id_disc='$disciplinesval'
 ");
	$return = "<option value='0'>Выберите группу</option>";
	foreach($res as $item){
		$return .="<option value='{$item['id_group']}'>{$item['group_name']}</option>";
	}
	return $return;
}

//По аналогии selectGroup() подгружаются год, семестр.

common.js

$(document).ready(function(){
    $("#disciplines").change(function() {
        var disciplinesval = parseInt($("#disciplines").val() ); //id таблицы disciplines выбранного селектора дисциплин
        selectGroup(disciplinesval);//Передаем значение в функцию selectGroup
    });
});

function selectGroup(disciplinesval) {
    var group = $("#group");

    // Очистка зависимого списка(группы) при смене дисциплины
    clear(group);
    clear($("#year"));
    clear($("#semestr"));
    //Выбрана ли дисциплина (0 это дефолтное значение)
    if (disciplinesval > 0){
        group.attr("disabled", false); //Делаем селектор активным
        //Передаем значение номера дисциплины (disciplinesval) в глобальный массив POST
        group.load(
            "index.php",
            {disciplinesval: disciplinesval}
        );
    }
}
//По аналогии год, семестр.

function clear(val) {
    val.empty();
    val.attr("disabled", true);
}

Проблема заключается в том - как после выбора в каждом из селекторов, после нажатия на клавишу <input type="submit" name="submitSelector" value="Отправить"> загружалась(или становилась видна) другая форма с таблицей студентов, данные в которой загрузились бы в зависимости от значений в $_POST['submitSelector']?
Форма должна получиться примерно такая:

<form name="stud_edit" id="stud_edit" action="" method="POST" ">
<div id="divstud_edit_head" name="divstud_edit_head">
  <tr>
    <td><input type = "text" name = "numb0" value="№ записи" readonly></td>
    <td><input type = "text" name = "discipline0" value="Предмет" readonly></td>
    <td><input type = "text" name = "group0" value="Группа" readonly></td>
    <td><input type = "text" name = "student0" value="Студент" readonly></td>
    <td><input type = "text" name = "point0" value="Баллы" readonly></td><br/>
</tr>
</div>
<div name="divstud_edit" id="divstud_edit">
<?php
//Значения из $_POST['submitSelector']
  $select_data = $_POST['submitSelector'];

  $disc = (int)$select_data['disciplines'];
  $semestr = (int)$select_data['semestr'];
  $year = (int)$select_data['year'];
  $group = (int)$select_data['group'];

 $row1 = R::getAssoc(" SELECT DISTINCT per.id, per.id_disc, per.id_stud, per.points, per.semester, per.st_year FROM performance per
 JOIN lecturers lect
 JOIN disciplines disc
 JOIN students stud ON per.id_disc = '$disc' AND per.semester = '$semestr' AND per.st_year='$year' AND per.id_stud=stud.id_student AND stud.id_group='$group' "); //проверяем соотв. предметов у лектора, привязываем id лектора с id из логина, по текущему семестру
$count = 1;
 foreach( $row1 as $item ){
    $id_record = R::getRow(" SELECT * FROM performance WHERE id_disc = '".$item['id_disc']."' AND id_stud = '".$item['id_stud']."' AND semester='".$item['semester']."' AND st_year='".$item['st_year']."'  "); //узнаем номер записи
    $disc = R::getRow(" SELECT * FROM disciplines WHERE id_disc = '".$item['id_disc']."' "); 
    $student = R::getRow(" SELECT * FROM students WHERE id_student = '".$item['id_stud']."' "); 
    $group = R::getRow(" SELECT * FROM student_groups WHERE id_group='".$student['id_group']."' ");
?> 
 <tr>
   <td><input type = "text" name = "numb<?php echo $count;?>" value ="<?php echo $id_record['id'];?>" readonly></td>
   <td><input type = "text" name = "numb<?php echo $count;?>" value ="<?php echo $disc['name'];?>" readonly></td>
   <td><input type = "text" name = "group<?php echo $count;?>" value ="<?php echo $group['group_name'];?>" readonly></td>
   <td><input type = "text" name = "student<?php echo $count;?>" value ="<?php echo $student['surname'];?> <?php echo $student['name'];?> <?php echo $student['patronymic'];?>" readonly></td>
   <td><input type = "text" name = "point<?php echo $count;?>" value ="<?php echo $item['points'];?>"></td>
   </tr>
<?php
  $count = $count + 1;
	}
?>
</div>

<input type="submit" name="update_data" id="update_data" value="Обновить">
</form>

И кто же вот это value ='{$id_record['id']}' обрабатывает?

В чем проблема - показать на клиенте нечто? Зачем тогда много РНР кода, в котором никто разбираться не станет? Показывайте результирующий html-код формы в таком случае.

Если проблема получения самой формы по запросу клиента, то это вопрос не имеет отношения к клиенту.

По самой форме тоже вопрос - а какой смысл ее получения, если ее поля доступны только для чтения, о каком обновлении в этом случае может идти речь?

foreach( $row1 as $item ){ $id_record = R::getRow(" SELECT * FROM ... не жестко ли циклом?

name = 'numb{$count}' - зачем эта искусственная привязка, если есть идентификаторы?

Спасибо за уточнение, ошибка при копировании: {$id_record['id']} и подобные должны быть <?php echo $id_record['id']; ?>

Проблема в том, что формы пока нет (не знаю как должно быть правильно: создавать форму с данными целиком, или наполнять данными созданную?). Я привел пример формы которую хотел бы видеть.

Для чтения доступны поля с оценками <td><input type = "text" name = "point<?php echo $count;?>" value ="<?php echo $item['points'];?>"></td>

Про цикл:
На каждом шаге мы берем строку из массива $row1. В нём хранятся данные в виде ключей. Мне же для отображения нужны их соответствующие названия. Подтаблицы там не больший(2 столбца - ид и название), так что не вижу в этом проблемы.

Можно и проще, не <?php echo $id_record['id']; ?>, а <?=$id_record['id']?>

Для чтения (только) доступны поля с оценками, это значит нельзя изменять. У вас практически все поля только для чтения. Если их нельзя изменять, зачем же их отправлять клиенту, а затем возвращая серверу обновляя их?

Не известно что возвращает запрос, но если есть возможность сформировать из него параметры запроса как WHERE field IN(....), то лучше так, а не дергать базу в цикле.

<td><input type = "text" name = "numb<?php echo $count;?>" value ="<?php echo $id_record['id'];?>" readonly></td>
<td><input type = "text" name = "numb<?php echo $count;?>" value ="<?php echo $disc['name'];?>" readonly></td>

Это опять либо ошибка при копировании, либо .... А вообще, не

name="numb<?php echo $count;?>", это головная боль

а

name = "numb[идентификатор записи]"

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

Так в чем проблема? По выбору в последнем списке, этот запрос формирует эту форму, и проблема получить ее на клиенте?

if($_SERVER['REQUEST_METHOD'] == 'POST') {
  $data2 = $_POST;
     if (isset($data2['update_data'])) {
  for ( $i = 1; $i <= $count-1; $i++ ) {
    $numb_upd = $data2['numb'.$i];
    $points_upd = $data2['point'.$i];
  
   R::exec("UPDATE performance SET points = '$points_upd' WHERE id = '$numb_upd' ");
  }
  ?>
  <meta http-equiv="refresh" content="0;URL=index.php">;
  <?php
}else{
  echo 'ошибка обновления';
}
}

Как получить вторую форму на стороне клиента, заполненную на основе данных из селекторов формы1?
Смысл заполнения данными второй формы я описал в первом сообщении.

У вас обновляется одно поле таблицы, а сервер формирует форму из кучи бесполезных полей. А ведь при получении RAW данных формы интерпретатору все это придется разгребать впустую. Зачем, если все данные не подлежащие обновлению можно и нужно просто помещать в ячейки таблицы, а не в поле формы?

Дело хозяйское, но это

$numb_upd = $data2['numb'.$i];
$points_upd = $data2['point'.$i];

ужас в программировании.

Если вы хотите получать данные от сервера асинхронными запросами, что демонстрируется клиентским скриптом выше, то

?>
<meta http-equiv="refresh" content="0;URL=index.php">;
<?php

недопустимо. Выбор в последнем списке должен отправлять асинхронный запрос включающий параметр. Сервер формирует таблицу данных и с формой, отдавая ее клиенту. Запросить/получить ее можно любым из Ajax запросов JQ. Можно самым простым из них .load().

В рамках этого диалога должен быть вывод и ошибок, и результат удачного обновления, и прочее.

Спасибо большое за ответ. А можно еще уточнить: если у меня форма со статической шапкой всегда будет отображаться, а вот наполнять данными о студентах я буду, допустим, в

<tr>
<td>...</td>
</tr>

как мне в JS обратиться к нему, чтобы наполнить? в случае с селекторами я присваивал селектору id(по которому обращался) и наполнял его option'ами. Как такое провернуть с <td>? Так же нужно просто присвоить ему id?

Не понял причем тут шапка страницы. У вас есть связанные списки. Собственно их можно расположить таким образом на странице, что можно будет легко получить их коллекцию. При этом изменения в этих списках будут иметь один общий обработчик, отправляющий асинхронный запрос на сервер, и получая в ответ последующий список. Данные для какого из списков при этом запрашиваются сервер определяет по параметрам запроса. Ведь таким же образом и ваш серверный скрипт производит определение, так ведь?

Клиентский сценарий также может определить в каком из списков произошло изменение. Например, если это не последний в наборе, значит данные для списка, а если последний, то сервер вернул форму, которую он поместит на страницу. То есть и серверный сценарий вполне может определить, что запрос последнего списка и клиент запрашивает форму.

Эти вопросы ясны и затруднений по ним нет?

А вот во что и как поместить форму, так это зависит от формата данных. Ваш код возвращает готовую таблицу с формой, и речь вроде бы о студентах, значит ответ помещать надо не в

<tr>
<td>...</td>
</tr>

а либо в постоянно имеющийся на странице TABLE, либо в какой либо DIV, если сервер возвращает полностью таблицу, а не ее строки. То есть заменяется html содержимое TABLE или DIV.

Если же формат данных, которыми производится обмен с сервером, это JSON, то на основе этих данных клиент строит html код таблицы/формы.

У вас не видно, чтобы сервер возвращал <table>, значит например, <table id="list"></table> уже на странице. Сервер и клиент знают, что результат запроса это таблица/форма, поэтому помещает ее в тег таблицы:

$('#list').html(data)

где data содержит ответ сервера (см. описание Ajax методов).

Дополнение (редактирование не доступно).

Ваша таблица содержит же и форму, а значит корректный код будет <form><table>....</table></form>. Следовательно либо вы формируете полностью эту структуру кода на сервере, а клиент ее помещает в какой либо DIV. Либо иметь на странице <form></form> в которую помещать таблицу сформированную сервером.

Цитата:

Сообщение от Bearon

Как такое провернуть с <td>? Так же нужно просто присвоить ему id?

Есть пока еще проблемы с форумом, не стал писать об этом сразу.

Допустим, принимаем, что вы получаете списки и итоговую форму асинхронными запросами. В вашем коде при этом есть потенциальные проблемы.

1) Неизвестно чем обрабатываются у вас ошибки/исключения запросов БД, на что должна быть реакция и ответ клиенту, но даже без их наличия не проверяется вернул ли вообще что-то запрос.

2) Без проверки указанного в п. 1, формируется html-код ответа клиенту, а значит при ошибках запроса или запросах возвращаемых null, клиент получит "битый код". Особенно узкое место в этом плане, это в цикле, где производится группа отдельных запросов к БД.

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

Идентификаторы у списков служат для их идентификации в обработчике событий. Форма же для группового обновления, так что каких то id для отдельных строк таблицы не требуется назначать. Если форму отдает сервер и она помещается к примеру DIV уже имеющийся на странице, у вас есть такой, который и можно использовать, <div id="divstud_edit">. То есть он постоянно на странице, а не результат запросов списков, тогда при получении формы нужно устанавливать ее обработчик, например:

//возьмем не ваш метод асинхронных запросов group.load
//а $.ajax, который обрабатывает запросы списков, тогда
var dst = this.id; //запомним источник события - текущий список
....
success: function(data) {
    //data может содержать как списки так и форму
    //что получена форма можно узнать по id источника события
    if(dst=='semestr') { //получена форма
        $("#divstud_edit").html(data).find('form').submit(function(e) {
             e.preventDefault();
             //отправляем форму асинхронным запросом
             $.ajax(....)
        })
    } else $("#group").html(data) //получен список  
}
....

А вот сама таблица/форма, это как ранее говорилось, только необходимое для обновления

<td><?=$disc['name']?></td>
<td><?=$group['group_name']?></td>
.....
<td><input type="text" name="upd[<?=идентификатор обновляемой записи?>]" value ="<?=текущее значение?>"></td></tr>

И сервер получить массив upd ключами которого будут ID для WHERE, и значение для SET. Именовать поля как name1...nameN, кроме геморроя ничего не дает. Уж коли ID и значение, это двумя полями формы, тогда проще name="name[]" для всех полей, а на сервере

foreach(array_chunk($_POST['name'], 2) as $data) {
....

Это тоже самое, ибо как ваши нумерованные, но никак не связанные поля, так и этот подход, не есть гарантия того, что вы чинным порядком получите поля формы так как ожидаете.