0

I`m trying to make a form that has 3 inputs:

  • image (file) upload
  • 1st text field
  • 2nd text field (that saves entered text as .txt file and displays a link in the third column)

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>
           &lt;<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.

Sam Pirelli
  • 77
  • 1
  • 10
  • do you want to keep the data for ever? –  Sep 19 '15 at 01:41
  • You can do this on the client if you don't need to store the results: http://stackoverflow.com/questions/3665115/create-a-file-in-memory-for-user-to-download-not-through-server – tragle Sep 19 '15 at 01:48
  • @Dagon [Forever and ever, *amen*](http://www.youtube.com/watch?v=sgJXbIP83A8) – Funk Forty Niner Sep 19 '15 at 01:59
  • See http://stackoverflow.com/questions/31163951/how-to-dynamically-save-file-using-nodejs-or-js-websites – guest271314 Sep 19 '15 at 02:57
  • Yes, I would like to keep the data forever, in other words it will be like a catalog to which new data is constany added. – Sam Pirelli Sep 19 '15 at 06:38

1 Answers1

0

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.

DC319
  • 119
  • 1
  • 3