Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
0 / 0 / 0
Регистрация: 16.02.2021
Сообщений: 9
1

Как передать атрибут name input type=radio в модальное окно

04.01.2023, 01:54. Показов 647. Ответов 9
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Добрый день.
Хочу реализовать следующее:
Есть таблица строки которой содержат записи из базы данных (БД). В каждой строке в 1-ом столбце расположен <input type='radio'> c атрибутами name и value=id соответствующей записи в БД.
При нажатии на <input type="submit" value="Изменить"> должно появиться модальное окно с формой которая содержит в себе <input type="text"> содержащее в себе уже значение из БД, которое в последствии изменяешь и по нажатию на кнопку сохранить запись в БД изменяется на введенное.

Проблема в том что никак не могу передать id выбранной с помощью radio записи в модальное окно.
formaction и formmethod="POST" для передачи данных не работают - модальное окно открывается но с ошибкой "Notice: Undefined index: selrecstatus in ..."

Подскажите пожалуйста, как это можно реализовать.
Проблема во 2-ой части кода в строке
// Записываем в переменную ID выбранной для редактирования записи
$selupdate=$_POST["selrecstatus"];


1. Часть кода Главная страница с таблицей и кнопками управления данными
Код
// +-------------------------------------------------------------------------------------------+
// |Блок для расположения кнопок управления табличными данными                   |
// +-------------------------------------------------------------------------------------------+
<?php
echo "<div class='mci_menu_top'>";
	echo "<form name='status_form'>";
		echo "<nav id='menu2'>";
			echo "<ul>";
				?>
				<li><input type="button" value="Добавить" class="superbutton js-open-modal" data-modal="2" onclick="#"></li>

				<li><input type="submit" value="Изменить" class="superbutton js-open-modal" data-modal="22" onclick="#"></li>
				<?php	
			//echo "<li><input type='submit' value='Изменить' class='superbutton' formaction='update.php' formmethod='POST' onClick='return jsvalidate_updt_form_stage();'></li>";
				echo "<li><input type='submit' value='Удалить' class='superbutton' formaction='../delrec/delrec_guid.php' formmethod='POST' onClick='return jsvalidate_del_rec(\"selrecstatus\");'></li>";
				echo "</ul>";
		echo "</nav>";
echo "</div>";//--mci_menu_top--	
// +-------------------------------------------------------------------------------------------+
// |Блок для расположения кнопок управления табличными данными (конец)                         |
// +-------------------------------------------------------------------------------------------+

// +-------------------------------------------------------------------------------------------+
// |Главная (центральная) область рабочего экрана                                              |
// +-------------------------------------------------------------------------------------------+
echo "<div class='mci_box_for_table'>";
	// SQL-запрос на выборку всех записей из таблицы dir_stage
	$query=("SELECT * FROM dir_status");
	$res=mysqli_query($link, $query);
	// Проверяем ликвидность запроса
	if(!$res)exit("Ошибка.  Чтение списка Стадий из БД не состоялось. Вывод информации не возможен. ");
	echo"
		<table class='averagetable'>
			<thead>
				<tr>
					<th width='25px'>  </th>
					<th width='300px'> Наименование </th>
					<th></th>
				</tr>
			</thead>";
			while ($row=mysqli_fetch_assoc($res)) // для каждой строки из запроса
				{
					echo "<tbody>";
						echo"
							<tr>
								<td align='center' width='25px'><input type='radio' name='selrecstatus' value='" . $row['id_dst'] . "'></td>
								<td>" . $row['Status'] . "</td>
							</tr>";
					echo "<tbody>";
				}
			echo"
		</table>";
	// Конец вывода информации на экран в виде таблицы	
	echo "</form>";
echo "</div>";//--mci_box_for_table--
// +-------------------------------------------------------------------------------------------+
// |Главная (центральная) область рабочего экрана (конец)                                  |
// +-------------------------------------------------------------------------------------------+
2. Часть кода Модального окна
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!-- Редактирование записей в Справочнике Статус договора -->
<div class="modal_for_guid" data-modal="22">
    <div class="box_top">
       <!--   Svg иконка для закрытия окна  -->
       <svg class="modal__cross js-modal-close" xmlns="http://www.w3.org/2000/svg"               viewBox="0 0 24 24"><path d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.095 9.184 2.81 2.81 9.112-9.192 9.18 9.1z"/></svg>
       <p class="paragraph_winmodal">Редактирование записи "Статус договора"</p>
    </div>
<div class="box_document_guid">
    <form action='../updaterec/updaterec_save.php' method='post' enctype = 'multipart/form-data'>
        <!-- SQL-запрос на выборку данных Статус договора -->                                          
        <?php
        // Записываем в переменную ID выбранной для редактирования записи                               
        $selupdate=$_POST["selrecstatus"];
        $query_update = "SELECT * FROM dir_status WHERE id_dst IN ('".$selupdate."')";
        $res_update = mysqli_query($link, $query_update);
        $res_update = mysqli_fetch_assoc($res_update);
        ?>
        <!-Статус договора-->
        <div class='text-field__group'>
            <span>
                <label for='new_status'>Статус договора:</label>
                <?php
                echo "
                <input id='new_status' name='Status'  type='text' maxlength='20' placeholder='не более 20 симв.' class='form_size'autofocus value='".$res_update['Status']."'>";
                ?>
            </span>
        </div>
    
</div>
            <div class="box_button">
                <div class="btn_center">
                    <input class='superbutton2' type='submit' name='add' value='Сохранить'>
                    &nbsp;&nbsp;&nbsp;<input class='superbutton2' type='submit' name='save' value='Отмена' formaction='status.php'>
                </div>
            </div>
        </form>
</div>
3. JAVA скрипт вызова модального окна

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
!function(e){"function"!=typeof e.matches&&(e.matches=e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||function(e){for(var t=this,o=(t.document||t.ownerDocument).querySelectorAll(e),n=0;o[n]&&o[n]!==t;)++n;return Boolean(o[n])}),"function"!=typeof e.closest&&(e.closest=function(e){for(var t=this;t&&1===t.nodeType;){if(t.matches(e))return t;t=t.parentNode}return null})}(window.Element.prototype);
            document.addEventListener('DOMContentLoaded', function() {
 
               /* Записываем в переменные массив элементов-кнопок и подложку.
                  Подложке зададим id, чтобы не влиять на другие элементы с классом overlay*/
               var modalButtons = document.querySelectorAll('.js-open-modal'),
                   overlay      = document.querySelector('.js-overlay-modal'),
                   closeButtons = document.querySelectorAll('.js-modal-close');
 
               /* Перебираем массив кнопок */
               modalButtons.forEach(function(item){
 
              /* Назначаем каждой кнопке обработчик клика */
              item.addEventListener('click', function(e) {
 
             /* Предотвращаем стандартное действие элемента. Так как кнопку разные
                люди могут сделать по-разному. Кто-то сделает ссылку, кто-то кнопку.
                Нужно подстраховаться. */
             e.preventDefault();
 
             /* При каждом клике на кнопку мы будем забирать содержимое атрибута data-modal
                и будем искать модальное окно с таким же атрибутом. */
             var modalId = this.getAttribute('data-modal'),
                 modalElem = document.querySelector('.modal_for_guid[data-modal="' + modalId + '"]');
 
             /* После того как нашли нужное модальное окно, добавим классы
                подложке и окну чтобы показать их. */
             modalElem.classList.add('active');
             overlay.classList.add('active');
          }); // end click
 
       }); // end foreach
 
       closeButtons.forEach(function(item){
 
          item.addEventListener('click', function(e) {
             var parentModal = this.closest('.modal_for_guid');
 
             parentModal.classList.remove('active');
             overlay.classList.remove('active');
          });
 
       }); // end foreach
 
        document.body.addEventListener('keyup', function (e) {
            var key = e.keyCode;
 
            if (key == 27) {
 
                document.querySelector('.modal_for_guid.active').classList.remove('active');
                document.querySelector('.overlay').classList.remove('active');
            };
        }, false);
    }); // end ready
Заранее спасибо за помощь.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
04.01.2023, 01:54
Ответы с готовыми решениями:

Возможно ли передать в input type="file" атрибут value?
Привет, мир! Собственно мучает вопрос, возможно ли вообще передать в &lt;input type=&quot;file&quot;...

Как установить значение input`а(type=radio) в TWebBrowser?
Добрый день. Подскажите пожалуйста, как выставить значение input`a(type=radio) в TWebbrowser?

Как задать значение input radio type динамически?
Есть представление @foreach (var p in Model) &lt;td &gt;&lt;input type=&quot;radio&quot;...

Как передать input radio в БД?
Здравствуйте. Ниже код HTML + PHP для формирования разного количества радиокнопок. Каким методом...

9
Эксперт JS
3547 / 1375 / 381
Регистрация: 14.03.2022
Сообщений: 3,271
04.01.2023, 12:05 2
Dus2004, сделай нормальный html на котором можно показать как "собрать" нужные данные...

Добавлено через 11 минут
Как некий набросок решения вопроса...
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form>
    <div>
        <input type='radio' name='selrecstatus' value='1' />
    </div>
    <div>
        <input type='radio' name='selrecstatus' value='2' />
    </div>
    <div>
        <input type='radio' name='selrecstatus' value='3' />
    </div>
    <button>Тест</button>
</form>
  
<script>
document.querySelector('form').addEventListener('submit', e => {
    e.preventDefault()
    let val = document.querySelector('[name="selrecstatus"]:checked')
    val = val ? val.value : null
    alert(val)
})
 
</script>
0
0 / 0 / 0
Регистрация: 16.02.2021
Сообщений: 9
04.01.2023, 12:36  [ТС] 3
Надеюсь правильно вас понял.
Надо передать selrecstatus в updaterec.php по нажатию submit
если в submit добавить formaction="../updaterec/up.php" formmethod="POST" и убрать js-open-modal, то все получается, а с
js-open-modal не передает данные.

Код
<html>
<body>
...
<form>
	<div>
		<input type="submit" value="Изменить" class="superbutton js-open-modal" data-modal="22" onclick="#">
	</div>
	<div>
		<table class='averagetable'>
			<thead>
				<tr>
					<th width='25px'>  </th>
					<th width='300px'> Наименование </th>
					<th></th>
				</tr>
			</thead>
			<?php
			while ($row=mysqli_fetch_assoc($res)) // для каждой строки из запроса
				{
					echo "<tbody>";
						echo"
							<tr>
								<td align='center' width='25px'><input type='radio' name='selrecstatus' value='" . $row['id_dst'] . "'></td>
								<td>" . $row['Status'] . "</td>
							</tr>";
					echo "<tbody>";
				}
			?>
		</table>
	</div>
</form>
...
<?php
	//подключения файла модального окна (стилями css скрыт, при нажатии на submit - модальное окно появляется)
	//появление модального окна обеспечивает javascript - class js-open-modal
	require_once '../updaterec/updaterec.php'; 
?>
</body>
</html>
0
3502 / 1266 / 429
Регистрация: 24.07.2016
Сообщений: 1,889
04.01.2023, 13:05 4
А зачем вам вся эта хрень с модальным окном, кнопками и кучей форм? У вас берутся данные из БД и из них создаётся html-таблица. Внизу таблицы пусть будет кнопка "Изменить". Тут даже одной формы не надо. Ячейки таблицы имеют атрибут contenteditable. Меняете содержимое ячеек, по клику на кнопку собираете контент из ячеек и ajax-ом отправляете на соотв. файл. Там принимаете и заносите в БД.
0
0 / 0 / 0
Регистрация: 16.02.2021
Сообщений: 9
04.01.2023, 13:12  [ТС] 5
Спасибо, но мне надо именно такую "хрень". За ответ спасибо, но он не в тему.
0
3502 / 1266 / 429
Регистрация: 24.07.2016
Сообщений: 1,889
04.01.2023, 13:36 6
Цитата Сообщение от Dus2004 Посмотреть сообщение
мне надо именно такую "хрень"
ну ладно
0
Эксперт JS
3547 / 1375 / 381
Регистрация: 14.03.2022
Сообщений: 3,271
04.01.2023, 13:55 7
Цитата Сообщение от Dus2004 Посмотреть сообщение
Надо передать selrecstatus в updaterec.php по нажатию submit
если в submit добавить formaction="../updaterec/up.php" formmethod="POST" и убрать js-open-modal, то все получается, а с
js-open-modal не передает данные.
Я тут ничего не понял...

Dus2004, любое сложное дело можно разбить на несколько простых... Вот это и нужно тебе сделать.
На простые вопросы и на простых примерах можно запросто получить ответы.

В твоем же случае явно строится "кошмаро грандиозо". А такое не всем будет понятно. Даже зачем такое вообще нужно.
0
0 / 0 / 0
Регистрация: 16.02.2021
Сообщений: 9
04.01.2023, 14:41  [ТС] 8
Никакого кошмаро грандиозо
Есть status.php, в нем есть input type=radio, надо его атрибут name передать в другой php-файл (модальное окно) который прицеплен с помощью require_once к status.php.
Все какое кашмаро?!
Я так полагаю что вы даже внимательно вчитаться в вопрос не желаете, что уж говорить про ответ на вопрос.
0
1652 / 1151 / 173
Регистрация: 23.07.2010
Сообщений: 6,855
04.01.2023, 16:24 9
ну так ajax, не?
0
0 / 0 / 0
Регистрация: 16.02.2021
Сообщений: 9
04.01.2023, 16:55  [ТС] 10
ajax пытался не передает значение и всё-тут.
Хотя код которым делал проверен потому что в другой ситуации он рабочий.
Это javascript на событие onclick кнопки submit.
Сначала считываю value input'а потом пытаюсь передать.
Value считывается а передачи нет.
3 дня уже мучаюсь, уже вплоть до того что думаю как уйти от модального окна и как-то по другому реализовать редактирование записей БД
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function var_up()
{
    if(jsvalidateRadio (document.getElementsByName("selrecstatus")))
         {
             var agree=confirm('Изменить запись ?');
                     if (agree) 
                     {
                        let i = document.querySelector('input[name="selrecstatus"]:checked');
                                let v_selrecstatus = i.getAttribute('value');
                                alert(v_selrecstatus);
 
                            let m5 = v_selrecstatus;
                                    $.ajax({
                                            url: '../updaterec/updaterec.php', // скрипт который получит отправление
                                            data: {'res_v_selrecstatus' : v_selrecstatus},
                                            type: 'POST', // метод
                                            dataType: 'html', // тип послания
                                            success: 
                                                function(data)
                                                {
                                                    //alert(data);
                                                }       
                                        });
                     }
                     else
                     return false ;
         }
     else
         {
             alert('Пожалуйста, выберите запись для редактирования.');
             return false;
         }
}
0
04.01.2023, 16:55
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
04.01.2023, 16:55
Помогаю со студенческими работами здесь

как скриптом установить атрибут VALUE объекта INPUT (type=file)
Есть объект &lt;input type='file' id='file_name'&gt; если сделать...

Как передать значение с выбранного radio в input?
Всем привет. Есть радио кнопки, у них есть цены, как при выборе радио кнопки передать цену в...

Как вывести input radio в зависимости от выше выбранного input radio
Нужно сделать как бы вывод на странице двух input radion. Выбор пола. Мужчина и Женщина. Если я...

Input type=radio
Как с помощью CSS изменить внешний вид радио-кнопки? Какие CSS свойства я могу применить в этой...

Как передать данные в модальное окно
В основном окне у меня есть var tur = oImg.src; Я открываю модальное окно...

Работа с <input type=radio >
У меня задача выполнять обработку данных запросами в зависимости от выбранного критерием типа: ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru