Saving form data to MYSQL database using PHP

hey all,

I am slightly new to PHP, I have made a form which can have rows which will be decided by user at runtime, i want all of the data to be saved to a table in database as soon as the submit button is clicked. I have made sure that each field has a different iterable name but i am unable to get the logic of looping the data into the database.

Could you please post the code for your form, @uditsharma29, and the schema showing how you have the database table set up?

It looks like you will need two tables here - one for the project itself (maybe with id and project_name), and one that holds the S.N.O., ITEM and ‘For Structurals…’ along with a project_id that links these items to the project in the projects table.

Yes, You are spot on with the structure of tables, the trouble is with storing data on the table which will contain S.N.O., ITEM and ‘For Structurals…’ .
I want to insert data in that table knowing that i dont know the no. of rows the user is gonna insert.

I need that Iterative procedure to insert those variable number of rows into that table when submit button is clicked.

Please Help, its urgent!

Due to some issue, its not allowing me to post the code, But i can tell you that 1st row has name of rows as sno1, item1, struct1. 2nd row will get sno2,item2, struct2 and so on…

What problems are you having with posting the code for your form? Try copying the code, selecting the </> icon from above the edit area, and then paste the code. Alternatively, you could type three back ticks on a new line ( ```), paste in the code, then type another three back ticks on a new line.

yes, I think that was a connection error, that was a dummy ss, here is the real code…

> <!DOCTYPE html>
> <html lang="en">
> <head>
>     <meta charset="utf-8">
>     <title>Insert Title</title>
>         <meta name="viewport" content="width=device-width, initial-scale=1">
>     <link href="css/bootstrap.min.css" rel="stylesheet">
>     <style type="text/css">
>         .nav-side-menu {
>   overflow: auto;
>   font-family: verdana;
>   font-size: 12px;
>   font-weight: 200;
>   background-color: #2e353d;
>   position: fixed;
>   top: auto;
>             left: -1px;
>   width: 230px;
>   height: 200%;
>   color: #e1ffff;
> }
> .nav-side-menu .brand {
>   background-color: #23282e;
>   line-height: 50px;
>   display: block;
>   text-align: center;
>   font-size: 14px;
> }
> .nav-side-menu .toggle-btn {
>   display: none;
> }
> .nav-side-menu ul,
> .nav-side-menu li {
>   list-style: none;
>   padding: 0px;
>   margin: 0px;
>   line-height: 35px;
>   cursor: pointer;
>   /*    
>     .collapsed{
>        .arrow:before{
>                  font-family: FontAwesome;
>                  content: "\f053";
>                  display: inline-block;
>                  padding-left:10px;
>                  padding-right: 10px;
>                  vertical-align: middle;
>                  float:right;
>             }
>      }
> */
> }
> .nav-side-menu ul :not(collapsed) .arrow:before,
> .nav-side-menu li :not(collapsed) .arrow:before {
>   font-family: FontAwesome;
>   content: "\f078";
>   display: inline-block;
>   padding-left: 10px;
>   padding-right: 10px;
>   vertical-align: middle;
>   float: right;
> }
> .nav-side-menu ul .active,
> .nav-side-menu li .active {
>   border-left: 3px solid #d19b3d;
>   background-color: #4f5b69;
> }
> .nav-side-menu ul .sub-menu li.active,
> .nav-side-menu li .sub-menu li.active {
>   color: #d19b3d;
> }
> .nav-side-menu ul .sub-menu li.active a,
> .nav-side-menu li .sub-menu li.active a {
>   color: #d19b3d;
> }
> .nav-side-menu ul .sub-menu li,
> .nav-side-menu li .sub-menu li {
>   background-color: #181c20;
>   border: none;
>   line-height: 28px;
>   border-bottom: 1px solid #23282e;
>   margin-left: 0px;
> }
> .nav-side-menu ul .sub-menu li:hover,
> .nav-side-menu li .sub-menu li:hover {
>   background-color: #020203;
> }
> .nav-side-menu ul .sub-menu li:before,
> .nav-side-menu li .sub-menu li:before {
>   font-family: FontAwesome;
>   content: "\f105";
>   display: inline-block;
>   padding-left: 10px;
>   padding-right: 10px;
>   vertical-align: middle;
> }
> .nav-side-menu li {
>   padding-left: 0px;
>   border-left: 3px solid #2e353d;
>   border-bottom: 1px solid #23282e;
> }
> .nav-side-menu li a {
>   text-decoration: none;
>   color: #e1ffff;
> }
> .nav-side-menu li a i {
>   padding-left: 10px;
>   width: 20px;
>   padding-right: 20px;
> }
> .nav-side-menu li:hover {
>   border-left: 3px solid #d19b3d;
>   background-color: #4f5b69;
>   -webkit-transition: all 1s ease;
>   -moz-transition: all 1s ease;
>   -o-transition: all 1s ease;
>   -ms-transition: all 1s ease;
>   transition: all 1s ease;
> }
> @media (max-width: 767px) {
>   .nav-side-menu {
>     position: relative;
>     width: 100%;
>     margin-bottom: 10px;
>   }
>   .nav-side-menu .toggle-btn {
>     display: block;
>     cursor: pointer;
>     position: absolute;
>     right: 10px;
>     top: 10px;
>     z-index: 10 !important;
>     padding: 3px;
>     background-color: #ffffff;
>     color: #000;
>     width: 40px;
>     text-align: center;
>   }
>   .brand {
>     text-align: left !important;
>     font-size: 22px;
>     padding-left: 20px;
>     line-height: 50px !important;
>   }
> }
> @media (min-width: 767px) {
>   .nav-side-menu .menu-list .menu-content {
>     display: block;
>   }
> }
> #header {
> 	height: 150px;
>     background-color: #2e353d;
> }
>         #login-bar{
>             background-color: #2e353d;
>              
>             left:-20px;
>             
>             
>         }
> #main {
> 	margin-left: 25%;
>     margin-top: 10%;
> }
>        #logoimg{
>             position:relative;
>             top: -30px;
>            
>         }
>        
> body {
>   margin: 0px;
>   padding: 0px;
> }

>     </style>
>     <script src="js/jquery.min.js"></script>
>     <script src="js/bootstrap.min.js"></script>
> </head>
> <body>
> <link href="css/font-awesome.min.css" rel="stylesheet">

> <div class="container-fluid">
> <div class="row">
>     <div class="col-md-12" style="background-color: #2d353d; height:90px">
>       <div class="col-md-4" >
>         <img  id="logoimg" src="logo1.png" width="150 px" height="150 px">
>       </div>
>       <br><br>
>       <div class="col-sm-offset-11" >
>             
>                   <button type="button" class="btn btn-primary">Logout&nbsp<span class="glyphicon glyphicon-off"></span></button>
>             
>       </div>
>     </div>
>    <div class="col-sm-2" >
>     <div class="nav-side-menu" >
>         <div class="menu-list">
>   
>             <ul id="menu-content" class="menu-content collapse out">
>                 
>                 <li  data-toggle="collapse" data-target="#products" class="collapsed active">
>                   <a href="#"><i class="fa fa-gift fa-lg"></i> Marketing <span class="arrow"></span></a>
>                 </li>
>                 <ul class="sub-menu collapse" id="products">
>                     <li class="active"><a href="#">CSS3 Animation</a></li>
>                     <li><a href="#">General</a></li>
>                     <li><a href="#">Buttons</a></li>
>                     <li><a href="#">Tabs & Accordions</a></li>
>                     </ul>


>                 <li data-toggle="collapse" data-target="#service" class="collapsed">
>                   <a href="#"><i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span></a>
>                 </li>  
>                 <ul class="sub-menu collapse" id="service">
>                   <li>New Service 1</li>
>                   <li>New Service 2</li>
>                   <li>New Service 3</li>
>                 </ul>

>                 
>                 <li data-toggle="collapse" data-target="#service" class="collapsed">
>                   <a href="#"><i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span></a>
>                 </li>  
>                 <ul class="sub-menu collapse" id="service">
>                   <li>New Service 1</li>
>                   <li>New Service 2</li>
>                   <li>New Service 3</li>
>                 </ul>

>                 
>                 
>                 <li data-toggle="collapse" data-target="#service" class="collapsed">
>                   <a href="#"><i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span></a>
>                 </li>  
>                 <ul class="sub-menu collapse" id="service">
>                   <li>New Service 1</li>
>                   <li>New Service 2</li>
>                   <li>New Service 3</li>
>                 </ul>

>                 
>                 <li data-toggle="collapse" data-target="#service" class="collapsed">
>                   <a href="#"><i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span></a>
>                 </li>  
>                 <ul class="sub-menu collapse" id="service">
>                   <li>New Service 1</li>
>                   <li>New Service 2</li>
>                   <li>New Service 3</li>
>                 </ul>

>                 
>                 <li data-toggle="collapse" data-target="#new" class="collapsed">
>                   <a href="#"><i class="fa fa-car fa-lg"></i> New <span class="arrow"></span></a>
>                 </li>
>                 <ul class="sub-menu collapse" id="new">
>                   <li>New New 1</li>
>                   <li>New New 2</li>
>                   <li>New New 3</li>
>                 </ul>


>                  <li>
>                   <a href="#">
>                   <i class="fa fa-user fa-lg"></i> Profile
>                   </a>
>                   </li>

>                  <li>
>                   <a href="#">
>                   <i class="fa fa-users fa-lg"></i> Users
>                   </a>
>                 </li>
>             </ul>
>      </div>
>    </div>
>   </div>
>   <div class="col-md-10">
>   <div >
> <div class="col-sm-offset-5 col-sm-10">
>   <h2><span style="font-family: verdana">ESTIMATE</span></h2>
>                 </div>
>     <div>
>   <form role="form" action="insertEstimate.php" me369*thod="post">
>     <div class="form-group">
>       <label for="Title">Title</label>
>       <input type="text" class="form-control" id="" placeholder="Enter Title">
>     </div>
>       <div class="form-group">
>       <label for="date">Estimate Dated: </label>
>       <textarea class="form-control" rows="3" id="" placeholder="Enter EST. DATED"></textarea>
>     </div>
>         <div class="form-group">
>       <label for="client">Client</label>
>       <textarea class="form-control" rows="3" id="" placeholder="Enter Client Name"></textarea>
>     </div>
>  
>         <div class="form-group">
>       <label for="Project">Project</label>
>      
>     </div> 
>  
>       
>    
> 			<table class="table table-bordered table-hover" id="tab_logic">
> 				<thead>
> 					<tr >
> 						<th class="text-center">
> 							#
> 						</th>
> 						<th class="text-center">
> 							Item
> 						</th>
> 						<th class="text-center">
> 				With PTG.(in Rs/- Per Kg.)


> 						</th>
> 						

>                     </tr>
> 				</thead>
> 				<tbody>
> 					<tr id='addr0'>
> 						<td>
> 						1
> 						</td>
> 						<td>
> 						<input type="text" name='name0'  placeholder='Name' class="form-control"/>
> 						</td>
> 						<td>
> 						<input type="text" name='mail0' placeholder='' class="form-control"/>
> 						</td>
> 						

>                         					</tr>
>                     <tr id='addr0'>
> 						<td>
> 						2
> 						</td>
> 						<td>
> 						<input type="text" name='name1'  placeholder='Name' class="form-control"/>
> 						</td>
> 						<td>
> 						<input type="text" name='PTG1' placeholder='' class="form-control"/>
> 						</td>
> 						

>                         					</tr>
>                     <tr id='addr0'>
> 						<td>
> 						3
> 						</td>
> 						<td>
> 						<input type="text" name='name2'  placeholder='Name' class="form-control"/>
> 						</td>
> 						<td>
> 						<input type="text" name='PTG2' placeholder='' class="form-control"/>
> 						</td>
> 						

>                         					</tr>
>                     <tr id='addr0'>
> 						<td>
> 						4
> 						</td>
> 						<td>
> 						<input type="text" name='name3'  placeholder='Name' class="form-control"/>
> 						</td>
> 						<td>
> 						<input type="text" name='PTG3' placeholder='' class="form-control"/>
> 						</td>
> 						

>                         					</tr>
>                     <tr id='addr0'>
> 						<td>
> 						5
> 						</td>
> 						<td>
> 						<input type="text" name='name4'  placeholder='Name' class="form-control"/>
> 						</td>
> 						<td>
> 						<input type="text" name='PTG4' placeholder='' class="form-control"/>
> 						</td>
> 						

>                         					</tr>
>                     
> 				</tbody>
> 			</table>
> 		<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
>       <br>
>       <br>
>       <br>
>     <button type="submit" class="btn btn-default">Submit</button>
> </form>
>             </div>           
>             </div>

>     </div>
>     </div>
>     </div> 
>   </div>
> </div>
> </div>
> <script type="text/javascript">
>       $(document).ready(function(){
>       var i=4;
>      $("#add_row").click(function(){
>       $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='name"+i+"' type='text' placeholder='Name' class='form-control input-md'  /> </td><td><input  name='mail"+i+"' type='text' placeholder=''  class='form-control input-md'></td><td> </td>");

>       $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
>       i++; 
>           $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='name"+i+"' type='text' placeholder='Name' class='form-control input-md'  /> </td><td><input  name='mail"+i+"' type='text' placeholder=''  class='form-control input-md'></td><td> </td>");

>      $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
>      i++; 
>           $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='name"+i+"' type='text' placeholder='Name' class='form-control input-md'  /> </td><td><input  name='mail"+i+"' type='text' placeholder=''  class='form-control input-md'></td><td> </td>");

>       $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
>       i++; 
>          
>   });
>      $("#delete_row").click(function(){
>     	 if(i>5){
> 		 $("#addr"+(i-1)).html('');
> 		 i--;
> 		 }
> 	 });

> });

> </script>
> </body>
> </html>

You should probably make sure your html markup is error-free before you start trying to submit the form data to a database via a PHP form processor.

Copy your code into the validator at https://validator.w3.org/ - there are about 40 errors and warnings. The errors need to be fixed.

2 Likes

the code is working just fine in my computer, I dont know how to validate there, its saying unable to validate encoding type- text/plain which hasnt been mentioned anywhere in the file…

Could you just ignore the form code and just suggest me the logic that i should apply to my PHP code…
I am stuck on this since 2 days.

The names of text fields are incremental.

Thanks.

Does the file on your computer have the left side
>
>
>
??

Did you paste those into the validator?

The first step really is to have valid HTML. Really.

Without that even if it does appear to “work” you can’t be sure if it’s luck or coincidence.
Or how well it will work in other browsers or a different version of the same browser.

I think I have corrected my code, please help me in designing the PHP Backend so that i can send all the rows to the database on clicking the submit button.

Thanks in advance!

> <!DOCTYPE html>
> <html lang="en">
> <head>
>     <meta charset="utf-8">
>     <title>Insert Title</title>
>         <meta name="viewport" content="width=device-width, initial-scale=1">
>     <link href="css/bootstrap.min.css" rel="stylesheet">
>     <style type="text/css">
>         .nav-side-menu {
>   overflow: auto;
>   font-family: verdana;
>   font-size: 12px;
>   font-weight: 200;
>   background-color: #2e353d;
>   position: fixed;
>   top: auto;
>             left: -1px;
>   width: 230px;
>   height: 200%;
>   color: #e1ffff;
> }
> .nav-side-menu .brand {
>   background-color: #23282e;
>   line-height: 50px;
>   display: block;
>   text-align: center;
>   font-size: 14px;
> }
> .nav-side-menu .toggle-btn {
>   display: none;
> }
> .nav-side-menu ul,
> .nav-side-menu li {
>   list-style: none;
>   padding: 0px;
>   margin: 0px;
>   line-height: 35px;
>   cursor: pointer;
>   /*    
>     .collapsed{
>        .arrow:before{
>                  font-family: FontAwesome;
>                  content: "\f053";
>                  display: inline-block;
>                  padding-left:10px;
>                  padding-right: 10px;
>                  vertical-align: middle;
>                  float:right;
>             }
>      }
> */
> }
> .nav-side-menu ul :not(collapsed) .arrow:before,
> .nav-side-menu li :not(collapsed) .arrow:before {
>   font-family: FontAwesome;
>   content: "\f078";
>   display: inline-block;
>   padding-left: 10px;
>   padding-right: 10px;
>   vertical-align: middle;
>   float: right;
> }
> .nav-side-menu ul .active,
> .nav-side-menu li .active {
>   border-left: 3px solid #d19b3d;
>   background-color: #4f5b69;
> }
> .nav-side-menu ul .sub-menu li.active,
> .nav-side-menu li .sub-menu li.active {
>   color: #d19b3d;
> }
> .nav-side-menu ul .sub-menu li.active a,
> .nav-side-menu li .sub-menu li.active a {
>   color: #d19b3d;
> }
> .nav-side-menu ul .sub-menu li,
> .nav-side-menu li .sub-menu li {
>   background-color: #181c20;
>   border: none;
>   line-height: 28px;
>   border-bottom: 1px solid #23282e;
>   margin-left: 0px;
> }
> .nav-side-menu ul .sub-menu li:hover,
> .nav-side-menu li .sub-menu li:hover {
>   background-color: #020203;
> }
> .nav-side-menu ul .sub-menu li:before,
> .nav-side-menu li .sub-menu li:before {
>   font-family: FontAwesome;
>   content: "\f105";
>   display: inline-block;
>   padding-left: 10px;
>   padding-right: 10px;
>   vertical-align: middle;
> }
> .nav-side-menu li {
>   padding-left: 0px;
>   border-left: 3px solid #2e353d;
>   border-bottom: 1px solid #23282e;
> }
> .nav-side-menu li a {
>   text-decoration: none;
>   color: #e1ffff;
> }
> .nav-side-menu li a i {
>   padding-left: 10px;
>   width: 20px;
>   padding-right: 20px;
> }
> .nav-side-menu li:hover {
>   border-left: 3px solid #d19b3d;
>   background-color: #4f5b69;
>   -webkit-transition: all 1s ease;
>   -moz-transition: all 1s ease;
>   -o-transition: all 1s ease;
>   -ms-transition: all 1s ease;
>   transition: all 1s ease;
> }
> @media (max-width: 767px) {
>   .nav-side-menu {
>     position: relative;
>     width: 100%;
>     margin-bottom: 10px;
>   }
>   .nav-side-menu .toggle-btn {
>     display: block;
>     cursor: pointer;
>     position: absolute;
>     right: 10px;
>     top: 10px;
>     z-index: 10 !important;
>     padding: 3px;
>     background-color: #ffffff;
>     color: #000;
>     width: 40px;
>     text-align: center;
>   }
>   .brand {
>     text-align: left !important;
>     font-size: 22px;
>     padding-left: 20px;
>     line-height: 50px !important;
>   }
> }
> @media (min-width: 767px) {
>   .nav-side-menu .menu-list .menu-content {
>     display: block;
>   }
> }
> #header {
> 	height: 150px;
>     background-color: #2e353d;
> }
>         #login-bar{
>             background-color: #2e353d;
>              
>             left:-20px;
>             
>             
>         }
> #main {
> 	margin-left: 25%;
>     margin-top: 10%;
> }
>        #logoimg{
>             position:relative;
>             top: -30px;
>            
>         }
>        
> body {
>   margin: 0px;
>   padding: 0px;
> }

>     </style>
>     <script src="js/jquery.min.js"></script>
>     <script src="js/bootstrap.min.js"></script>
> </head>
> <body>
> <link href="css/font-awesome.min.css" rel="stylesheet">

> <div class="container-fluid">
> <div class="row">
>     <div class="col-md-12" style="background-color: #2d353d; height:90px">
>       <div class="col-md-4" >
>         <img  id="logoimg" src="logo1.png" width="150 px" height="150 px">
>       </div>
>       <br><br>
>       <div class="col-sm-offset-11" >
>             
>                   <button type="button" class="btn btn-primary">Logout&nbsp;<span class="glyphicon glyphicon-off"></span></button>
>             
>       </div>
>     </div>
>    <div class="col-sm-2" >
>     <div class="nav-side-menu" >
>         <div class="menu-list">
>   
>             <ul id="menu-content" class="menu-content collapse out">
>                 
>                 <li  data-toggle="collapse" data-target="#products" class="collapsed active">
>                   <a href="#"><i class="fa fa-gift fa-lg"></i> Marketing <span class="arrow"></span></a>
>                 </li>
>                 <ul class="sub-menu collapse" id="products">
>                     <li class="active"><a href="#">CSS3 Animation</a></li>
>                     <li><a href="#">General</a></li>
>                     <li><a href="#">Buttons</a></li>
>                     <li><a href="#">Tabs and Accordions</a></li>
>                     </ul>


>                 <li data-toggle="collapse" data-target="#service" class="collapsed">
>                   <a href="#"><i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span></a>
>                 </li>  
>                 <ul class="sub-menu collapse" id="service">
>                   <li>New Service 1</li>
>                   <li>New Service 2</li>
>                   <li>New Service 3</li>
>                 </ul>

>                 
>                 <li data-toggle="collapse" data-target="#service" class="collapsed">
>                   <a href="#"><i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span></a>
>                 </li>  
>                 <ul class="sub-menu collapse" id="service">
>                   <li>New Service 1</li>
>                   <li>New Service 2</li>
>                   <li>New Service 3</li>
>                 </ul>

>                 
>                 
>                 <li data-toggle="collapse" data-target="#service" class="collapsed">
>                   <a href="#"><i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span></a>
>                 </li>  
>                 <ul class="sub-menu collapse" id="service">
>                   <li>New Service 1</li>
>                   <li>New Service 2</li>
>                   <li>New Service 3</li>
>                 </ul>

>                 
>                 <li data-toggle="collapse" data-target="#service" class="collapsed">
>                   <a href="#"><i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span></a>
>                 </li>  
>                 <ul class="sub-menu collapse" id="service">
>                   <li>New Service 1</li>
>                   <li>New Service 2</li>
>                   <li>New Service 3</li>
>                 </ul>

>                 
>                 <li data-toggle="collapse" data-target="#new" class="collapsed">
>                   <a href="#"><i class="fa fa-car fa-lg"></i> New <span class="arrow"></span></a>
>                 </li>
>                 <ul class="sub-menu collapse" id="new">
>                   <li>New New 1</li>
>                   <li>New New 2</li>
>                   <li>New New 3</li>
>                 </ul>


>                  <li>
>                   <a href="#">
>                   <i class="fa fa-user fa-lg"></i> Profile
>                   </a>
>                   </li>

>                  <li>
>                   <a href="#">
>                   <i class="fa fa-users fa-lg"></i> Users
>                   </a>
>                 </li>
>             </ul>
>      </div>
>    </div>
>   </div>
>   <div class="col-md-10">
>   <div >
> <div class="col-sm-offset-5 col-sm-10">
>   <h2><span style="font-family: verdana">ESTIMATE</span></h2>
>                 </div>
>     <div>
>   <form role="form" action="insertEstimate.php" me369*thod="post">
>     <div class="form-group">
>       <label for="Title">Title</label>
>       <input type="text" class="form-control" id="" placeholder="Enter Title">
>     </div>
>       <div class="form-group">
>       <label for="date">Estimate Dated: </label>
>       <textarea class="form-control" rows="3" id="" placeholder="Enter EST. DATED"></textarea>
>     </div>
>         <div class="form-group">
>       <label for="client">Client</label>
>       <textarea class="form-control" rows="3" id="" placeholder="Enter Client Name"></textarea>
>     </div>
>  
>         <div class="form-group">
>       <label for="Project">Project</label>
>      
>     </div> 
>  
>       
>    
> 			<table class="table table-bordered table-hover" id="tab_logic">
> 				<thead>
> 					<tr >
> 						<th class="text-center">
> 							#
> 						</th>
> 						<th class="text-center">
> 							Item
> 						</th>
> 						<th class="text-center">
> 				With PTG.(in Rs/- Per Kg.)


> 						</th>
> 						

>                     </tr>
> 				</thead>
> 				<tbody>
> 					<tr id='addr0'>
> 						<td>
> 						1
> 						</td>
> 						<td>
> 						<input type="text" name='name0'  placeholder='Name' class="form-control"/>
> 						</td>
> 						<td>
> 						<input type="text" name='PTG0' placeholder='' class="form-control"/>
> 						</td>
> 						

>                         					</tr>
>                     <tr id='addr0'>
> 						<td>
> 						2
> 						</td>
> 						<td>
> 						<input type="text" name='name1'  placeholder='Name' class="form-control"/>
> 						</td>
> 						<td>
> 						<input type="text" name='PTG1' placeholder='' class="form-control"/>
> 						</td>
> 						

>                         					</tr>
>                     <tr id='addr0'>
> 						<td>
> 						3
> 						</td>
> 						<td>
> 						<input type="text" name='name2'  placeholder='Name' class="form-control"/>
> 						</td>
> 						<td>
> 						<input type="text" name='PTG2' placeholder='' class="form-control"/>
> 						</td>
> 						

>                         					</tr>
>                     <tr id='addr0'>
> 						<td>
> 						4
> 						</td>
> 						<td>
> 						<input type="text" name='name3'  placeholder='Name' class="form-control"/>
> 						</td>
> 						<td>
> 						<input type="text" name='PTG3' placeholder='' class="form-control"/>
> 						</td>
> 						

>                         					</tr>
>                     <tr id='addr0'>
> 						<td>
> 						5
> 						</td>
> 						<td>
> 						<input type="text" name='name4'  placeholder='Name' class="form-control"/>
> 						</td>
> 						<td>
> 						<input type="text" name='PTG4' placeholder='' class="form-control"/>
> 						</td>
> 						

>                         					</tr>
>                     
> 				</tbody>
> 			</table>
> 		<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
>       <br>
>       <br>
>       <br>
>     <button type="submit" class="btn btn-default">Submit</button>
>       
>       <input type="text" value="5" name="count">
> </form>
>             </div>           
>             </div>

>     </div>
>     </div>
>     </div> 
>   

> <script type="text/javascript">
>       $(document).ready(function(){
>       var i=5;
>      $("#add_row").click(function(){
>          
>          
>       $('#addr'+i).html("<td>"+ (i) +"</td><td><input name='name"+i+"' type='text' placeholder='Name' class='form-control input-md'  /> </td><td><input  name='mail"+i+"' type='text' placeholder=''  class='form-control input-md'></td><td> </td>");

>       $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
>       i++;
>          
>          
>          
>           $('#addr'+i).html("<td>"+ (i) +"</td><td><input name='name"+i+"' type='text' placeholder='Name' class='form-control input-md'  /> </td><td><input  name='mail"+i+"' type='text' placeholder=''  class='form-control input-md'></td><td> </td>");

>      $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
>      i++;
>          
>          
>          
>          
>   });
>      $("#delete_row").click(function(){
>     	 if(i>5){
> 		 $("#addr"+(i-1)).html('');
> 		 i--;
> 		 }
> 	 });

> });

> </script>
> </body>
> </html>

Please look closer. Hint(s)

<form role="form" action="insertEstimate.php" me369*thod="post">
<input type="text" class="form-control" id="" placeholder="Enter Title">
<textarea class="form-control" rows="3" id="" placeholder="Enter EST. DATED">
<textarea class="form-control" rows="3" id="" placeholder="Enter Client Name"
<tr id='addr0'>
<tr id='addr0'>

Disregarding all the errors not in the form, the form will not work with those errors and without input name attributes

1 Like

Creating any PHP scripts for this form would be a complete waste of time because it will never work until you fix the errors in your html.
True, browsers are very forgiving of invalid code, but the errors here will not allow the form to function.
When the validator gives you the all-clear, then you will be good to go with the php.

Is that the code that produces the form you showed in the opening post? It doesn’t seem to match the number of columns in the input table, nor the titles above them.

You cannot have more than one attribute with the same ID, and as @mittineague pointed out, you’ve got several with id=“addr0” in there, which will confuse matters.

I’m no javascript expert, but it seems to me that while the main form with multiple entries has a series of form inputs called name0 and PTG0, name1 and PTG1 and so on, it looks like the “add row” button is going to add a pair of inputs called name and mail with numbers on the end - is this correct?

Either way, the PHP won’t really alter once you’ve got the HTML code working. It’s just a case of running through checking for the existence of the form variables until you hit one that’s empty, and assume that’s the last line. Or, decide of a maximum number of lines to add, and run through that many lines processing any that are filled in, which takes into account that your users might leave blank lines for some reason. Or, to make it a little nicer, add a hidden form field for “maximum number of lines” and alter your javascript to update that with the value of i whenever it changes.

If you use the html input naming convention of <input type="text" name="name[]"> you could probably make things a little easier, as the data would be submitted as an array, and you can just loop around the contents of the array using the count() function until all entries are processed.

2 Likes

It looks like you formatted the code nicely now with indents, etc but the errors are still there. Look at the line I quoted: What is me3698thod ?

If we gave you the logic to process the form, and it didn’t work because of errors in the form, what’s the point. Try that validator after you remove the > from the beginning of each line of your code.

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.