Не работает AJAX onsubmit(function();

@kvant355 · Регистрация: 21.07.2013

Студворк — интернет-сервис помощи студентам

Никак не могу заставить работать скрипт. Нужно чтобы он срабатывал по клику и передавал id в обработчик, и все возвращалось в HTML форме в <div id="result"></div>

HTML5
1
2
3
4
<form action="add.php" id="form_add">
   <input type="hidden" name="prod_id" id="prod_id" value="<?=$item['prod_id']?>" />
   <input type="submit" name="submit" value="выбрать" />
</form>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function(){
    $("#form_add").onsubmit(function(){
      var prod_id = $("#prod_id").val();
      $.ajax({
       type: "POST",
       url: "add.php",
       data: {"prod_id": prod_id},
       success: function(response){
          $("#result").html(response);
       }
      });
      return false;
    });
    });

обработчик add.php

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$id = $_POST['prod_id'];
$db = mysql_connect("localhost","root","");
mysql_select_db("toocool",$db);
mysql_query("SET NAMES utf8");
            
$query = "SELECT * FROM `products` WHERE `prod_id`= $id";
 
    $res = mysql_query($query) ;
    $arr = array();
    $arr = mysql_fetch_assoc($res);
?>    
    <input type="hidden" name="idprod" value="<?=$id?>" />
    <table id="category"> 
     <tr>         
      <td><img src="<?=$arr['image']?>" width="40px" /></td>
      <td><?=$arr['title']?> </td>
     </tr>
     </table>

@Lazy_Den · 17.01.2015, 02:20

kvant355, onsubmit

JavaScript
1
2
3
4
$("#form_add").submit(function(e){
    e.preventDefault();
    /* ... */
});

@kvant355 · 17.01.2015, 02:34 **[ТС]**

Lazy_Den, не помогло. Дело в том, что у меня даже id из формы в обработчик не попадает и выпадает ошибка о том что массив не создан. Пробовал id писать в запрос руками, ошибка пропала но данные не попадают в <div id="result"></div> что говорит о том что и AJAX тоже не работает.
Вот как сделал с Вашими исправлениями:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function(){
    $("#form_add").submit(function(e){
      e.preventDefault();
      var prod_id = $("#prod_id").val();
      $.ajax({
       type: "POST",
       url: "add.php",
       data: {"prod_id": prod_id},
                                       
       success: function(response){
          $("#result").html(response);
       }
      });
      return false;
    });
    });

@Lazy_Den · 17.01.2015, 10:33

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

у меня даже id из формы в обработчик не попадает

Так начинайте фиксить с самого начала. После того, как вытащили значение из поля, выведите его в консоль. Если значение есть, то идёте дальше - смотрите в той же консоли запрос к серверу: отправился запрос или нет, что приходит в ответе, есть ли в ответе какие-то ошибки. Код ваш абсолютно рабочий, а ошибка или какое-то упущение, может быть где угодно и скорее всего, что на стороне сервера.
P.S. Не забудьте в PHP включить вывод ошибок и предупреждений, если это не было сделано раньше.

@kvant355 · 17.01.2015, 13:56 **[ТС]**

Lazy_Den, ок, понял. Буду попробовать

@kalabuni · 17.01.2015, 14:02

AJAX нужен для того, чтобы передавать данные формы серверу, не делая сабмита формы
совмещать сабмит формы с технологией AJAX - это ПОЛНЫЙ БРЕД сумасшедшего

@kvant355 · 17.01.2015, 14:32 **[ТС]**

kalabuni, тогда как это сделать по-другому?

@Lazy_Den · 17.01.2015, 14:32

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

совмещать сабмит формы с технологией AJAX - это ПОЛНЫЙ БРЕД сумасшедшего

Почему совмещать? Никто ничего не совмещает. Если вы о том, что присутствует кнопка submit, то это некий fallback. Делается на тот случай, если у пользователя будет отключен JS в браузере. Тогда данные формы "уедут" обычным способом.

@kvant355 · 17.01.2015, 14:45 **[ТС]**

А как можно передать одно значение (ID) в AJAX без формы, используя ссылку <a href=""></a>???

@Lazy_Den · 17.01.2015, 14:50

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

А как можно передать одно значение (ID) в AJAX без формы

kvant355, так же, как и любые другие данные. Вопрос только в том, откуда эти данные брать.

@kvant355 · 17.01.2015, 14:54 **[ТС]**

У меня итоговая идея - сделать "живой поиск" по таблице. В вывалившихся значениях рядом с каждым должна быть кнопка "добавить" и при нажатии на нее должен формироваться инпут с ID найденного значения. Этот инпут создается в стационарной форме и в итоге вся куча передается в еще один обработчик, но уже без AJAX

@kalabuni · 17.01.2015, 18:09

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

Делается на тот случай, если у пользователя будет отключен JS в браузере.

вы лично умеете отключать javascript?
если умеете, то на какое время вы его отключали? зачем отключали? и часто ли вновь отключаете?

как полагаете, количество идиотов, шарящихся по сети с отключённым javascript'ом - оно какое? единицы? десятки? сотни? тысячи? или же миллионы?

имхо, тратить время на защиту от двух-трёх дураков - занятие не для совсем умного человека

HTML5
1
2
<div id="to_debils">включи javascript, придурок!</div>
<script>document.getElementById ('to_debils').style.display = 'none';</script>

@kvant355 · 17.01.2015, 18:12 **[ТС]**

kalabuni, хорошо, а чтобы не стратить время как лучше всего реализовать задумку?

@kalabuni · 17.01.2015, 19:34

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

как лучше всего реализовать задумку?

поясните подробнее
итак, на странице имеется таблица или не на странице?
где именно и что именно там "вываливается"? в ячейках? во всех или в некоторых?
вываливается текст или HTML-код?
"кнопка рядом" - это где? в той же ячейке или в той же строке, но в другой ячейке?
где именно должен формироваться инпут?
о каком id в инпуте идёт речь?

@Lazy_Den · 17.01.2015, 22:11

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

тратить время на защиту от двух-трёх дураков

Иногда достаточно одного "дурака". За мои семь лет работы системным администратором, я таких встречал не редко - это директора компаний. Уже давно не работаю на этом поприще и не знаю, как обстоит дело сегодня, но ограничения для сотрудников, и не только на JS в браузерах, по требованию начальства вводились регулярно. Делать учет таких людей при разработке или нет - дело лично каждого, но то, что это "занятие не для совсем умного человека" - не согласен. Хотя, я ваши мерила ума не знаю, да и не особо интересно.

И да, как это не покажется фантастичным, но я умею отключать JS.

@kvant355 · 18.01.2015, 01:57 **[ТС]**

kalabuni, Итак)

На странице имеется 2 формы. Первая с двумя инпутами и вторая "живой поиск".

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<form method="POST" action="add.php" name="add_form">
  <input type="file" name="upload" />
  <input type="text" name="title" />
</form>
 
 
<form method="POST" action="search.php" name="search_form">
  <input type="text" name="search" />
</form>
 
<div id="result_search">
</div>

Поисковая форма выполняет поиск по таблице базы данных и результат помещает в блок <div id="result_search"></div> в виде таблицы, и уже тут должна быть кнопка...

...при нажатии на эту кнопку в форме "add_form" должны появиться еще 2 инпута и кнопка <input type="submit">

И уже когда пользователь активирует форму "add_form" нажатием, данные (в итоге 4 инпута) нужно записать в БД, но это уже можно без AJAX.

Новые блоги и статьи Все статьи Все блоги /
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

@kvant355 43 / 43 / 25 Регистрация: 21.07.2013 Сообщений: 367
	17.01.2015, 13:56 [ТС]
	Lazy_Den, ок, понял. Буду попробовать 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	17.01.2015, 14:02
	AJAX нужен для того, чтобы передавать данные формы серверу, не делая сабмита формы совмещать сабмит формы с технологией AJAX - это ПОЛНЫЙ БРЕД сумасшедшего 0

@kvant355 43 / 43 / 25 Регистрация: 21.07.2013 Сообщений: 367
	17.01.2015, 14:32 [ТС]
	kalabuni, тогда как это сделать по-другому? 0

@kvant355 43 / 43 / 25 Регистрация: 21.07.2013 Сообщений: 367
	17.01.2015, 14:45 [ТС]
	А как можно передать одно значение (ID) в AJAX без формы, используя ссылку <a href=""></a>??? 0

@kvant355 43 / 43 / 25 Регистрация: 21.07.2013 Сообщений: 367
	17.01.2015, 14:54 [ТС]
	У меня итоговая идея - сделать "живой поиск" по таблице. В вывалившихся значениях рядом с каждым должна быть кнопка "добавить" и при нажатии на нее должен формироваться инпут с ID найденного значения. Этот инпут создается в стационарной форме и в итоге вся куча передается в еще один обработчик, но уже без AJAX 0

@kvant355 43 / 43 / 25 Регистрация: 21.07.2013 Сообщений: 367
	17.01.2015, 18:12 [ТС]
	kalabuni, хорошо, а чтобы не стратить время как лучше всего реализовать задумку? 0