Отправить imput картинки с модального окна

@sKADETs · Регистрация: 14.07.2024

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

Здравствуйте уважаемые форумчане. Помогите определить путь к картинке в модальном окне и отправить этот путь в обработчик.

Есть модальное окно на сайте с формой заказа:
Вложение 1478917

Вот форма и вызов модального окна:

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
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!-- вызов модального окна -->
<button type="button" class="btn btn-primary" data-nametitle='{title}' data-imgtovara='{image-1}' data-pricetovar='[xfvalue_prices]' data-toggle="modal" data-target="#exampleModal">Заказать</button>
<!-- вызов модального окна -->
 
<!-- Модальное окно полной новости -->
    <div class="modal fade" id="exampleModal" data-backdrop="static" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Оформление заказа</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
                <div class="col-sm-3 tovarimg"></div>
                <div class="col-sm-9 tovarinfo"></div>
            </div>
            <hr>
            <form action='/index.php?do=static&page=donate&pag=give' method='POST'> <!-- обработчик  -->
                <input type='hidden' name="do" value='static'/>
                <input type='hidden' name="page" value='donate'/>
                <input type='hidden' name="pag" value='give'/>
                
                <div class="form-group">
                <label for="exampleFormControlInput1">ФИО:*</label>
                <input type="text" class="form-control" name="fio" id="fio" placeholder="Например: Поплавская Алена Александровна" required>
                </div>
                
                <div class="form-group">
                <label for="exampleFormControlInput1">Кол-во:*</label>
                <input type="number" class="form-control" name="kolvo" id="kolvo" placeholder="Например: 5" required>
                </div>
 
                
                <div class="form-group">
                <label for="exampleFormControlInput2">Ваш телефон:*</label>
                <input type="number" class="form-control" name="telehone" id="telehone" placeholder="Например: 380501234567" required>
                </div>
                
                <div class="form-group">
                <label for="exampleFormControlInput2">Область и Город Новой почты:*</label>
                <input type="text" class="form-control" name="city" id="city" placeholder="Например: Киевская обл. Киев" required>
                </div>
                
                <div class="form-group">
                <label for="exampleFormControlInput2">Адрес Новой почты:*</label>
                <input type="text" class="form-control" name="addres" id="addres" placeholder="Например: улица Малинская, 18" required>
                </div>
                
                <div class="form-group">
                <label for="exampleFormControlInput2">№ Отделения Новой почты:*</label>
                <input type="text" class="form-control" name="otdel" id="otdel" placeholder="Например: Отделение №15" required>
                </div>
                
                <div class="form-group">
                <label for="exampleFormControlTextarea1">Примечание (Необязательно)</label>
                <input type="text" class="form-control" name="comments" id="comments" placeholder="Примечание к заказу">
                </div>
                
                <div class="form-group">
              <input name="tovar" id="tovar" type="hidden" value=""> <!-- Отправляем название товара  на обработчик  -->
                </div>
                
                <div class="form-group">
              <input name="price" id="price" type="hidden" value=""> <!-- Отправляем цену товара на обработчик  -->
                </div>
                
               <!--Что мне нужно сделать тут чтобы отправить imput "путь к картинке" на обработчик -->
 
              <center><input type='submit' value='Заказать'/></center>
 
              </form>
          </div>
        </div>
      </div>
    </div>   
<!-- Модальное окно полной новости -->

Вот 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
document.addEventListener("DOMContentLoaded", function() {
  const btns = document.querySelectorAll(".btn");
 
  btns.forEach(function(btn) {
    btn.addEventListener("click", function() {
      const imgtovara = this.getAttribute('data-imgtovara');
      const nametitle = this.getAttribute('data-nametitle');
      const pricetovar = this.getAttribute('data-pricetovar');
        
 
      // Очищаем существующие данные перед добавлением новых
      document.querySelector(".tovarimg").innerHTML = "";
      document.querySelector(".tovarinfo").innerHTML = "";
 
      // Добавляем новые данные в модальное окно
      const img = document.createElement("img");
      img.className = "img-fluid";
      img.src = imgtovara;
      img.alt = "...";
      document.querySelector(".tovarimg").appendChild(img);
 
      const title = document.createElement("p");
      title.className = "h3";
      title.textContent = nametitle;
      document.querySelector(".tovarinfo").appendChild(title);
 
      const price = document.createElement("p");
      price.innerHTML = `<strong>Цена:</strong> ${pricetovar} грн.`;
      document.querySelector(".tovarinfo").appendChild(price);
 
      document.querySelector("#tovar").value = nametitle;
      document.querySelector("#price").value = pricetovar;
    });
  });
});

В модальном окне отправляю данные на php обработчик:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
     $fio=$_POST['fio'];
     $tovar=$_POST['tovar'];
     $price=(int)$_POST['price'];
     $kolvo=(int)$_POST['kolvo'];
     $telehone=$_POST['telehone'];
     $city=$_POST['city'];
     $addres=$_POST['addres'];
     $otdel=$_POST['otdel'];
     $comments=$_POST['comments'];
     $img=$_POST['img']; // Тут мне нужен путь к картинке с модального окна...
 
// Далее мой код!

@DrType · 14.07.2024, 15:00

sKADETs, в посте вложение не прикрепилось.

@sKADETs · 14.07.2024, 15:05 **[ТС]**

Странно, у меня открывает его

@sKADETs · 14.07.2024, 18:32 **[ТС]**

Уже все сделал. Решение было проще некуда... Тему можно закрывать.

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
document.addEventListener("DOMContentLoaded", function() {
  const btns = document.querySelectorAll(".btn");
 
  btns.forEach(function(btn) {
    btn.addEventListener("click", function() {
      const imgtovara = this.getAttribute('data-imgtovara');
      const nametitle = this.getAttribute('data-nametitle');
      const pricetovar = this.getAttribute('data-pricetovar');
        
 
      // Очищаем существующие данные перед добавлением новых
      document.querySelector(".tovarimg").innerHTML = "";
      document.querySelector(".tovarinfo").innerHTML = "";
 
      // Добавляем новые данные в модальное окно
      const img = document.createElement("img");
      img.className = "img-fluid";
      img.src = imgtovara;
      img.alt = "...";
      document.querySelector(".tovarimg").appendChild(img);
 
      const title = document.createElement("p");
      title.className = "h3";
      title.textContent = nametitle;
      document.querySelector(".tovarinfo").appendChild(title);
 
      const price = document.createElement("p");
      price.innerHTML = `<strong>Цена:</strong> ${pricetovar} грн.`;
      document.querySelector(".tovarinfo").appendChild(price);
 
      document.querySelector("#tovar").value = nametitle;
      document.querySelector("#price").value = pricetovar;
        document.querySelector("#img").value = imgtovara; // Добавлена строчка :)
 
    });
  });
});

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
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!-- Модальное окно полной новости -->
    <div class="modal fade" id="exampleModal" data-backdrop="static" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Оформление заказа</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
                <div class="col-sm-3 tovarimg"></div>
                <div class="col-sm-9 tovarinfo"></div>
            </div>
            <hr>
 
            <form action='/index.php?do=static&page=donate&pag=give' method='POST'>
                <input type='hidden' name="do" value='static'/>
                <input type='hidden' name="page" value='donate'/>
                <input type='hidden' name="pag" value='give'/>
                
                <div class="form-group">
                <label for="exampleFormControlInput1">ФИО:*</label>
                <input type="text" class="form-control" name="fio" id="fio" placeholder="Например: Поплавская Алена Александровна" required>
                </div>
                
                <div class="form-group">
                <label for="exampleFormControlInput1">Кол-во:*</label>
                <input type="number" class="form-control" name="kolvo" id="kolvo" placeholder="Например: 5" required>
                </div>
 
                
                <div class="form-group">
                <label for="exampleFormControlInput2">Ваш телефон:*</label>
                <input type="number" class="form-control" name="telehone" id="telehone" placeholder="Например: 380501234567" required>
                </div>
                
                <div class="form-group">
                <label for="exampleFormControlInput2">Область и Город Новой почты:*</label>
                <input type="text" class="form-control" name="city" id="city" placeholder="Например: Киевская обл. Киев" required>
                </div>
                
                <div class="form-group">
                <label for="exampleFormControlInput2">Адрес Новой почты:*</label>
                <input type="text" class="form-control" name="addres" id="addres" placeholder="Например: улица Малинская, 18" required>
                </div>
                
                <div class="form-group">
                <label for="exampleFormControlInput2">№ Отделения Новой почты:*</label>
                <input type="text" class="form-control" name="otdel" id="otdel" placeholder="Например: Отделение №15" required>
                </div>
                
                <div class="form-group">
                <label for="exampleFormControlTextarea1">Примечание (Необязательно)</label>
                <input type="text" class="form-control" name="comments" id="comments" placeholder="Примечание к заказу">
                </div>
                
                <div class="form-group">
              <input name="tovar" id="tovar" type="hidden" value="">
                </div>
                
                <div class="form-group">
              <input name="price" id="price" type="hidden" value="">
                </div>
                
                <div class="form-group">
              <input name="img" id="img" type="hidden" value=""> <!-- Добавлена строчка :) -->
                </div>
                
               
                 
                
              <center><input type='submit' value='Заказать'/></center>
 
              </form>
          </div>
        </div>
      </div>
    </div>   
<!-- Модальное окно полной новости -->

PHP
1
2
3
4
5
6
7
8
9
10
     $fio=$_POST['fio'];
     $tovar=$_POST['tovar'];
     $price=(int)$_POST['price'];
     $kolvo=(int)$_POST['kolvo'];
     $telehone=$_POST['telehone'];
     $city=$_POST['city'];
     $addres=$_POST['addres'];
     $otdel=$_POST['otdel'];
     $comments=$_POST['comments'];
     $imgtovara=$_POST['img']; // Добавлена строчка :)

Новые блоги и статьи Все статьи Все блоги /
Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю 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 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	14.07.2024, 15:00
	sKADETs, в посте вложение не прикрепилось. 0

@sKADETs 0 / 0 / 1 Регистрация: 14.07.2024 Сообщений: 3
	14.07.2024, 15:05 [ТС]
	Странно, у меня открывает его Миниатюры 0