default values in input form Modal

I just created a datatable collecting the values from a wordpress database.- These values must be loaded in a contact form within a modal. I am calling the modal from a button in the last column of each row of the datatable. I must predetermine the values of the form fields with the information corresponding to each row. Example: I click the button in row 3, it should open the modal with the form and the fields already filled in with the information in row 3

The problem I have is that it doesn’t happen that way. If I click the buttons randomly, it loads the modal and the form with the data in the sequence of row1, row2, row3, etc. Example: if I click the button in row 1, it opens the modal with the form and the data in row 1 But if I then click on button 5, it opens the information of row 2 (it should load me the info of row 5) If then I give the button of row 8 (or any other) it loads me the information of row 3 and so on

If someone can tell me where the problem is or give me another solution to load the data of each row within each form

php Code

<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>

Modal

    <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

   <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

You can use jquery to populate modal form fields when you open up modal. Give your modal form elements unique ID like this.

        <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>

Then you can use the following jquery function to populate modal form values when Enquire Now button is clicked.

    <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>

Advertisement

Answer