如何在不刷新文本框的情况下将输入字段数据保存到文本文件

Question

我正在做一个设定目标的东西，为了显示你的进步，我使用了进度元素。我想将 php/js/other 的目标保存到服务器上名为 user.txt 的 .txt 文件中。我已经尝试过 Write server text files with Ajax and PHP write file from input to txt 显示了我想要的内容，但我只想要 2 个输入字段而不是表单标签有什么办法可以合并这 2 个文件，将我的 2 个字段中的数据保存到文本文件中 (user.txt) 这是我的代码：

function myFunction() {
  var x = document.getElementById("myTextarea").value;
  document.getElementById("myProgress").value = x;
}

function myFunction2() {
  var x = document.getElementById("myTextarea2").value;
  document.getElementById("myProgress").max = x;
}

progress {
  color: #0063a6;
  font-size: .6em;
  line-height: 1.5em;
  text-indent: .5em;
  width: 30em;
  height: 3em;
  border: 1px solid #0063a6;
  background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h3>Goal Progress:</h3>
<progress id="myProgress" value="0" max="100">
</progress>

<hr>
<input type="text" id="myTextarea"></input>
<button onclick="myFunction()">Add</button>
<hr>
<input type="text" id="myTextarea2" />
<button onclick="myFunction2()">Set Goal</button>
<hr>

Answer 1

我终于解决了我的困惑paradyme：

<html>
<body onload="timer=setTimeout('myFunction2(); myFunction();',3000)">
<style>
progress {
  color: #0063a6;
  font-size: .6em;
  line-height: 1.5em;
  text-indent: .5em;
  width: 30em;
  height: 3em;
  border: 1px solid #0063a6;
  background: #fff;
}
</style>
<h3>Goal Progress:</h3>
<progress id="myProgress" value="0" max="100">
</progress>

<hr>
<form action="form.php" method="POST">
add money:
<input type ="text" name="field1" id="myTextarea"></input>
<hr>
Goal:
<input type ="text" name="field2" id="myTextarea2"/>
<input type="submit" name="submit" value="Save Data">
</form>
<hr>
<button onclick="myFunction2(); myFunction();">show new progress</button>
<script>
function myFunction() {
    var x = document.getElementById("myTextarea").value;
    document.getElementById("myProgress").value = x;
}
function myFunction2() {
    var x = document.getElementById("myTextarea2").value;
    document.getElementById("myProgress").max = x;
}
</script>
</body>
</html>

如何在不刷新文本框的情况下将输入字段数据保存到文本文件

how to save input field data to text file without flushing out the textboxes

html

css

input

progress-bar