Question posted in
Some documentation to get you started can be found here.

HTML Log System with javascript or maybe php – Apache

Hi I tried to make a log system panel to my website. The code is works fine because if you write the text into the input field it will show up. But if you reload the page it will disappear. So my problem is the disappearing text. I want to do this when I type the text so it doesn’t disappear when the page refreshes. Any idea how to do this? Also I wanna do that if you type the text into the input field and press the add button the text that you typed will appear on other page. I mean there is a page in /log/edit/index.html and the text sould appear on the /log/view/index.html site. I know it’s basically and impossible task but I think It might be possible if the text that you typed into the textfield goes into a .txt file and save it to /log/logs.txt then the /log/view/index.html reads it and show the text from the txt file.
I hope you understand some of what I want to say
Heres the code:

function newElement() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {
    alert("Invalid log! You must write something");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("myInput").value = "";
}
ul {
margin: 0;
padding: 0;
}

/* Style the list items */
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
list-style-type: none;
background: #eee;
font-size: 18px;
transition: 0.2s;

/* make the list items unselectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) {
background: #f9f9f9;
}

/* Darker background-color on hover */
ul li:hover {
background: #ddd;
}

/* Style the header */
.header {
background-color: #0d1426;
padding: 30px 40px;
color: white;
text-align: center;
}

/* Clear floats after the header */
.header:after {
content: "";
display: table;
clear: both;
}

/* Style the input */
input {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 11px;
float: left;
font-size: 16px;
}

/* Style the "Add" button */
.addBtn {
padding: 13px;
width: 250px;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
border-bottom: 1px solid transparent;
}

.addBtn:hover {
background-color: #bbb;
}
    <div class="addlog">
        <div id="myDIV" class="header">
          <h2 style="margin:5px">Update Logs</h2>
          <input type="text" id="myInput" placeholder="Log" maxlength="112">
          <span onclick="newElement()" class="addBtn">Add</span>
        </div>

        <ul id="myUL">

        </ul>
    </div>
Tags:

2

Answers


  1. 0

    I’m not sure why you would want this functionality, but that’s beside the point. There is no real way of doing this except for possibly storing the values in a XML file each time the user hits a key, and then loading the XML file on a refresh.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search