How to capture Array Values from Dynamic input Fields using PHP?

Question

I am coding a online time tracking web page that allows users to key in their study time into this system. The user will first key in the name and then enter the time of study according to the day. In one day there can be multiple studying time.

Below is my coding for the first page,

 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; if(rowCount < 5){ var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; for(var i=0; i<colCount; i++) { var newcell = row.insertCell(i); newcell.innerHTML = table.rows[0].cells[i].innerHTML; }; }else{ alert("Maximum Schedule per day is 5"); }; }; </script> </head> <body> <div class="bodycontainer"> <h1> <?php echo date("l,F d") ; ?> </h1> <div class="panel panel-default"> <div class="panel-heading">Schedule Activity</div> <div class="panel-body"> <form name="Enter Study Schedule" class="form-horizontal" method="post" action="handleSchedule.php"> <div class="form-group"> <label for="name" class="col-sm-3 control-label">Name:</label> <div class="col-sm-6"> <input type="text" name="name" class="form-control" > </div> </div> </div> <div class="form-group"> <div class="col-sm-7"> <table id="dataTable1" class="form-control"> <label for="Monday">Monday</label> <input type="button" value="Add Schedule" onClick="addRow('dataTable1')" /> <tbody> <tr> <p> <td> <label>Start Time</label> <input type="text" class="form-control" name="startTime[]"> </td> <td> <label>End Time</label> <input type="text" class="form-control" name="endTime[]"> </td> </tr> </tbody> </table> </div> </div> <div class="form-group"> <div class="col-sm-7"> <table id="dataTable1" class="form-control"> <label for="Tuesday">Tuesday</label> <input type="button" value="Add Schedule" onClick="addRow('dataTable1')" /> <tbody> <tr> <p> <td> <label>Start Time</label> <input type="text" class="form-control" name="startTime[]"> </td> <td> <label>End Time</label> <input type="text" class="form-control" name="endTime[]"> </td> </tr> </tbody> </table> </div> </div> <div class="form-group"> <div class="col-sm-7"> <table id="dataTable2" class="form-control"> <label for="Wednesday">Wednesday</label> <input type="button" value="Add Schedule" onClick="addRow('dataTable2')" /> <tbody> <tr> <p> <td> <label>Start Time</label> <input type="text" class="form-control" name="startTime[]"> </td> <td> <label>End Time</label> <input type="text" class="form-control" name="endTime[]"> </td> </tr> </tbody> </table> </div> </div> <div class="form-group"> <div class="col-sm-7"> <table id="dataTable3" class="form-control"> <label for="Thursday">Thursday</label> <input type="button" value="Add Schedule" onClick="addRow('dataTable3')" /> <tbody> <tr> <p> <td> <label>Start Time</label> <input type="text" class="form-control" name="startTime[]"> </td> <td> <label>End Time</label> <input type="text" class="form-control" name="endTime[]"> </td> </tr> </tbody> </table> </div> </div> <div class="form-group"> <div class="col-sm-7"> <table id="dataTable4" class="form-control"> <label for="Friday">Friday</label> <input type="button" value="Add Schedule" onClick="addRow('dataTable4')" /> <tbody> <tr> <p> <td> <label>Start Time</label> <input type="text" class="form-control" name="startTime[]"> </td> <td> <label>End Time</label> <input type="text" class="form-control" name="endTime[]"> </td> </tr> </tbody> </table> <div class="form-group"> <input type="submit" value="Submit" class="btn btn-primary"></input> </div> </form> </div> </div> </body> </html>

My partially done handleSchedule.php page,

 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Singhealth</title> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <?php function getDbConnect() { $con = mysqli_connect("localhost:3306", "Stud", "Stud", "Student"); return $con; } $con = getDbConnect(); $name = $_POST['name']; ?> <div class="space"> <div class="container"> <div class="row"> <?php if (mysqli_connect_errno($con)) { echo "Failed to connect to MySQL: " . mysqli_connect_error(); } else { $sql = "INSERT INTO timetableschedule (name) ". "VALUES ('$name')"; if (!mysqli_query($con, $sql)) { die('Error: ' . mysqli_error($con)); } echo " record added"; mysqli_close($con); } ?> </div> </div> </div> </body> </html>

I do not know how to code for the part where the user key in the time for the day in the handleSchedule.php.

The desired database input,

在此处输入图片说明

Answer 1

You have single value for name ie(you used in you markup)

<input type="text" name="name" class="form-control" />

Next you grab day with the "start time" and "end time" you have to rename you form fields(startTime and endTime) with day number likes for monday field names should be

<input type="text" class="form-control" name="startTime[1][]" />

Here in name attribute first index is day number. In this case 1 for Monday you can day numbers as you wants.

All done with form!!!

Now we wants the data on the server side.

Get the name field value as you already done:

$name = $_POST['name'];

Now to get start time and end time for all days we have to loop through startTime or endTime field values something like following with startTime field values:

/* This loop will iterate through all days.  */
foreach($_POST["startTime"] as $day=>$startTimes){
    /* This loop will give start & end times for a particular day, i.e. $day */

    foreach($startTimes as $timeIndex=>$startTime){
        $endTime = $_POST["endTime"][$day][$timeIndex];
        /**
         * 1. You have name in $name variable.
         * 2. Day you have in $day variable.
         * 3. Start time in $startTime variable.
         * 4. End time in $endTime variable.
         *
         * TODO: Now you have all required data in respected variables 
         * You can save to Database.
         *
         */
    }        
}

How to capture Array Values from Dynamic input Fields using PHP?

Question

1 answers

solution1
1 ACCPTED 2015-07-01 05:56:35

How to capture Array Values from Dynamic input Fields using PHP?

Question

1 answers

solution1 1 ACCPTED 2015-07-01 05:56:35

solution1
1 ACCPTED 2015-07-01 05:56:35