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);
     }
?>

Новые блоги и статьи Все статьи Все блоги /
Изучаю 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 считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

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