Question

我有一个带有几个按钮的表单开始倒计时。倒计时工作。但表格不会提交。

var running = false
var endTime = null
var timerID = null

function startTimer(duration) {
  running = true
  now = new Date()
  now = now.getTime()
  // change last multiple for the number of minutes
  endTime = now + (1000 * 60 * duration)
  showCountDown()
  document.getElementById("submit").disabled = true
}

function showCountDown() {
  var now = new Date()
  now = now.getTime()
  if (endTime - now <= 0) {
    stopTimer('Einde')
    formSubmit()
    //  of alert("Time is up.  Put down your pencils.")
  } else {
    var delta = new Date(endTime - now)
    var theMin = delta.getMinutes()
    var theSec = delta.getSeconds()
    var theHour = delta.getHours() - 1
    var theTime = ((theMin < 10) ? "0" : "") + theMin
    theTime += ((theSec < 10) ? ":0" : ":") + theSec
    document.forms[0].timerDisplay.value = "resttijd: " + ((theHour < 1) ? "0" : theHour) + ":" + theTime
    if (running) {
      timerID = setTimeout("showCountDown()", 1000)
    }
  }
}

function stopTimer(status) {
  clearTimeout(timerID)
  running = false
  document.forms[0].timerDisplay.value = status
  document.getElementById("submit").disabled = false
}

function formSubmit() {
  //activate submit button
  document.getElementById("submit").disabled = false;
  //and submit form
  document.getElementById("MyForm").submit();
}

input[type=submit] {
  padding: 5px 15px;
  background: red;
  color: #ffffff;
  font-weight: bold;
  border: 0 none;
  cursor: pointer;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

input[type=text] {
  background: aliceblue;
  color: green;
  font-weight: bold;
}

textarea {
  background: aliceblue;
  color: green;
  font-weight: bold;
}

h2 {
  color: red;
}

<!DOCTYPE html>

<HEAD>
  <TITLE>Count Down Timer</TITLE>
</HEAD>

<BODY>
  <center>
    <h2>Artikel plaatsen</h2>
  </center>
  <FORM name="MyForm" id=MyForm " action="PlaatsArtikel.php " onkeypress="return event.keyCode !=1 3; ">
      <center>
      Kopzin<br>
      <INPUT TYPE="text " NAME="KopArtikel " PLACEHOLDER="Kopzin " SIZE="100 " required ><br><br>
      Tekst<br>
      <TEXTAREA ROWS="8 " COLS="100 " NAME="BodyArtikel " PLACEHOLDER="Tekst " required></TEXTAREA>
     <br><hr width="65% ">
     Klik "verstuur nu " of klik op een van onderstaande knoppen voor uitgesteld verzenden.<br>
     <INPUT TYPE="button " NAME="startTime " VALUE="1 minuut " onClick="startTimer(1) ">
     <INPUT TYPE="button " NAME="startTime " VALUE="1 uur " onClick="startTimer(60) ">
     <INPUT TYPE="button " NAME="startTime " VALUE="3 uur " onClick="startTimer(180) ">
     <INPUT TYPE="button " NAME="startTime " VALUE="6 uur " onClick="startTimer(360) ">
     <INPUT TYPE="button " NAME="startTime " VALUE="9 uur " onClick="startTimer(540) ">     
     <INPUT TYPE="button " NAME="startTime " VALUE="12 uur " onClick="startTimer(720) ">     
     <br><br>
     <INPUT TYPE="button " NAME="clearTime " VALUE="Onderbreek Timer " onClick="stopTimer( 'Gestopt!') " style="color:red; ">
     <INPUT TYPE="text " NAME="timerDisplay " VALUE="00:00 " Size="17 ">
     <br><br><hr width="65% "><center>
     <INPUT TYPE="submit " id="submit " NAME="submit " Value="Verstuur Nu " >
    </FORM>
    </BODY>
    </HTML>

所以表单是加载器。用户可以添加文本，标题和正文。然后hè可以选择计时器或直接提交。 “提交”按钮工作正常，表单为executeren。计时器按钮启动另一个计时器。但是在零计时器表格应该提交。但事实并非如此。

Answer 1

您的语法错误会破坏表单操作属性，id属性缺少开头引号。

id=MyForm"

Answer 2

试着看看这是否有帮助：

function formSubmit() {
  //activate submit button
  document.getElementById("submit").disabled = false;
  //and submit form => just click submit button
  document.getElementById("submit").click(); 
}

Answer 3

您必须在此提交输入中更改id和name属性的值：

<INPUT TYPE="submit" id="submit" NAME="submit" Value="Verstuur Nu" >

将其更改为“＃34;提交＆＃34;或＆＃34;行动＆＃34;。

但为什么？

如果您在表单中有一个带有id和/或name属性的input元素，您将能够直接引用该输入作为表单的属性

这意味着，使用当前代码，当您使用以下代码在表单上调用.submit()时

document.getElementById("MyForm").submit();

您实际上是在尝试执行HTML元素（提交输入）。

如果您查看控制台，您将看到错误消息：

document.getElementById（...）。submit不是函数

来自Don't Name Your Inputs 'Action' or 'Submit'!

的示例

＆＃13;

// Grab the form
var form = document.getElementById('form');
// Reference the text box directly from the form by its ID or name
console.log(form.textboxid); // -> The input element
console.log(form.textboxname); // -> The input element

＆＃13;

<form id="form" action="url">
  <input type="text" id="textboxid" name="textboxname">
</form>

＆＃13;

倒计时表单不提交正确

3 个答案:

但为什么？

来自Don't Name Your Inputs 'Action' or 'Submit'!