Question

我有一个小表单，我想验证并禁用提交按钮，以防止多个条目被添加到数据库。

我只检查名字和姓氏是否为2个字符，第二个是表单提交时禁用按钮。

现在唯一的问题是它没有提交表格，只是重新加载页面。

我的代码是：

＆＃13;

function disableButton() {
  /*disable button after form submit*/

  var imgFirstname = document.getElementById('imgFname');
  var imgLastname = document.getElementById('imgLname');

  var firstname = document.forms['form']['txtFname'];
  var lastname = document.forms['form']['txtLname'];
  var errors = 0;

  if (firstname.value.length < 2) {
    firstname.style.border = "1px solid #f50303";
    imgFirstname.src = "images/error.png";
    errors++;
  } else {
    firstname.style.border = "1px solid #06be15";
    imgFirstname.src = "images/success.png";
  }

  if (lastname.value.length < 2) {
    lastname.style.border = "1px solid #f50303";
    imgLastname.src = "images/error.png";
    errors++;
  } else {
    lastname.style.border = "1px solid #06be15";
    imgLastname.src = "images/success.png";
  }

  firstname.addEventListener('blur', fNameVerify, true);
  lastname.addEventListener('blur', lNameVerify, true);

  function fNameVerify() {
    if (firstname.value.length > 1) {
      firstname.style.border = "1px solid #06be15";
      imgFirstname.src = "images/success.png";
    } else {
      firstname.style.border = "1px solid #f50303";
      imgFirstname.src = "images/error.png";
    }
  }

  function lNameVerify() {
    if (lastname.value.length > 1) {
      lastname.style.border = "1px solid #06be15";
      imgLastname.src = "images/success.png";
    } else {
      lastname.style.border = "1px solid #f50303";
      imgLastname.src = "images/error.png";
    }
  }

  if (errors == 0) {
    // document.getElementById("idBtnAdd").disabled = true;
    document.forms["form"].submit();
    return true;
  } else {
    return false;
  }
}

＆＃13;

<form name='form' onsubmit='return disableButton();' method='post'>
  <label for='idFirstname'>First Name:*</label>
  <input id='idFirstname' type='text' name='txtFname'>
  <img id='imgFname' src='images/transparent.png'>

  <label for='idLastname'>Last Name:*</label>
  <input id='idLastname' type='text' name='txtLname'>
  <img id='imgLname' src='images/transparent.png'>

  <label for='idPhone'>Phone (Optional):</label>
  <input id='idPhone' type='text' name='telPhone'>
  <img id='imgPhone-error' src='images/transparent.png'>
  <button id='idBtnAdd' type='submit' name='btnAdd'>Add Client!</button>
</form>

＆＃13;

Answer 1

没有为表单指定action属性。你得到的结果没有错。

更新

因为您故意说该页面是表单的目标（操作）本身，所以不包括action属性不是问题。

由于已禁用的元素未被浏览器发布，因此#btnAdd未发布的错误出现了它的设计。请查看此信息以获取更多信息：This variation

有两种解决方法：

创建一个具有相同名称/值的隐藏元素，并仅禁用可见元素（您可以在jquery的$(":visible")或not(":hidden")选择器的帮助下实现此目的）。这样，隐藏的活动元素将根据需要发布。
在表单中添加隐藏的输入/按钮，＆amp;通过该元素的帮助检查表单提交。例如if(isset($_POST['newElem'}){...}

JavaScript表单验证未提交，页面只是重新加载

1 个答案:

更新