<!DOCTYPE html> <html> <head> <title>ThaiCreate.Com</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ var rows = 1; $("#createRows").click(function(){ var tr = "<tr>"; tr = tr + "<td><input type='text' name='txtCustomerID"+rows+"' id='txtCustomerID"+rows+"' size='5'></td>"; tr = tr + "<td><input type='text' name='txtName"+rows+"' id='txtName"+rows+"' size='10'></td>"; tr = tr + "<td><input type='text' name='txtEmail"+rows+"' id='txtEmail"+rows+"' size='15'></td>"; tr = tr + "<td><input type='text' name='txtCountryCode"+rows+"' id='txtCountryCode"+rows+"' size='5'></td>"; tr = tr + "<td><input type='text' name='txtBudget"+rows+"' id='txtBudget"+rows+"' size='5'></td>"; tr = tr + "<td><input type='text' name='txtUsed"+rows+"' id='txtUsed"+rows+"' size='5'></td>"; tr = tr + "</tr>"; $('#myTable > tbody:last').append(tr); $('#hdnCount').val(rows); rows = rows + 1; }); $("#deleteRows").click(function(){ if ($("#myTable tr").length != 1) { $("#myTable tr:last").remove(); } }); $("#clearRows").click(function(){ rows = 1; $('#hdnCount').val(rows); $('#myTable > tbody:last').empty(); // remove all }); }); </script> <meta charset=utf-8 /> </head> <body> <center> <form action="page2.php" id="frmMain" name="frmMain" method="post"> <h1>jQuery Dynamic table input</h1> <table width="600" border="1" id="myTable"> <!-- head table --> <thead> <tr> <td width="91"> <div align="center">CustomerID </div></td> <td width="98"> <div align="center">Name </div></td> <td width="198"> <div align="center">Email </div></td> <td width="97"> <div align="center">CountryCode </div></td> <td width="59"> <div align="center">Budget </div></td> <td width="71"> <div align="center">Used </div></td> </tr> </thead> <!-- body dynamic rows --> <tbody></tbody> </table> <br /> <input type="button" id="createRows" value="Add"> <input type="button" id="deleteRows" value="Del"> <input type="button" id="clearRows" value="Clear"> <center> <br> <input type="hidden" id="hdnCount" name="hdnCount"> <input type="submit" value="Submit"> </form> </body> </html>
<!DOCTYPE html> <html> <head> <title>ThaiCreate.Com</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset=utf-8 /> </head> <body> <?php for ($i = 1; $i<= (int)$_POST["hdnCount"]; $i++){ if($_POST["txtCustomerID$i"] != "" && $_POST["txtName$i"] != "" && $_POST["txtEmail$i"] != "" && $_POST["txtCountryCode$i"] != "" && $_POST["txtBudget$i"] != "" && $_POST["txtUsed$i"] != "") { echo "<br>Line $i"; echo "<br>CustomerID =".$_POST["txtCustomerID$i"]; echo "<br>Name =".$_POST["txtName$i"]; echo "<br>Email =".$_POST["txtEmail$i"]; echo "<br>CountryCode =".$_POST["txtCountryCode$i"]; echo "<br>Budget =".$_POST["txtBudget$i"]; echo "<br>Used =".$_POST["txtUsed$i"]; echo "<hr>"; } } ?> </body> </html>
<!DOCTYPE html> <html> <head> <title>ThaiCreate.Com</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ var rows = 1; $("#createRows").click(function(){ var tr = "<tr>"; tr = tr + "<td><input type='text' name='txtCustomerID"+rows+"' id='txtCustomerID"+rows+"' size='5'></td>"; tr = tr + "<td><input type='text' name='txtName"+rows+"' id='txtName"+rows+"' size='10'></td>"; tr = tr + "<td><input type='text' name='txtEmail"+rows+"' id='txtEmail"+rows+"' size='15'></td>"; tr = tr + "<td><input type='text' name='txtCountryCode"+rows+"' id='txtCountryCode"+rows+"' size='5'></td>"; tr = tr + "<td><input type='text' name='txtBudget"+rows+"' id='txtBudget"+rows+"' size='5'></td>"; tr = tr + "<td><input type='text' name='txtUsed"+rows+"' id='txtUsed"+rows+"' size='5'></td>"; tr = tr + "</tr>"; $('#myTable > tbody:last').append(tr); $('#hdnCount').val(rows); rows = rows + 1; }); $("#deleteRows").click(function(){ if ($("#myTable tr").length != 1) { $("#myTable tr:last").remove(); } }); $("#clearRows").click(function(){ rows = 1; $('#hdnCount').val(rows); $('#myTable > tbody:last').empty(); // remove all }); $("#frmMain").submit(function() { var bFlag = true; $("table#myTable input[id*='txtCustomerID']").each(function (index) { var line = index + 1; var txtCustomerID = $("table#myTable input[id*='txtCustomerID']").eq(index); var txtName = $("table#myTable input[id*='txtName']").eq(index); var txtEmail = $("table#myTable input[id*='txtEmail']").eq(index); var txtCountryCode = $("table#myTable input[id*='txtCountryCode']").eq(index); var txtBudget = $("table#myTable input[id*='txtBudget']").eq(index); var txtUsed = $("table#myTable input[id*='txtUsed']").eq(index); if($(txtCustomerID).val() != "" || $(txtName).val() != "" || $(txtEmail).val() != "" || $(txtCountryCode).val() != "" || $(txtBudget).val() != "" || $(txtUsed).val() != "") { if($(txtCustomerID).val() == "") { alert('Please input CustomerID line...' + line); bFlag = false; } if($(txtName).val() == "") { alert('Please input Name line...' + line); bFlag = false; } if($(txtEmail).val() == "") { alert('Please input Email line...' + line); bFlag = false; } if($(txtCountryCode).val() == "") { alert('Please input CountryCode line...' + line); bFlag = false; } if($(txtBudget).val() == "") { alert('Please input Budget line...' + line); bFlag = false; } if($(txtUsed).val() == "") { alert('Please input Used line...' + line); bFlag = false; } } }); if(!bFlag) { return false; } return true; }); }); </script> <meta charset=utf-8 /> </head> <body> <center> <form action="page2.php" id="frmMain" name="frmMain" method="post"> <h1>jQuery Dynamic table input</h1> <table width="600" border="1" id="myTable"> <!-- head table --> <thead> <tr> <td width="91"> <div align="center">CustomerID </div></td> <td width="98"> <div align="center">Name </div></td> <td width="198"> <div align="center">Email </div></td> <td width="97"> <div align="center">CountryCode </div></td> <td width="59"> <div align="center">Budget </div></td> <td width="71"> <div align="center">Used </div></td> </tr> </thead> <!-- body dynamic rows --> <tbody></tbody> </table> <br /> <input type="button" id="createRows" value="Add"> <input type="button" id="deleteRows" value="Del"> <input type="button" id="clearRows" value="Clear"> <center> <br> <input type="hidden" id="hdnCount" name="hdnCount"> <input type="submit" value="Submit"> </form> </body> </html>
