JS/PHP - получить значение у текущего id

311
28 марта 2017, 13:17

Добрый день. Есть код:

      <?php foreach ($allUsers as $user): ?>
                    <tr>
                        <td><?= $user->login; ?></td>
                        <td><?= $user->email; ?></td>
                        <td><?= $user->sponsor; ?></td>
                        <td>
                            <form action="/admin/delUser" method="post">
                                <input type="hidden" name="deleteUser" value="<?= $user->id?>">
                                <button type="submit" class="btn btn-danger"><i class="fa fa-trash" aria-hidden="true"></i></button>
                            </form>
                        </td>
                        <td>
                            <button type="button" data-toggle="modal" data-target="#sendEmail" class="btn btn-primary"><i class="fa fa-envelope" aria-hidden="true"></i></button>
                        </td>
                        <td>
                            <button type="button" data-toggle="modal" data-target="#editUser" class="btn btn-success"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button>
                        </td>
                    </tr>
       <?php endforeach; ?>

Суть кода здесь идет вывод данных у пользователя в таблице. Проблема заключается в том, что при клике по кнопке открывается модальное окно и нужно чтобы при клике на нее бралось значение допустим из элемента

      <input type="hidden" value="<?= $user->email ?>"

И это значение мне нужно получить потом при отправке формы в модальном окне т.е в модальном окне будет форма со скрытым полем и в нее я подставлю уже e-mail пользователя. Вот и возникает вопрос как получить данные при клике на кнопку с поля input , но у текущей строки таблицы! Если сделать получать данные по конкретному id функцией getElementById , то получение данных будет происходить со всех полей у которых есть такой же id. Вот и проблема как получить текущее значение.. увы в js не силен.

Answer 1

Вариантов достаточно много: продублировать дата атрибуты в кнопки и вытягивать из них информацию, задать уникальный id ячейке <tr id="userId"> при клике на кнопу обращаться к ней и искать скрытый инпут, задать hidden инпуту уникальный id, а в кнопках (в дата атрибуте) указывать id скрытого инпута (реализация ниже)...

$('.delete-btn').click(function () { 
  var $email = $('#' + $(this).data('hidden-input')); 
  $('.modal-body').text($email.val()) 
  $('#myModal').modal('show')      
})
 <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> 
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"> 
<link href="http://getbootstrap.com/assets/css/docs.min.css" rel="stylesheet"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> 
 
<input type="hidden" classs="email-hidden-inp" id="email1" value="test1@te.te"/> 
 <button type="button" data-toggle="modal" data-target="#sendEmail" data-hidden-input="email1" class="btn btn-primary delete-btn"><i class="fa fa-envelope" aria-hidden="true">delete1</i></button> 
  
  
<input type="hidden"  id="email2" value="test2@te.te"/> 
 <button type="button" data-toggle="modal" data-target="#sendEmail" data-hidden-input="email2" class="btn btn-primary delete-btn"><i class="fa fa-envelope" aria-hidden="true">delete2</i></button> 
  
  
  
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
  <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
      <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
      </div> 
      <div class="modal-body"> 
        ... 
      </div> 
      <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
    </div> 
  </div> 
</div>

READ ALSO
Обработать ответ сервера

Обработать ответ сервера

Как после отправки формы на сервер, сделать редирект на URL? И отменить переход на URL сервера, где отображается код ошибки и наоборот успешной...

244
Подключение JS скрипта для расширения Chrome

Подключение JS скрипта для расширения Chrome

Что нужно написать в manifestjson для подключения js скрипта? выбивает вот такой exception Refused to execute inline script because it violates the following Content Security Policy directive:...

318