使 javascript 在表单中的非提交按钮上工作答案

【问题标题】：make javascript work on a non submit button in form使 javascript 在表单中的非提交按钮上工作
【发布时间】：2021-08-16 23:17:00
【问题描述】：

我有一个包含两个 div 的表单。一个正常显示，一个隐藏。第一个表单有输入元素，我在 html 中有它们的要求。如果用户填写第一个表单并按下按钮，第一个 div 向上滑动，第二个 div 向上滑动slideDown()。当用户按下第二个 div 中的按钮时，它会提交表单。

问题是要求用户填写所有输入的 javascript 在具有输入的 div 上不起作用，因为它只有按钮 slideup() 第一个 div 和 slideDown() 第二个 div 具有实际提交按钮。

如果我的第一个按钮类型为 submit，它将提交表单而不显示第二个 div，并立即重定向到下一页。

如何使 JavaScript 在第一个按钮上工作，但在第二个按钮上提交？我希望我以正确的方式解释了所有这些。

<form>

  <div id="choosing">

    //form inputs required
    <button type="button" id="show">

  </div> 
  
  <div id="confirmation">

    //irrelevant stuff
    <button type="submit">

  </div>

</form>

javascript

<script> 
$('#show').click(function(e) {
    
  $("#choosing").slideUp();
  $("#confirmation").slideDown();
</script>

【问题讨论】：

您的意思是在调用slideUp() 并能够提交表单之前，首先要在#choosing div 中验证输入？
是的，我希望它在#choosing 中得到验证并在#confirmation 中提交
那么，如果您包含需要验证的输入，那将是有意义的。然后我们可以看到应该如何进行验证，因为不幸的是它不是“一刀切”的解决方案。请编辑您的问题并包含与您的问题相关的任何 HTML 和 JS。

标签： javascript html

【解决方案1】：

从您的问题中，我了解到您想要的是实施确认步骤。您可以在下面找到一个可以帮助您实现目标的简单实现

const form = document.querySelector('form');
const confirm = document.querySelector('#confirm');
const cancel = document.querySelector('#cancel');
const validation = document.querySelector('.validation');

form.addEventListener('submit', function (ev) {
  ev.preventDefault();
  validation.classList.add('validation-show');
});


confirm.addEventListener('click', function (ev) {
  validation.classList.remove('validation-show');
 
  // send your data
  // by serializing the form (e.g new FormData(form));

  
  // reseting form once you have sent your data
  form.reset();
});

cancel.addEventListener('click', function (ev) {
  validation.classList.remove('validation-show');
});

input {
  box-sizing: border-box;
  display:block;
  width: 100%;
  margin-bottom: 1rem;
}

.two-step-form {
  position: relative;
}

.validation {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .2);
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: 
    transform .3s ease-in-out,
    opacity .3s ease-in-out,
    visibility .3s ease-in-out;
  
}

.validation-show {
  transform: translateY(0);
  opacity: 100;
  visibility: visible;
}

.validation-content {
  display: flex;
  flex-direction: column;
  align-items:center;
  
}

<form class="two-step-form">
    <div>
      <input type="text" placeholder="Name" required>
    </div>
    <div>
      <input type="text" placeholder="Email" required>
    </div>
    <div>
      <button type="submit">Send</button>
    </div>
    <div class="validation">
      <div class="validation-content">
        <p>Are you sure?</p>
        <div>
          <button type="button" id="cancel">Cancel</button>
          <button type="button" id="confirm">Confirm</button>
        </div>
      </div>
    </div>
  </form>

【讨论】：