输入形式的默认值模态

Question

我刚刚创建了一个数据表，从 wordpress 数据库中收集值。- 这些值必须加载到模态内的联系表单中。我从数据表每一行的最后一列中的按钮调用模态。我必须用每一行对应的信息预先确定表单字段的值。示例：我单击第 3 行中的按钮，它应该打开带有表单的模式，并且字段已经填写了第 3 行中的信息

我遇到的问题是事情并非如此。如果我随机单击按钮，它会按 row1、row2、row3 等顺序加载模态和表单数据。示例：如果我单击第 1 行中的按钮，它会打开带有第 1 行中的表单和数据的模式但是如果我然后点击按钮 5，它会打开第 2 行的信息（它应该加载第 5 行的信息）如果然后我给第 8 行（或任何其他）的按钮，它会加载第 3 行的信息等等

如果有人能告诉我问题出在哪里或者给我另一个解决方案来加载每个表单中每一行的数据

php代码

<table id="enquire" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Id</th>
            <th>part</th>
            <th>code</th>
            <th>manufacturer</th>
            <th>datanumber</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
    <?php global $wpdb;
    $result = $wpdb->get_results ( "SELECT * FROM client" );
    foreach ( $result as $print ) {?>
        <tr>
            <td><?php echo $print->id;?></td>
            <td><?php echo $print->part;?></td>
            <td><?php echo $print->code;?></td>
            <td><?php echo $print->manufacturer;?></td>
            <td><?php echo $print->datanumber;?></td>
            <td><button class="uk-button" type="button" uk-toggle="target: #modal">ENQUIRE NOW</button></td>
        </tr>
        <?php }?>
    </tbody>
    <tfoot>
        <tr>
            <th>Id</th>
            <th>part</th>
            <th>code</th>
            <th>manufacturer</th>
            <th>datanumber</th>
            <th></th>
        </tr>
    </tfoot>
</table>

模态

    <div id="modal" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <button class="uk-modal-close-default" type="button" uk-close></button> 
        <?php include('form.php');?>
</div>
</div>

表格

   <form>
    <fieldset class="uk-fieldset">
        <legend class="uk-legend">Form</legend>
        
        <div class="uk-margin">
            <input class="uk-input" type="text" value="<?php echo $print->id;?>" placeholder="id">
        </div>

        <div class="uk-margin">
            <input class="uk-input" type="text" value="<?php echo $print->part;?>" placeholder="part">
        </div>

        <div class="uk-margin">
            <textarea class="uk-textarea" rows="5" placeholder="Textarea"><?php echo $print->manufacturer;?></textarea>
        </div>

    </fieldset>
</form>

Answer 1

您可以在打开模式时使用 jquery 填充模式表单字段。像这样为您的模态表单元素提供唯一 ID。

        <form>
        <fieldset class="uk-fieldset">
            <legend class="uk-legend">Form</legend>

            <div class="uk-margin">
                <input class="uk-input" type="text" value="" id="partid" placeholder="id">
            </div>

            <div class="uk-margin">
                <input class="uk-input" type="text" value="" id="part" placeholder="part">
            </div>

            <div class="uk-margin">
                <textarea class="uk-textarea" rows="5" id="manufacturer" placeholder="Textarea"></textarea>
            </div>

        </fieldset>
    </form>

然后您可以使用以下 jquery 函数在单击“立即查询”按钮时填充模态表单值。

    <script>
    $(document).ready(function(){

        // code to read selected table row cell data (values).
        $("#enquire").on('click','.uk-button',function(){
             // get the current row
             var currentRow=$(this).closest("tr"); 

             var col1=currentRow.find("td:eq(0)").text(); // get current row 1st TD value
             var col2=currentRow.find("td:eq(1)").text(); // get current row 2nd TD
             var col4=currentRow.find("td:eq(3)").text(); // get current row 4rd TD
             var data=col1+"\n"+col2+"\n"+col4;

             alert(data);

             $("#partid").val(col1);
             $("#part").val(col2);
             $("#manufacturer").val(col4);
        });
    });
    </script>

输入形式的默认值模态

default values in input form Modal

html

php

mysql

forms

datatable