Как передать значения input'ов из всплывающего окна?

Question

[Антон Вебсайтовский]

добавил всплывающее окно, и теперь не передает данные из input полей.
Вообщем, есть пользователи, не входя в пользователя есть поле цена, так вот можно менять, работает.

Что я сделал, добавил вместо этого поля кнопку, открыть цены, всплывает окно и там input поле с ценой. Ввожу цену и нажимаю «Сохранить» и он мне в запросе показывает что не может id найти и поле с ценой. Почему так выходит?

Вот так работает, тут без всплывающего окна

<tr id="user<?php echo $user->id; ?>" data-id="<?php echo $user->id; ?>" data-name="<?= htmlspecialchars($user->fio) ?>">

<input type="textx" name="catAprice" autocomplete="off" />
<button type="button" class="catAprice">Сохранить</button>

</tr>

Вот вариант со всплывающим окном, так не может найти id и name="catAprice"

<tr id="user<?php echo $user->id; ?>" data-id="<?php echo $user->id; ?>" data-name="<?= htmlspecialchars($user->fio) ?>">

<b>//кнопка открыть цены, всплывает окно при клике</b>
<a href="#userprice<?php echo $user->id; ?>" title="Открыть цены" class="btn btn-primary">
Открыть цены
</a>

<b>//всплывающее окно</b>
 <a href="#x" class="poverlay" id="userprice<?php echo $user->id; ?>"></a>
  <div class="popup wig">
   <h3>Цены на категории тс</h3>
 <input type="textx" name="catAprice" autocomplete="off" />
 <button type="button" class="catAprice">Сохранить</button>

<a class="closess" title="Закрыть окно" href="#closess"></a>
</div>
</tr>

Скрипт

<script>
  Users = {
    actions: {
      saveCena: function(id, val) {
        $('.form-result').html('');
        let formLoad = new FormData();
        formLoad.append('id', id);
        formLoad.append('catAprice', val);
        App.sendAx('/admin/user/savecenadk', formLoad, options = {
          silence: true,
          messageBlock: '.form-result',
          successFunction: function(d) {
            Users.actions.rehash();
            alert(d.message);
          },
          errorFunction: function(d) {
            alert(d.message);
          },
        });
      },
    },
  };

  $(document).on('click', '.catAprice', function(e) {
    e.preventDefault();
    let id = $(this).closest('tr').data('id');
    let val = $('#user' + id).find('input[name=catAprice]').val();
    Users.actions.saveCena(id, val);
  });
</script>

Ошибка:

Comments

[Антон Литвиненко]

что за новый тайп такой type="textx"?

[Антон Вебсайтовский]

Антон Литвиненко, да не это не новый ) обычность же.

[ThunderCat]

Антон Вебсайтовский, Ваша непонятный язык писать понимать трудом с можно, как получить вопрос для понятный стиль изложения?

[ThunderCat]

Антон Вебсайтовский, "обычность же" - это явно новый тип. И это наверняка как то связано с "жэ", возможно с точкой крепления рук...

[Антон Вебсайтовский]

Таким способом можно прикручивать стили и задавать параметры.
Но суть вопроса темы, не в этом.

.finp input[type=textx] {
  height: 28px;
  vertical-align: middle;
  width: 50px;
  padding: 0px 8px 0px 8px;
  border-radius: 3px;
  border: 1px solid #CCCCCC;
  margin-top: 2px;
  margin-bottom: 2px;
  -webkit-box-shadow: inset 0px 3px 6px 0px rgba(50, 50, 50, 0.07);
  box-shadow: inset 0px 3px 6px 0px rgba(50, 50, 50, 0.07);
}

[Антон Вебсайтовский]

TheAndrey7, приведите пример, чтобы я понимал.

Answer 1

[Антон Вебсайтовский]

Вообщем переделал

$(document).on('click', '.catAprice', function(e) {
    e.preventDefault();
    var $this = this;
    id = $($this).parents('.wig').find('.idsk').val(); //передаем id
    val = $($this).parents('.wig').find('#catAprice').val(); //передаем цену
    Users.actions.saveCena(id, val);
  });

Ну и добавил

Answer 2

[odilovoybek]

Мне кажется, что id пользователя не передается, поэтому $('#user' + id).find('input[name=catAprice]') является undefined, то есть селектор не может найти нужный элемент (#userundefined input[name=catAprice]).
Или же вам надо добавить event listener ($(document).on('click', '.catAprice', ()=>{})) после создания элемента formLoad.append('catAprice', val) если это не так.

Comments

[Антон Вебсайтовский]

То есть сделать как-то так

$(document).on('click', '.catAprice', function(e) {
    $('.form-result').html('');
    let formLoad = new FormData();
    let id = $(this).closest('tr').data('id');
    let val = $('#user' + id).find('input[name=catAprice]').val();

    formLoad.append('id', id);
    formLoad.append('catAprice', val);
    App.sendAx('/admin/user/savecenadk', formLoad, options = {
      silence: true,
      messageBlock: '.form-result',
      successFunction: function(d) {
        Users.actions.rehash();
        alert(d.message);
      },
      errorFunction: function(d) {
        alert(d.message);
      },
    });
  });