samedi 9 octobre 2021

inserting multiple dynamic checkboxes into mySQL

My people table has rows which need a value of 1 if checked and 0 if not. I used checkboxes to collect that in my form. I also wanted to allow the user to add more fields so if they can multiple entries can be made at a time.

I scraped out how to collect the unchecked boxes by creating a hidden input for each checkbox by creating a input type=hidden before the checkboxes, so I just copied the whole table row for the jQuery to append.

Unfortunately, the checkbox values mess up on every other row: (the lName column specifies the input on the following boolean columns: Y should be a check and N is blank) checkbox messup

The first row is correct, but I don't know why the appended rows are being screwed.

<?php
    include_once("connections/db.inc.php");

    if(isset($_POST['submit'])){

        //addresses
        $roomNumber=$_POST['roomNumber'];               
        $houseNumber=$_POST['houseNumber'];
        $block=$_POST['block'];
        $lot=$_POST['lot']; 
        $street=$_POST['street'];
        $subdivision=$_POST['subdivision'];
        $barangay=$_POST['barangay'];
        $city=$_POST['city'];
        $province=$_POST['province'];

        //insert address first
        $sql = "INSERT INTO `addresses` (`roomNumber`, `houseNumber`, `block`, `lot`, `street`, `subdivision`, `barangay`, `city`, `province`)
            VALUES (:a1, :b1, :c1, :d1, :e1, :f1, :g1, :h1, :i1)";
        $sql2 = "SELECT LAST_INSERT_ID() AS 'lastId'";
        $stmt = $db->prepare($sql);
        $stmt2 = $db->prepare($sql2);
        $stmt->bindParam(":a1",$roomNumber);
        $stmt->bindParam(":b1",$houseNumber);
        $stmt->bindParam(":c1",$block);
        $stmt->bindParam(":d1",$lot);
        $stmt->bindParam(":e1",$street);
        $stmt->bindParam(":f1",$subdivision);
        $stmt->bindParam(":g1",$barangay);
        $stmt->bindParam(":h1",$city);
        $stmt->bindParam(":i1",$province);
        $stmt->execute(); 
        $stmt2->execute();
        $row = $stmt2->fetch();
        $lastId = $row[0];
        

        //insert people
        $lName=$_POST['lName'];
        $fName= $_POST['fName'];
        $mName= $_POST['mName'];
        $suffixName= $_POST['suffixName'];
        $gender= $_POST['gender'];
        $birthday= $_POST['birthday'];
        $phoneNumber= $_POST['phoneNumber'];
        $civilStatus= $_POST['civilStatus'];
    
        $isHeadofFamily=$_POST['isHeadOfFamily'];
        $isEmployed=$_POST['isEmployed'];
        $isSelfEmployedInBusiness=$_POST['isSelfEmployedInBusiness'];
        $isSelfEmployedInInformalSector=$_POST['isSelfEmployedInInformalSector'];   
        $isSoloParent=$_POST['isSoloParent'];
        $isSeniorCitizen=$_POST['isSeniorCitizen'];
        $isPWD = $_POST['isPWD'];

        $relationToHeadOfFamily= $_POST['relationToHeadOfFamily'];

            foreach ($lName as $key => $value) {    
                $sql = "INSERT INTO `people` (`addressId`, `lName`, `fName`, `mName`, `suffixName`, `gender`, `birthday`, `phoneNumber`, `civilStatus`, `isHeadOfFamily`, `isEmployed`, `isSelfEmployedInBusiness`, `isSelfEmployedInInformalSector`, `isSoloParent`, `isSeniorCitizen`, `isPWD`, `relationToHeadOfFamily`)
                VALUES  (:lastId,:a2,:b2,:c2,:d2,:e2,:f2,:g2,:h2,:i2,:j2,:k2,:l2,:m2,:n2,:o2,:p2)"; 
                $stmt = $db->prepare($sql);
                $stmt->bindParam(":lastId",$lastId);
                $stmt->bindParam(":a2",$lName[$key]);
                $stmt->bindParam(":b2",$fName[$key]);
                $stmt->bindParam(":c2",$mName[$key]);
                $stmt->bindParam(":d2",$suffixName[$key]);
                $stmt->bindParam(":e2",$gender[$key]);
                $stmt->bindParam(":f2",$birthday[$key]);
                $stmt->bindParam(":g2",$phoneNumber[$key]);
                $stmt->bindParam(":h2",$civilStatus[$key]);
                $stmt->bindParam(":i2",$isHeadofFamily[$key]);
                $stmt->bindParam(":j2",$isEmployed[$key]);
                $stmt->bindParam(":k2",$isSelfEmployedInBusiness[$key]);
                $stmt->bindParam(":l2",$isSelfEmployedInInformalSector[$key]);
                $stmt->bindParam(":m2",$isSoloParent[$key]);
                $stmt->bindParam(":n2",$isSeniorCitizen[$key]);
                $stmt->bindParam(":o2",$isPWD[$key]);
                $stmt->bindParam(":p2",$relationToHeadOfFamily[$key]);
                $stmt->execute(); 
            }  
                
    }
?> 
    
<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>BRGY</title>
        <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
        <script src="https://kit.fontawesome.com/a13d5dfb35.js" crossorigin="anonymous"></script>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="css/style.css">
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>


        <script>
            $(function() { 
                var html = '<tr> <td><input type="text" name="lName[]" id="lName" ></td> <td><input type="text" name="fName[]" id="fName" ></td> <td><input type="text" name="mName[]" id="mName"></td> <td><input type="text" name="suffixName[]" id="suffixName" ></td> <td> <select name="gender[]" id="gender"> <option value="Male">Male</option> <option value="Female">Female</option> </select> </td> <td><input type="date" name="birthday[]" id="birthday" ></td> <td><input type="text" name="phoneNumber[]" id="phoneNumber" ></td> <td> <select name="civilStatus[]" id="civilStatus"> <option value="Single">Single</option> <option value="Married">Married</option> <option value="Widowed">Widowed</option> </select> </td> <td><input type="checkbox" name="isHeadOfFamily[]" id="isHeadOfFamily" value="1"> </td> <input type="hidden" name="isHeadOfFamily[]" id="isHeadOfFamilyHIDDEN" value="0"> <td><input type="checkbox" name="isEmployed[]" id="isEmployed" value="1"> </td> <input type="hidden" name="isEmployed[]" id="isEmployedHIDDEN" value="0"> <td><input type="checkbox" name="isSelfEmployedInBusiness[]" id="isSelfEmployedInBusiness" value="1"> </td> <input type="hidden" name="isSelfEmployedInBusiness[]" id="isSelfEmployedInBusinessHIDDEN" value="0"> <td><input type="checkbox" name="isSelfEmployedInInformalSector[]" id="isSelfEmployedInInformalSector" value="1"> </td> <input type="hidden" name="isSelfEmployedInInformalSector[]" id="isSelfEmployedInInformalSectorHIDDEN" value="0"> <td><input type="checkbox" name="isSoloParent[]" id="isSoloParent" value="1"> </td> <input type="hidden" name="isSoloParent[]" id="isSoloParentHIDDEN" value="0"> <td><input type="checkbox" name="isSeniorCitizen[]" id="isSeniorCitizen" value="1"> </td> <input type="hidden" name="isSeniorCitizen[]" id="isSeniorCitizenHIDDEN" value="0"> <td><input type="checkbox" name="isPWD[]" id="isPWD" value="1"> </td> <input type="hidden" name="isPWD[]" id="isPWDHIDDEN" value="0"> <td> <select name="relationToHeadOfFamily[]" id="relationToHeadOfFamily"> <option value="Spouse">Spouse</option> <option value="Child">Child</option> <option value="Sibling">Sibling</option> <option value="Parent">Parent</option> <option value="None">None</option> </select> </td> <td><button type="button" name="addmore" id="addmore">Add More</button></td> </tr>';
                var x = 1;
                $("#addmore").click(function(){
                    $("#table_input-people").append(html);
                });
                
                $("#table_input-people").on('click','#remove',function(){
                    $(this).closest('tr').remove();
                });
            });
        </script>
    
        
    </head>
    <body>      
    <?php include_once("nav.php") ?>    
        <div>
            <form action="" method="post">
            <table class="table table-bordered" id="table_input">
                    <tr>
                        <th>Room Number</th>
                        <th>House Number</th>
                        <th>Block</th>
                        <th>Lot</th>
                        <th>Street</th>
                        <th>Subdivision</th>
                        <th>Barangay</th>
                        <th>City</th>
                        <th>Province</th>
                    </tr>
                    <tr>
                        <td><input type="text" name="roomNumber" id="roomNumber" ></td>             
                        <td><input type="text" name="houseNumber" id="houseNumber"></td>
                        <td><input type="text" name="block" id="block" ></td>
                        <td><input type="text" name="lot" id="lot"></td>        
                        <td><input type="text" name="street" id="street"></td>              
                        <td><input type="text" name="subdivision" id="subdivision"></td>
                        <td><input type="text" name="barangay" id="barangay" ></td>
                        <td><input type="text" name="city" id="city"></td>   
                        <td><input type="text" name="province" id="province"></td>               
                    </tr>
                </table>
                
                <table class="table table-bordered" id="table_input-people">
                    <tr>
                        <th>Last Name</th>
                        <th>First Name</th>
                        <th>Middle Name</th>
                        <th>Suffix</th>
                        <th>Gender</th>
                        <th>Birthday</th>
                        <th>Phone Number</th>
                        <th>Civil Status</th>
                        <th>Are you the head of family?</th> 
                        <th>Employed</th>
                        <th>Self Employed in Business</th>
                        <th>Self Employed in Informal Sector</th>
                        <th>Solo Parent</th>
                        <th>Senior Citizen</th>
                        <th>PWD</th>
                        <th>Relation to Head of Family</th>
                    </tr>
                    <tr>
                        <td><input type="text" name="lName[]" id="lName" ></td>             
                        <td><input type="text" name="fName[]" id="fName" ></td>
                        <td><input type="text" name="mName[]" id="mName"></td>
                        <td><input type="text" name="suffixName[]" id="suffixName" ></td>                      
                        <td>
                            <select name="gender[]" id="gender">
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                            </select>
                        </td>
                        <td><input type="date" name="birthday[]" id="birthday" ></td>
                        <td><input type="text" name="phoneNumber[]" id="phoneNumber" ></td>
                        <td>
                            <select name="civilStatus[]" id="civilStatus">
                            <option value="Single">Single</option>
                            <option value="Married">Married</option>
                            <option value="Widowed">Widowed</option>
                            </select>
                        </td>                       
                        
                        <td><input type="checkbox" name="isHeadOfFamily[]" id="isHeadOfFamily" value="1"> </td> 
                        <input type="hidden" name="isHeadOfFamily[]" id="isHeadOfFamilyHIDDEN" value="0">

                        <td><input type="checkbox" name="isEmployed[]" id="isEmployed" value="1"> </td> 
                        <input type="hidden" name="isEmployed[]" id="isEmployedHIDDEN" value="0">

                        <td><input type="checkbox" name="isSelfEmployedInBusiness[]" id="isSelfEmployedInBusiness" value="1"> </td> 
                        <input type="hidden" name="isSelfEmployedInBusiness[]" id="isSelfEmployedInBusinessHIDDEN" value="0">
                        
                        <td><input type="checkbox" name="isSelfEmployedInInformalSector[]" id="isSelfEmployedInInformalSector" value="1"> </td> 
                        <input type="hidden" name="isSelfEmployedInInformalSector[]" id="isSelfEmployedInInformalSectorHIDDEN" value="0">
                        
                        <td><input type="checkbox" name="isSoloParent[]" id="isSoloParent" value="1"> </td> 
                        <input type="hidden" name="isSoloParent[]" id="isSoloParentHIDDEN" value="0">
                                        
                        <td><input type="checkbox" name="isSeniorCitizen[]" id="isSeniorCitizen" value="1"> </td> 
                        <input type="hidden" name="isSeniorCitizen[]" id="isSeniorCitizenHIDDEN" value="0">                  
                        
                        <td><input type="checkbox" name="isPWD[]" id="isPWD" value="1"> </td> 
                        <input type="hidden" name="isPWD[]" id="isPWDHIDDEN" value="0">

                        <td>
                            <select name="relationToHeadOfFamily[]" id="relationToHeadOfFamily">
                            <option value="Spouse">Spouse</option>
                            <option value="Child">Child</option>
                            <option value="Sibling">Sibling</option>
                            <option value="Parent">Parent</option>
                            <option value="None">None</option>
                            </select>
                        </td>
                        <td><button type="button" name="addmore" id="addmore">Add More</button></td>
                    </tr>
                </table> 
                
                <button type ="submit" name="submit">Submit</button>
            </form>
        </div>
        <script src="js/nav.js"></script>

    </body>
</html>



Aucun commentaire:

Enregistrer un commentaire