AJAX несколько одинаковых форм

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

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

HTML5
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
<div id="number_index">
                                        
    <form method="POST" id="form_index">
       <input type="text" name="index" size="1" value="222" />
       <input type="hidden" name="id_event" value="55" />
       <input type="hidden" name="id_user" value="256" />
       <input type="submit" name="sub_index" value="ok" />
    </form> 
    
</div>
 
<div id="number_index">
                                        
    <form method="POST" id="form_index">
       <input type="text" name="index" size="1" value="333" />
       <input type="hidden" name="id_event" value="55" />
       <input type="hidden" name="id_user" value="354" />
       <input type="submit" name="sub_index" value="ok" />
    </form> 
    
</div>
 
<div id="number_index">
                                        
    <form method="POST" id="form_index">
       <input type="text" name="index" size="1" value="444" />
       <input type="hidden" name="id_event" value="55" />
       <input type="hidden" name="id_user" value="879" />
       <input type="submit" name="sub_index" value="ok" />
    </form> 
    
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(function(){
  $('#number_index').on('submit', '#form_index', function(e) {     
      e.preventDefault();
      var index = $("input[name='index']").val();
      var id_user = $("input[name='id_user']").val();
      var id_event = $("input[name='id_event']").val();
    $.ajax({
      url: 'process.php', 
      type: 'POST', 
      data: {index : index, id_user : id_user, id_event : id_event},
      success: function(data){
        $("#number_index").fadeOut( 500 , function() {
          $('#number_index').html(data);
        }).fadeIn( 500 );   
      }
    });
  });
});

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

Qwerty_Wasd · 24.11.2018, 18:01

kvant355, id должен быть уникальным у каждого элемента на странице. Попробуйте

HTML5
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
<div class="number_index">
                                        
    <form method="POST" class="form_index">
       <input type="text" name="index" size="1" value="222" />
       <input type="hidden" name="id_event" value="55" />
       <input type="hidden" name="id_user" value="256" />
       <input type="submit" name="sub_index" value="ok" />
    </form> 
    
</div>
 
<div class="number_index">
                                        
    <form method="POST" class="form_index">
       <input type="text" name="index" size="1" value="333" />
       <input type="hidden" name="id_event" value="55" />
       <input type="hidden" name="id_user" value="354" />
       <input type="submit" name="sub_index" value="ok" />
    </form> 
    
</div>
 
<div class="number_index">
                                        
    <form method="POST" class="form_index">
       <input type="text" name="index" size="1" value="444" />
       <input type="hidden" name="id_event" value="55" />
       <input type="hidden" name="id_user" value="879" />
       <input type="submit" name="sub_index" value="ok" />
    </form> 
    
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(function(){
  $( '.form_index').submit(function(e) {     
      e.preventDefault();
      var index = $(this).find("input[name='index']").val();
      var id_user = $(this).find("input[name='id_user']").val();
      var id_event = $(this).find("input[name='id_event']").val();
    $.ajax({
      url: 'process.php', 
      type: 'POST', 
      data: {index : index, id_user : id_user, id_event : id_event},
      success: function(data){
        $(this).closest('.number_index').fadeOut( 500 , function() {
          $(this).closest('.number_index').html(data);
        }).fadeIn( 500 );   
      }
    });
  });
});

@kvant355 · 24.11.2018, 18:10 **[ТС]**

Qwerty_Wasd, Спасибо, все заработало кроме этого

JavaScript
1
2
3
4
5
success: function(data){
        $(this).closest('.number_index').fadeOut( 500 , function() {
          $(this).closest('.number_index').html(data);
        }).fadeIn( 500 );   
      }

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

Qwerty_Wasd · 24.11.2018, 18:15

kvant355, тогда так -

JavaScript
1
2
3
$(this).parent().fadeOut( 500 , function() {
          $(this).parent().html(data);
        }).fadeIn( 500 );

@kvant355 · 24.11.2018, 18:22 **[ТС]**

Qwerty_Wasd, все равно не работает((

Добавлено через 2 минуты
Qwerty_Wasd, у меня в конце файла php возвращается форма в таком же виде только с обновлённым значением
может в этом дело?

HTML5
1
2
3
4
5
6
<form method="POST" class="form_index">
       <input type="text" name="index" size="1" value="444" />
       <input type="hidden" name="id_event" value="55" />
       <input type="hidden" name="id_user" value="879" />
       <input type="submit" name="sub_index" value="ok" />
    </form>

Qwerty_Wasd · 24.11.2018, 18:23

подождите тогда чуток, щас освобожусь...

Добавлено через 54 секунды

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

Qwerty_Wasd, у меня в конце файла php возвращается форма в таком же виде только с обновлённым значением

код обработчика process.php

@kvant355 · 24.11.2018, 18:25 **[ТС]**

Qwerty_Wasd,

в конце из базы достается значение и вставляется в value

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 <?
$id_event = $_POST['id_event'];
      $id_user = $_POST['id_user']; 
        $index = $_POST['index'];      
      
      
          $query = " UPDATE `regusers_auto_variant` SET 
                                `index_auto` = '$index'
                            WHERE `id_event` = '$id_event' AND `id_user` = '$id_user' ";
            $res = mysql_query($query)or die(mysql_error());
            
            
            
?>
     <form method="POST" class="form_index">
       <input type="text" name="index" size="1" value="444" />
       <input type="hidden" name="id_event" value="55" />
       <input type="hidden" name="id_user" value="879" />
       <input type="submit" name="sub_index" value="ok" />
    </form>

Qwerty_Wasd · 24.11.2018, 18:31

kvant355, если не использовать ajax, то все гуд - https://jsfiddle.net/Qwerty_Wasd/gt39mfr6/

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(function(){
    $( '.form_index').submit(function(e) {     
        e.preventDefault();
        var index = $(this).find("input[name='index']").val();
        var id_user = $(this).find("input[name='id_user']").val();
        var id_event = $(this).find("input[name='id_event']").val();
        $(this).parent().fadeOut( 500 , function() {
            $(this).parent().html(data);
        }).fadeIn( 500 ); 
    });
});

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

Это что?

Добавлено через 15 секунд
Самое главное зачем?

@kvant355 · 24.11.2018, 18:40 **[ТС]**

Qwerty_Wasd, мне надо чтобы после отправки формы возвращалось изменённое значение помещённое в value и эта же форма опять должна стать работающей без перезагрузки страницы.
Выше код который вы дали прекрасно с этим справляется, кроме видимости клика.
Может просто сообщение выводить?....

Добавлено через 4 минуты
Qwerty_Wasd, Вот это работает, но не правильно, во всех формах меняется значение на одинаковое

JavaScript
1
2
3
$(".number_index").fadeOut( 500 , function() {
    $('.number_index').html(data);
}).fadeIn( 500 );

Qwerty_Wasd · 24.11.2018, 18:43

kvant355, в обработчике, код которого Вы дали, значения заносятся в БД и всё.
Дальше идет неверная запись.
После закрытого тега php, должно идти обычное построение страницы. Ну там

HTML5
1
2
3
4
5
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
..........

А не как у Вас. И то нет смысла это делать. Вам ведь нужно вернуть обработанные данные?
Что конкретно должно происходить со значениями в обработчике, помимо записи в БД?

@kvant355 · 24.11.2018, 18:46 **[ТС]**

Qwerty_Wasd, Запрос, создание массива и выдергивание этого значения из массива. Потом идёт форма с изменённым значением

Qwerty_Wasd · 24.11.2018, 18:56

kvant355,

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

Запрос, создание массива и выдергивание этого значения из массива. Потом идёт форма с изменённым значением

Короче, еще раз. Отвлекитесь от того кода, что у Вас сейчас есть. Вот на странице Вы создали три формы, подключили jquery, и оправляете не массив, а объект данных - обработчику. Что должно произойти с данными там? Их сложить, вычесть, стереть, похерить, что?

@kvant355 · 24.11.2018, 19:02 **[ТС]**

1) Получаем данные
2) Записываем данные в базу данных
3) Запрашиваем данные из базы данных
4) Создаем массив
5) Выковыриваем необходимое значение из массива
6) Вставляем выковырянное значение в форму

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
<?php
// ...
 
$db = mysql_connect ('','','');
mysql_select_db('');
mysql_query("SET NAMES 'UTF8'") or die('Cant set charset');
 
    
    function get_arr_one($table, $id_name_table, $id){
        $query = "SELECT * FROM $table WHERE $id_name_table = $id";
        $res = mysql_query($query) ;
        $arr_one = array();
        $arr_one = mysql_fetch_assoc($res);
        return $arr_one;
    }
  
    
      $id_event = $_POST['id_event'];
      $id_user = $_POST['id_user']; 
      $index = $_POST['index'];      
      
      
          $query = " UPDATE `regusers_auto_variant` SET 
                                `index_auto` = '$index'
                            WHERE `id_event` = '$id_event' AND `id_user` = '$id_user' ";
            $res = mysql_query($query)or die(mysql_error());
            
            $arr_variant_auto = get_arr_one('regusers_auto_variant','id_user',$id_user.' AND `id_event` = "'.$id_event.'"');
            
?>
      <form method="POST" id="form_index">
               <input type="text" name="index" size="1" value="<?=$arr_variant_auto['index_auto']?>" />
               <input type="hidden" name="id_event" value="<?=$id_event?>" />
               <input type="hidden" name="id_user" value="<?=$id_user?>" />
               <input type="submit" name="sub_index" class="button_not_hover small_font" value="ok" />
            </form>

Qwerty_Wasd · 24.11.2018, 19:13

Вопросы у меня потому, что предоставили видимо не весь код обработчика. Ибо логика того что Вы показали - отсутствует.
Без ajax скрипт скрывает на ура. Можете проверить - https://jsfiddle.net/Qwerty_Wasd/gt39mfr6/
Значит проблема в php.

Добавлено через 10 минут
Ну вот, разобрались. Вот нормальный вид.

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
<?
$db = mysql_connect ('','','');
mysql_select_db('');
mysql_query("SET NAMES 'UTF8'") or die('Cant set charset');
 
 
    function get_arr_one($table, $id_name_table, $id){
        $query = "SELECT * FROM $table WHERE $id_name_table = $id";
        $res = mysql_query($query) ;
        $arr_one = array();
        $arr_one = mysql_fetch_assoc($res);
        return $arr_one;
    }
 
 
      $id_event = $_POST['id_event'];
      $id_user = $_POST['id_user'];
      $index = $_POST['index'];
 
 
          $query = " UPDATE `regusers_auto_variant` SET
                                `index_auto` = '$index'
                            WHERE `id_event` = '$id_event' AND `id_user` = '$id_user' ";
            $res = mysql_query($query)or die(mysql_error());
 
            $arr_variant_auto = get_arr_one('regusers_auto_variant','id_user',$id_user.' AND `id_event` = "'.$id_event.'"');
 
?>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<style>
</style>
</head>
<body>
      <form method="POST" id="form_index">
               <input type="text" name="index" size="1" value="<?=$arr_variant_auto['index_auto']?>" />
               <input type="hidden" name="id_event" value="<?=$id_event?>" />
               <input type="hidden" name="id_user" value="<?=$id_user?>" />
               <input type="submit" name="sub_index" class="button_not_hover small_font" value="ok" />
            </form>
</body>
</html>

Но вот этот участок

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<style>
</style>
</head>
<body>
      <form method="POST" id="form_index">
               <input type="text" name="index" size="1" value="<?=$arr_variant_auto['index_auto']?>" />
               <input type="hidden" name="id_event" value="<?=$id_event?>" />
               <input type="hidden" name="id_user" value="<?=$id_user?>" />
               <input type="submit" name="sub_index" class="button_not_hover small_font" value="ok" />
            </form>
</body>
</html>

Вам ни к чему.
Если Вам нужен ответ от сервера - сформируйте данные и шлите по echo\print.
А далее нужно принять и обработать

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(function(){
  $( '.form_index').submit(function(e) {
      e.preventDefault();
      var index = $(this).find("input[name='index']").val();
      var id_user = $(this).find("input[name='id_user']").val();
      var id_event = $(this).find("input[name='id_event']").val();
    $.ajax({
      url: 'process.php',
      type: 'POST',
      data: {index : index, id_user : id_user, id_event : id_event},
      success: function(data){
          /* здесь обрабатываются полученные данные, они будут в data*/
          console.log(data);
      }
    });
    $(this).parent().fadeOut( 500 , function() {
          $(this).parent().html(data);
        }).fadeIn( 500 );
  });
});

@kvant355 · 24.11.2018, 19:21 **[ТС]**

Qwerty_Wasd, Все работает, большое спасибо за терпение

Qwerty_Wasd · 24.11.2018, 19:22

kvant355, не за что, удачи

@Distortion · 16.10.2023, 11:31

Добрый день.
у меня такая же проблема.
Сделал всё как у вас тут написано и через FormData() делал и всёравно ни чего не срабатывает.
Только у меня форма находится не в файле index.php , а вообще в другом
И обработчик ajax включается по событию onsubmit="updateItems2()
Я всю голову сломал но ни чего не получается.
У меня форма в цикле создаётся всё тянется из базы и форм может быть разное количество.
Как в ajax сделать чтобы он понимал на какую форму я нажимаю.

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
  <?php $sql="SELECT * from image_route WHERE code_prod='$ID'";
          $result = $conn-> query($sql);
          if ($result-> num_rows > 0){
            while($row = $result-> fetch_assoc()){?>
 
 
          
          <form method="POST" class="form_index" onsubmit="updateItems2()">
          <div class="form-group">
              <img width='200px' height='150px' src='<?=$row["route_img"]?>'>
              <div>
                  <label for="file">Фото нарезка:</label>
                  <input type="text" id="MiniExImg" name="MiniExImg" class="form-control" value="<?=$row['route_img']?>" hidden>
                  <input type="file" id="miniImage" name="miniImage" value="">
                 <input type="text" id="id_k" name="id_k" value="<?=$row['id_kolvo']?>" hidden>
                 <input type="text" id="product_id" name="product_id" value="<?=$ID?>" hidden>
                 <input type="submit" name="sub_index" value="ok" />
    
              </div>
          </div>
 
      </form>
 
 
    <?php
            }
          }
        ?>

Ниже код 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
 function updateItems2(){
 
$( '.form_index').submit(function(e) {     
   e.preventDefault();
   
    var miniImage = $(this).find("'#miniImage']")[0].files[0];
    var MiniExImg = $(this).find("'#MiniExImg']").val();
    var id_k = $(this).find("'#id_k']").val();
 
 
$.ajax({
  url:'./controller/updateMiniController.php',
  method:'post',
  data:{miniImage:miniImage, MiniExImg:MiniExImg, id_k:id_k},
  processData: false,
  contentType: false,
  success: function(data){
    alert('Data Update Success.');
    $('form').trigger('reset');
    showProductItems();
  }
});
});
 
}

Это код вставки картинки:

PHP
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
<?php
     include_once ('./../config/dbconnect.php');
 
    $product_id=$_POST['product_id'];
    $id_k=$_POST['id_k'];
    
 
    if( isset($_FILES['miniImage']) ){
        
        $location_m="/admin_panel/uploads/";
        $img_m = $_FILES['miniImage']['name'];
        $tmp_m = $_FILES['miniImage']['tmp_name'];
        $dir_m = './../../admin_panel/uploads/';
        $ext_m = strtolower(pathinfo($img_m, PATHINFO_EXTENSION));
        $valid_ext_m = array('jpeg', 'jpg', 'png', 'gif','webp');
        $image_m =rand(1000,1000000).".".$ext_m;
        $final_m=$location_m. $image_m;
        if (in_array($ext_m, $valid_ext_m)) {
            $path_m = $location_m . $image_m;
            move_uploaded_file($tmp_m, $dir_m.$image_m);
 
            
        }
    }else{
        $final_m=$_POST['MiniExImg'];
        
    }
 
 
    $updateItem = mysqli_query($conn,"UPDATE image_route SET route_img='$final_m' WHERE (code_prod=$product_id AND id_kolvo=$id_k)"); 
 
 
    if($updateItem)
    {
        
        echo "true";
    }
     else
     {
         echo mysqli_error($conn);
     }
?>

Новые блоги и статьи Все статьи Все блоги /
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .

AJAX несколько одинаковых форм

Решение

Решение

@kvant355 43 / 43 / 25 Регистрация: 21.07.2013 Сообщений: 367
	24.11.2018, 18:46 [ТС]
	Qwerty_Wasd, Запрос, создание массива и выдергивание этого значения из массива. Потом идёт форма с изменённым значением 0

@kvant355 43 / 43 / 25 Регистрация: 21.07.2013 Сообщений: 367
	24.11.2018, 19:21 [ТС]
	Qwerty_Wasd, Все работает, большое спасибо за терпение 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	24.11.2018, 19:22
	kvant355, не за что, удачи 0