I`m trying to make a form that has 3 inputs:
After entering all 3 inputs, I would like to add the data into existing html table as an additional row.
Could you please suggest where should I start? Do I need to use mySQL in order to accomplish this? Or I can only use PHP and jQuery?
Here is the link to my page: https://jsfiddle.net/tvLn0qw7/
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:white;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:orange;
}
p {
line-height:1.5;
margin:0 0 1em;
}
div#container {
position: relative; /* needed for footer positioning*/
margin: 0 auto; /* center, not in IE5 */
width: 1000px;
background-color: #FFFFFF;
height: auto !important; /* real browsers */
height: 100%; /* IE6: treaded as min-height*/
min-height: 100%;
border: 2px solid #000000;
}
div#header {
padding: 1em;
background: #ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom: 6px double gray;
text-align: center;
margin: 0 auto;
}
div#header p {
font-style:normal;
font-size:1.1em;
margin:0;
}
div#content {
padding:0em 0em 5em; /* bottom padding for footer */
border-color: #000000;
border: 2px;
}
div#content p {
text-align:justify;
padding:0 1em;
}
div#footer {
text-align:center;
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
}
div#footer p {
padding:0.5em;
margin:0;
}
table {
margin: auto;
text-align: center;
color: #0454A8;
font-size: xx-large;
font-style: normal;
font-weight: bold;
border: 1px;
border: #000000;
}
body,td,th {
color: #000000;
}
#upload {
margin: auto;
text-align: center;
}
a:link {
color: #3757A3;
}
</style>
</head>
<body>
<div id="container">
<div id="header"><img src="images/crown1.png" width="108" height="77" alt=""/><br><br>
<p>Databse</p>
</div>
<div id="content">
<br><br>
<table width="600px" border="2" cellpadding="15" cellspacing="5">
<tbody>
<tr>
<th style="font-size: medium" scope="col"><div align="center">SCREENSHOT</div></th>
<th style="font-size: medium" scope="col">#</th>
<th style="font-size: medium" scope="col">TEXT FILE</th>
</tr>
<tr>
<th width="111" style="font-size: medium" scope="col"><div align="center"><img src="images/b0.png" width="200" height="113" alt=""/></div> </th>
<th width="8" style="font-size: medium" scope="col">1</th>
<th width="79" style="font-size: medium" scope="col"><a href="http://futios.net/sample.txt">sample.txt</a></th>
</tr>
</tbody>
</table>
<br><br> <br>
<<br> <br><br>
<div id="upload"><form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
<br><br>
Type #:
<input type="text" size="100">
<br><br>
Insert text here:
<input type="text" size="100">
</form>
</div>
<br><br><br>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
Thank you very much.
You're going to need to use mySQL and PHP to do it. PHP is server side scripting and mySQL is database management. You could use jQuery Ajax, but you are going to need some kind of database to accomplish what you're after.
Edit: Forgot to specify if you want it forever it needs to be in some kind of database.