多个 onClick submit() 按钮和多个表单行为不当

Question

我有两个带有两个单独的 onclick submit() 按钮的表单。问题是无论 ID 是什么，只有第一个表格被发送出去。我尝试使用 getElementByClassName 和 Tagname 以及为表单指定不同的名称，但仍然无法正常工作..

<script>
        function submitForm() {
                   document.getElementById("formDelay").submit()
               }
               document.getElementById('formDelayButton').onclick = function() {
                   setTimeout(submitForm, 900);
               };
         
        function submitForm1() {
                document.getElementById("formDelay1").submit()
                  }
            document.getElementById('formDelayButton1').onclick = function() {
                      setTimeout(submitForm, 900);
                  }; 
</script>


<% if(userSecrets.length != 0){ %>
    <p>My shared secrets</p>
    <form action="/mysecrets/delete" method="POST" id="formDelay1">
      <div class="form-group">
        <select class="form" name=" secret">
          <% userSecrets.forEach(function(secret){ %>
          <option value="<%= secret %>"><%= secret %></option>
          <% }); %>
        </select>
    </form>
    <button type="submit" class="button" id="formDelayButton1">Delete Secret</button>
    <%  } %>

    <% if(userSecrets.length == [] ){ %>
    <p>You haven`t shared any of your secrets yet. <br> This is the perfect time to do so!</p>
    <%  } %>

    <form action="/mysecrets" method="POST" id="formDelay">
      <div class="form-group">
        <input type="text" class="form" name="secret" placeholder="What's your secret?">
      </div>
    </form>

    <button type="submit" id="formDelayButton" class="button">share it
    </button>

Answer 1

你有两个函数 submitForm 和 submitForm1 但你总是使用 submitForm.

无论如何你可以做得更好，比如：

document.querySelectorAll('form').forEach(form => {
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    setTimeout(() => {
      form.submit();
    }, 3000);
  });
});

<p>Form 1</p>
<form>
  <button type='submit'>Submit form 1</button>
</form>
<p>Form 2</p>
<form>
  <button type='submit'>Submit form 2</button>
</form>

多个 onClick submit() 按钮和多个表单行为不当

Multiple onClick submit() buttons and multiple forms misbehave

html

javascript

forms

ejs