如何使用带有值的javascript发布表单

时间:2016-07-09 15:43:08

标签: javascript forms timer

我做了这个小程序但是如果我等了5秒钟就不会发送这些值。当我在5秒内回答并按下提交按钮它工作正常。我应该学习AJAX和JSON来制作这样的应用程序吗?

<!DOCTYPE html>
<html>
<style>
#myProgress {
  position: relative;
  width: 100%;
  height: 10px;
  background-color: #ddd;
}

#myBar {
  position: absolute;
  width: 0%;
  height: 100%;
  background-color: #F76B4C;
}
</style>
<body>
    <?php
if(isset($_POST['Submit'])){

$achternaam = $_POST['lname'];
echo "De winnaar is: " .$achternaam;}
?>
<p>Vul snel iets in!</p>
<div id="myProgress">
  <div id="myBar"></div>
</div>
<br>
<br>
<form method="post" id="myForm" action="post">
 Last name: <input type="text" name="lname"><br><br>
  <input type="submit" name="Submit" value="Submit">
</form>

<script>

function move() {
  var elem = document.getElementById("myBar");
  var width = 100;
  var id = setInterval(frame, 50);
  function frame() {
    if (width <= 0) {
      clearInterval(id);
      document.forms["myForm"].submit();
    } else {
      width--;
      elem.style.width = width + '%';
    }
  }
}
move()

</script>

</body>
</html>

非常感谢您的建议答案。

1 个答案:

答案 0 :(得分:0)

我找到了解决方案。如果您在表单中使用onclick()javascript,它可以工作。在move()函数中使用相同的函数。