主页 / coding / 问题 / 78941840
Accepted
gatorreina
Asked: 2024-09-03 03:29:50 +0800 CST

当条件满足时无法让 JavaScript 提交表单

  • 772

我尝试使用 JavaScript 来确保标签中的四个输入都相互匹配，如果匹配则提交表单或至少允许表单提交。但是，即使满足 else 条件，表单也不会提交。

$(document).ready(function() {
  $('#bca').submit(function(e) {
    var form = bca;
    e.preventDefault();
    // Check Passwords are the same
    if ($('#InitialsP1').val() != $('#InitialsP2').val() || $('#InitialsP2').val() != $('#InitialsP3').val()) {
      alert('Fields do not match. Correct Fields where necessary');
    } else {
      document.getElementById("bca").submit();
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="invoice-box">
  <form id="bca" action="bca" method="post">
    <input id="InitialsP1" name="InitialsP1" type="text"
          placeholder="Initials" size="5" value="" required 
          style=”float: right”>
    <input id="InitialsP2" name="InitialsP2" type="text"
          placeholder="Initials" size="5" value="" required 
          style=”float: right”>
    <input id="InitialsP3" name="InitialsP3" type="text"
          placeholder="Initials" size="5" value="" required 
          style=”float: right”>
    <input id="InitialsP4" name="InitialsP4" type="text"
          placeholder="Initials" size="5" value="" required 
          style=”float: right”>
    <div class="form-group">
      <div class="col-md-12 text-center">
        <button id="submit" type="submit" class="btn btn-primary btn-lg">Submit</button>
      </div>
    </div>
  </form>
</div>

javascript

3 个回答

  1. Best Answer

    您遇到的初始问题是onclick="getSignature();"由于它不存在而引发错误。

    当您提交表单时，您还会在控制台日志中收到错误“提交不是函数”（您可以从代码片段中提交表单时看到此错误）：

    {
  "message": "Uncaught TypeError: document.getElementById(...).submit is not a function",
  "filename": "https://stacksnippets.net/js",
  "lineno": 46,
  "colno": 38
}

    这与提交按钮上的 id="submit" 存在某种冲突，导致表单无法提交。如果您将提交按钮 html 更改为

    <button id="btn-submit" type="submit" class="btn btn-primary btn-lg">Submit</button>

    它应该可以工作。

    • 1

  2. 您的表单已经使用自动 HTML5 验证（使用属性required），
    您必须在 4 个元素上添加相等性验证。

    操作如下：

    const
  myForm = document.querySelector('#bca')
, errMsg = { badField : `this Field doesn't match.` }
, setError = elm =>
    {
    elm.setCustomValidity( errMsg.badField );
    elm.oninput =_=>
      {
      elm.setCustomValidity(''); // clear error message
      elm.oninput = null;        // self remove setError assignation
      }
    };

myForm.onsubmit = e =>
  {
  let ErrField = null;  

  if ( badEQ( myForm.InitialsP2 )
    || badEQ( myForm.InitialsP3 )
    || badEQ( myForm.InitialsP4 )
    ) {
    setError( ErrField );
    myForm.reportValidity();
    return false
    }
  
  function badEQ( fielElm )
    {
    let notEQ = myForm.InitialsP1.value !== fielElm.value;
    if (notEQ) ErrField = fielElm;
    return notEQ;
    }
  }
    label {
  display   : block;
  margin    : .6rem 0;
  font-size : .8rem;
  }
label > input {
  display   : block;
  font-size : 1rem;
  width     : 8rem;
  padding   : 0 1rem;
  }
button {
  width: 5em;
  }
    <form id="bca" action="bca" method="post">
  <label> 
    Initials:
    <input name="InitialsP1" type="text" value="" autocomplete="off" required >
  </label>
  <label> 
    Initials:
    <input name="InitialsP2" type="text" value="" autocomplete="off" required >
  </label>
  <label> 
    Initials:
    <input name="InitialsP3" type="text" value="" autocomplete="off" required >
  </label>
  <label> 
    Initials:
    <input name="InitialsP4" type="text" value="" autocomplete="off" required >
  </label>

  <button>Submit</button>
  <button type="reset">Reset</button>
</form>

    • 0

  3. 如果您想先进行验证，然后提交表单，因此可以通过将提交事件更改为按钮的单击事件来完成。

    $(document).ready(function() {
  $('#submit').click(function(e) {
    // Check Passwords are the same
    if ($('#InitialsP1').val() != $('#InitialsP2').val() || $('#InitialsP2').val() != $('#InitialsP3').val()) {
      alert('Fields do not match. Correct Fields where necessary');
    } else {
      document.getElementById("bca").submit();
    }
  });
});
    <button id="submit" class="btn btn-primary btn-lg">Submit</button>

    并且不需要 onclick="getSignature();"

    • 0

相关问题