Leaderboard
Popular Content
Showing content with the highest reputation on 03/27/2024 in all areas
-
I find data attributes useful for associating inputs for the same record. I get the data-id of the select field then change other fields with the same data-id. Here's an example <php $employees = [ [ 'id'=>21, 'name'=>'Curly', 'status'=>1, 'title'=>'Sales Manager', 'salary'=>65000 ], [ 'id'=>22, 'name'=>'Larry', 'status'=>1, 'title'=>'Sales Assistant', 'salary'=>45000 ], [ 'id'=>33, 'name'=>'Mo', 'status'=>1, 'title'=>'Sales Assistant', 'salary'=>45000 ], [ 'id'=>46, 'name'=>'Tom', 'status'=>1, 'title'=>'Sales Assistant', 'salary'=>45000 ], [ 'id'=>47, 'name'=>'Dick', 'status'=>1, 'title'=>'Trainee', 'salary'=>25000 ], [ 'id'=>51, 'name'=>'Harry', 'status'=>1, 'title'=>'Trainee', 'salary'=>25000 ] ]; $tdata = ''; foreach ($employees as $e) { $tdata .= "<tr> <td>{$e['name']}</td> <td><select name='emp[{$e['id']}][status]' class='status' data-id='{$e['id']}'>" . statusOptions($e['status']) . "</td> <td><input type='text' name='emp[{$e['id']}][title]' class='title' data-id='{$e['id']}' value='{$e['title']}'></td> <td><input type='text' name='emp[{$e['id']}][salary]' class='salary' data-id='{$e['id']}' value='{$e['salary']}'></td> </tr>"; } function statusOptions($current) { $stats = [1 => "Working", 2 => "Not Working"]; $opts = "<option value=''>- select status -</option>"; foreach ($stats as $s => $desc) { $sel = $s == $current ? 'selected' : ''; $opts .= "<option $sel value='$s'>$desc</option>"; } return $opts; } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example</title> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script type='text/javascript'> $(function() { $(".status").change(function() { let id = $(this).data("id") if ( $(this).val() == 2 ) { $(".title[data-id="+id+"]").attr("disabled", true) $(".salary[data-id="+id+"]").attr("disabled", true) } else { $(".title[data-id="+id+"]").attr("disabled", false) $(".salary[data-id="+id+"]").attr("disabled", false) } }) }) </script> <style type='text/css'> table { border-collapse: collapse; width: 80%; margin: 30px auto; } th { text-align: left; padding: 8px; color: white; background-color: black; } td { padding: 4px 8px; } </style> </head> <body> <h1>Example</h1> <form method='POST'> <table border='1'> <tr> <th>Name</th> <th>Status</th> <th>Job Title</th> <th>Salary</th> </tr> <?= $tdata ?> <tr><td colspan='4'><input type='submit'></tr> </table> </form> </body> </html>
1 point
This leaderboard is set to New York/GMT-05:00