как выбрать форму внутри таблицы данных без идентификатора - PullRequest
Новая
       35

как выбрать форму внутри таблицы данных без идентификатора

0 голосов
/ 05 апреля 2020

Я пишу эту форму внутри таблицы с html laravel коллективом: 

 @foreach($patients as $patient)
            <tr>
                {{Form::open(['route' => 'patientDetails'])}}
                {{Form::hidden('patient',json_encode($patient))}}
                {{Form::close()}}
                <td>{{$patient['display']}}</td>
                .......
                </td>
                </a>
            </tr>           
        @endforeach

        </tbody>
        <tfoot>

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

$(document).ready(function(e) {
    $('#patients').DataTable({
        responsive: true,
        fixedColumns:   true,
        columnDefs: [
            {
                targets: "_all",
                className: 'dt-body-center'
            }
        ]
    });
    var table = $('#patients').DataTable();
    $('#patients tbody').on('click', 'tr', function () {
        var data = table.row( this ).data();
        if (window.confirm( 'Stai per accedere ai dettagli di: '+data[0]+'' )) {
         //here I need a way to select the form inside the row just cliked
            console.log(data); //this do not contains the hidden form
        };});});

возможно, я смешал слишком много концепций, и есть простой способ достичь той же цели (щелкните строку этой таблицы и нажмите go, чтобы следующая страница с некоторыми дополнительными данными через метод post), но на самом деле я хотел бы найти способ выбрать форму внутри строки с помощью jquery и затем выполнить отправку.

Ответы [ 2 ]

1 голос
/ 05 апреля 2020

Используйте классы, чтобы вам было легче с jquery селекторами 

<tbody>
    @foreach ($patients as $patient)
    <tr>
        <td>{{ $patient['display'] }}</td>
        <td>
            <form class="table-form" action="..." method="...">
                <input class="table-hidden" type="hidden" value='@json($patient)' name="patient">
                <button type="submit">View</button>
            </form>
        </td>
    </tr>
    @endforeach
</tbody>

$(() => {
    let table = $('#patients').DataTable({
        responsive: true,
        fixedColumns: true,
        columnDefs: [
            {
                targets: "_all",
                className: 'dt-body-center'
            }
        ]
    });

    $('.table-form').on('submit', e => {
        let patient = JSON.parse($(this).find('.table-hidden').val());

        if(window.confirm(`Stai per accedere ai dettagli di: ${patient[0]}`) {
            // console.log(patient);
        } else {
            e.preventDefault();
        }
    });
});
0 голосов
/ 06 апреля 2020

Итак, в этом примере есть две строки, каждая с формой в первом TD. Все, что вам нужно сделать, это прикрепить обработчик к каждому TR и использовать селекторы jQuery, чтобы найти форму внутри этого TR. Наконец, вы просто вызываете отправить .

Надеюсь, идея вам поможет. 

$(document).ready(function(e) {
    const table = $('#patients').DataTable({
        responsive: true,
        fixedColumns:   true,
        columnDefs: [
            {
                targets: "_all",
                className: 'dt-body-center'
            }
        ]
    });
    
    table.on('click', 'tr', function () {
        const form = $(this).find('form').first();
        if (window.confirm( 'Stai per accedere ai dettagli di: '+form.attr('action')+'' )){
         //here I need a way to select the form inside the row just cliked
          //  console.log(data); //this do not contains the hidden form
        
          form.submit()
        };
    });
        
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="patients" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Form</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
        <tr>
                <td>
                <form method='get' action='https://google.com'>
                  
                  <input type='submit' value='GOOGLE'/>
                </form>
                </td>

                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
            <td>
                <form method='get' action='https://wikipedia.com'>
                  <input type='submit' value='WIKIPEDIA'/>
                </form>
                </td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
          </tbody>
           </table>
...