Tricky form submission

Question

how can you submit a form by bypassing the required attribute using button 2

like i have button 2 and button 1

i want to submit form by clicking button 2 and bypass required attribute

and both buttons must have type=submit

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

so you wish to submit the form, using `button 2` but ignore the `required` attribute on the text input field? — Professor Abronsius, Jul 06 '20 at 14:50

score 0 · Answer 1 · answered Jul 06 '20 at 14:55

Using some simple Javascript should allow you to use button two but ignore the required attribute assigned to the text field.

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>

score 0 · Accepted Answer · answered Jul 06 '20 at 14:57

0

You can use formnovalidate

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

answered Jul 06 '20 at 14:57

Akhil

1,403
7
19

score 0 · Answer 3 · answered Jul 06 '20 at 14:58

0

Try

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

answered Jul 06 '20 at 14:58

Nicholas Stom

322
1
3
10

Tricky form submission

3 Answers3