棘手的表单提交[重复]

Posted 2023-05-09

【中文标题】棘手的表单提交[重复]

【英文标题】：Tricky form submission [duplicate]

【发布时间】：2020-10-26 17:26:26

【问题描述】：

如何通过使用按钮 2 绕过所需属性来提交表单

就像我有按钮 2 和按钮 1

我想通过点击按钮 2 提交表单并绕过所需属性

并且两个按钮都必须有 type=submit

<form method="POST">
  <input name="try" required>
  <button type="submit">button 1</button>
  <button type="submit">button 2</button>
</form>

【问题讨论】：

所以您希望使用button 2 提交表单，但忽略文本输入字段上的required 属性？

【参考方案1】：

您可以使用formnovalidate

<form method="POST">
  <input name="try" required>
  <button type="submit">button 1</button>
  <button type="submit" formnovalidate>button 2</button>
</form>

【参考方案2】：

使用一些简单的 javascript 应该允许您使用按钮 2，但忽略分配给文本字段的 required 属性。

document.querySelectorAll('button')[1].addEventListener('click',function(e)
  e.preventDefault();
  this.parentNode.try.required=false;
  this.parentNode.submit();
)

<h2>submit test</h2>
        
<form method="POST">
  <input type="text" name="try" required />
  <button type="submit">button 1</button>
  <button type="submit">button 2</button>
</form>

【参考方案3】：

试试

<form method="POST">
  <input name="try" required>
  <button type="submit">button 1</button>
  <button type="submit" value="ignore" >button 2</button>
</form>