Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.87/15: Рейтинг темы: голосов - 15, средняя оценка - 4.87
10 / 0 / 0
Регистрация: 30.08.2020
Сообщений: 6

Добавить данные из формы в базу данных, используя AJAX.

30.08.2020, 20:25. Показов 3157. Ответов 7
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Я новичок, чтобы не создавать тему спрошу здесь.
Из базы данных берётся строка, заносится в таблицу, в которой кнопка, вызывая функцию PHP, динамически делает несколько новых строк с данными.
Другая же кнопка строки передаёт методом "post" данные в функцию "insert()" внешнего "ajax.js".
Всё отрабатывает чётко, когда строка статическая из базы данных.
Но когда доходит до обработки динамических форм строки таблицы, имеющих один и тот же "id" - проблема. В итоговую форму вносится только самое первое значение.
Вот фрагмент исходного файла PHP с кнопкой:
PHP/HTML
1
2
3
4
5
6
 <form action='javascript:insert()' method='post'>
<td>
<input type='hidden' name='aaa' id='aaa' value=<?= $aaa; ?>>
<input type='hidden' name='bbb' id='bbb' value=<?= $bbb; ?>>
<input type='submit' id='sel' name='sel' value='Select'>
</td>
А вот ajax.js:
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
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type = new XMLHttpRequest();
}
return request_type;
}
var http = createObject();
 
/* -------------------------- */
/* INSERT */
/* -------------------------- */
/* Required: var nocache is a random number to add to request. This value solve an Internet Explorer cache issue */
var nocache = 0;
function insert() {
 // Optional: Show a waiting message in the layer with ID login_response
 document.getElementById('insert_response').innerHTML = "Just a second..."
 // Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding.
////var site_url= encodeURI(document.getElementById('site_url').value);
////var site_name = encodeURI(document.getElementById('site_name').value);
var aaa= encodeURI(document.getElementById('aaa').value);
var bbb= encodeURI(document.getElementById('bbb').value);
 // Set te random number to add to URL request
nocache = Math.random();
 // Pass the login variables like URL variable
http.open('get', 'ins.php?aaa='+aaa+'&bbb=' +bbb+'&nocache = '+nocache);
http.onreadystatechange = insertReply;
http.send(null);
}
function insertReply() {
if(http.readyState == 4){ 
var response = http.responseText;
// else if login is ok show a message: "Site added+ site URL".
document.getElementById('insert_response').innerHTML = 'Действие успешное!';
 }
 }
Функцию переделывал под себя из готового примера, но вот как быть с динамическими формами где id одинаковые - никак не получается(
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
30.08.2020, 20:25
Ответы с готовыми решениями:

Php+ajax передаю данные формы в базу mysql
От сюда $(function() { $('#chat_submit').click(function(e) { e.preventDefault(); var chat_name =...

Добавить данные с формы в базу MSSQL
Подскажите, как данные из полей формы (в представлении) отправить в базу данных (с помощью контроллера, естественно)? Если не сложно -...

Как добавить добавить данные в базу данных посредством LINQ
Как добавить добавить данные в базу данных посредством LINQ to SQL Ошибка: Нарушение &quot;PK_TICKER_MINUTE&quot; ограничения PRIMARY...

7
10 / 0 / 0
Регистрация: 30.08.2020
Сообщений: 6
31.08.2020, 16:28  [ТС]
Функция JS "insert()", в принципе, со своей задачей - получить комбинацию "id" и "value" и передать эти два параметра "aaa" и "bbb" в скрипт "ins.php" методом "get" справляется и скрипт "ins.php" данные в таблицу SQL вносит успешно. Только для динамических форм - заносится первое совпадение "id". Мне главное сделать эту манипуляцию без перезагрузки страницы. Если кто-то предложит более привычный для него метод это сделать - мне не обязательно привязываться именно к моему переделанному примеру.
0
10 / 0 / 0
Регистрация: 30.08.2020
Сообщений: 6
01.09.2020, 11:44  [ТС]
Пытаясь копать теорию, понимаю, что однотипные элементы нужно объединять в класс. И в JS не достаточно функции getElementById(), нужна типа getElementsByClassName() - может у кого есть идеи и опыт?
0
 Аватар для irises
140 / 72 / 26
Регистрация: 29.06.2015
Сообщений: 186
01.09.2020, 20:36
Лучший ответ Сообщение было отмечено DrType как решение

Решение

Вы правы, нужно как-то их обьединить, лучше всего, в даном случае, воспользоватся name и в него записывать сгенерированное значение: для первой строки - aaa_1 и bbb_1, для второй aaa_2 и bbb_2 и т. д.
Поиск таких елементов будет зависить от структуры вашего html кода. И потом циклом вычитать эти данные.

Как образом Вы выводите на страницу данные из базы? Как выглядит html разметка?
Кнопка submit одна для всех значений?
Почему инпуты hidden?

JavaScript
1
http.open('get', 'ins.php?aaa='+aaa+'&bbb=' +bbb+'&nocache = '+nocache);
Вы для каждой строки из базы будете делать отдельный запрос? Может лучше сформировать массив и одним запросом все отправить?
1
10 / 0 / 0
Регистрация: 30.08.2020
Сообщений: 6
01.09.2020, 21:45  [ТС]
irises, спасибо что откликнулись и даёте наводку.
Из базы данных просто по уникальному ключу на отдельную php-страничку достаётся строка для дальнейших преобоазований с порядка восьми столбиками данных и тегами <tr><td>...</td></tr>. В данной строке добавил две кнопки: одна вызывает функцию PHP, которая делает преобразования и динамически результат выводит в виде один в один таких же строк с кнопками. Вторая кнопка строки (листинг прикреплён выше) во внешний "ajax.js" передаёт значения двух полей. Hidden - потому что одни и те же данные "aaa" и "bbb" используются функцией преобразования на этой же странице (кнопка-1), и нужны для передачи на внешний JS-файл (кнопка-2). Получаются по две кнопки для каждой строки.
Если функция кнопки-1 делает одну дополнительную строку - всё хорошо, т.к. "id" - в этом случае уникален и кнопка-2 передаёт нужную комбинацию "id"/"value". А если несколько строк - проблема, т.к. "id" - одинаковый.
Вот ломаю голову как к id добавить, например, ..._1, _2.
Может попробовать создать физический массив функцией "foreach" и попробовать подвязать счётчик к "id_"? Что-то топчусь на месте, надо завтра на свежую голову...

Добавлено через 11 минут
Пробовал в тег <td> добавить, например class='nnn'. А в JS скрипте если строку привести к виду:
var aaa= encodeURI(document.getElementsByClassNam e('nnn')[i].value);
то меняя значение "i" (0,1...) можно получить данные нужной строки. Но вот как это значение сопоставить с номером строки, где нажата кнопка_2?
0
 Аватар для irises
140 / 72 / 26
Регистрация: 29.06.2015
Сообщений: 186
01.09.2020, 21:48
Цитата Сообщение от Alex22522 Посмотреть сообщение
и попробовать подвязать счётчик к "id_"
Это также хорошая идея, но нужно быть внимательным чтоб случайно для двух инпутов, которые стоят рядом, не поставить один и тот id.

И касательно всего что Вы написали - лучшим способом будет продемонстрировать Ваш код и местами за необходимости прокоментировать его, чтоб остальные поняли чего Вы хотите или в чем Ваша идея.
Таким образом можна более комплексно решить проблему с указанием на все слабые места (и более быстро ).
1
10 / 0 / 0
Регистрация: 30.08.2020
Сообщений: 6
02.09.2020, 09:25  [ТС]
Код думаю что далёк от оптимального, многое сделано методом проб и переделки примеров под себя, но, вцелом, всё работает.
Думаю откинуть шапку, саму функцию "fun_1" и упрощённо показать как ею формируются динамические строки с данными. В принципе, параметр "aaa" будет одинаков и он передастся правильно, а вот параметр "bbb" формирует функция и нужно как-то сделать ему id уникальным. Т.е. мне надо на JS передать один динамически сформированный параметр:
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
 
<!-- Include AJAX Framework -->
<script src="AJAX/ajax.js" language="javascript"></script>
...
...
...
<?php 
//// фрагмент формирования динамических строк таблицы функцией "fun_1"
echo    "<tr> 
<td><center>".$par_1."</td>
<td><center>".$par_2."</td>";
?>
<td>
<form action='' method='post'>  <!-- передача параметров "aaa" и "bbb" в функцию "fun_1" -->
<select name="aaa">
<option value="1">/1</option>
<option value="2">/2</option>
<option value="3">/3</option>
<option value="4">/4</option>
<option value="5">/5</option>
<option value="6">/6</option>
<option value="7">/7</option>
<option value="8">/8</option>
</select>
<input type='submit' id='fun_1' name='fun_1' value='Детализация'> 
</td>
<td>
<input type="text" name="bbb" value="<?= $bbb; ?>">
</form>
</td>
 
<?php
echo "
<td><center>".$par_3."</td>
<td><center>".$par_4."</td>
<td><center>".$par_5."</td>
<td><center>".$par_6."</td>
 
<!-- Передача параметров "aaa" и "bbb" в функцию JS insert() -->
<form action='javascript:insert()' method='post'>
<td>
<input type='hidden' name='aaa' id='aaa' value=<?= $aaa; ?>>
<input type='hidden' class='nnn' name='bbb' id='bbb' value=<?= $bbb; ?>>
<input type='submit' id='sel' name='sel' value='Select'>
</form></td>
";
}
...
...
...
if(array_key_exists('fun_1',$_POST)){
fun_1();
}
?>
</table>
Листинг "ajax.js" приведён выше, только экспериментирую со строкой:
JavaScript
1
var net_i2= encodeURI(document.getElementsByClassName('nnn')[i].value);
когда "i" присваиваю "0,1,2..." - данные нужной строки получаю. Но вот как всё собрать воедино...
0
10 / 0 / 0
Регистрация: 30.08.2020
Сообщений: 6
02.09.2020, 22:16  [ТС]
Добавил счётчик на страничку php ($ii), дописал переменную в value динамической кнопки для контроля. Проверил, теперь динамические кнопки имеют разные "value": bbb1, bbb2, bbb3... . Этот же составной параметр вписал в поля "id" и "name". Получается, если поля "id", "name", "value" по синтаксису не отличаются - я получил уникальные "id": bbb1, bbb2, bbb3... равные "value" динамических кнопок. Меня интересует только один параметр "bbb"
HTML5
1
2
3
4
5
6
7
<form action='javascript:insert()' method='post'>
<td>
<input type='hidden' name='aaa' id='aaa' value=<?= $aaa; ?>>
<input type='hidden' class='nnn' name='bbb".$ii."' id='bbb".$ii."' value=<?= $bbb; ?>>
<input type='submit' id='sel' name='sel' value='bbb".$ii."'>
</td>
</form>
Если это так, как отображает "value" кнопки - теперь задача в JS отловить этот "id": bbb1, bbb2, bbb3...
Тут опять упёрся пока(

Добавлено через 4 часа 1 минуту
Может на кнопку (строка 5) повесить тоже уникальный "id"+счётчик и свести задачу к получению "id" нажатой кнопки в JS? Хоть в динамических формах у меня "id" уже уникальные (+счётчик), не так всё просто - надо как-то в JS узнать какой именно "id" обрабатывать. Т.е. какая из кнопок нажата... Не подскажете вариант решения?

Добавлено через 13 минут
Вернее "id" нажатой кнопки получить несложно на этой же странице, но надо получить во внешний файл .js

Добавлено через 1 час 0 минут
Вот так... рассуждая вслух решил проблему!!!
1) Id кнопки записал в глобальную переменную JS
2) Во внешнем JS получил эту переменную, она же id нажатой кнопки, она же id нужного input
Спасибо irises, за общее направление вектора куда копать)
Тему можно закрывать
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
02.09.2020, 22:16
Помогаю со студенческими работами здесь

Сохранение формы через ajax с записью файла в базу данных
Здравствуйте! У меня есть форма, расположенная в модальном окне. Форма предназначена для сохранения информации в базу данных. Одной из...

Вставка записей из формы в базу данных через jQuery-AJAX
Добрый день! Я пишу сайт для стоматологического кабинета. Есть форма для записи пациента к врачу, и нужно вставить пациента и дату приёма,...

Запись данных в базу без обновления всей формы (jquery+ajax)
Добрый вечер! Есть форма с большим количеством полей для ввода. Не могу сделать так, чтобы данные из 2-х полей, при нажатии на кнопку...

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

Данные table добавить в базу данных
Всем привет. Помогите решить вопрос. Есть таблица. В которую ввожу данные (Коэффициент весомости, Вj,, Проект Xj,, Аналог Xj)). Вопрос. Как...


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

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Новые блоги и статьи
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Нашел на реддите интересную статью под названием «Кто-нибудь знает, где получить бесплатный компьютер или. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru