HTML-5 form attribute with class instead of id - Stack Overflow

I am making two separate forms, and would like them to be both linked to the same button. In HTML5, one can link the submit button outside of a form with only an id. Is there any way to include a class, or at least the same id to the parent button?

EDIT: I am NOT submitting any data, only validating if the checkboxes are checked. If a person tries to move onto the next page by clicking the submit button, they have to first tick all the checkboxes. I am working with a disclaimer that needs to be clicked, and nothing more.

Main parent button

<button form="checkedTrue" type="submit">Submit example</button>

Form1:

<form id= 'checkedTrue'>
    Checkbox: <input type='checkbox' id='myCheck' name='test' required>
</form>

Form 2:

<form id= 'checkedTrue'>
    Checkbox: <input type='checkbox' id='myCheck2' name='test2' required>
</form>

I am making two separate forms, and would like them to be both linked to the same button. In HTML5, one can link the submit button outside of a form with only an id. Is there any way to include a class, or at least the same id to the parent button?

EDIT: I am NOT submitting any data, only validating if the checkboxes are checked. If a person tries to move onto the next page by clicking the submit button, they have to first tick all the checkboxes. I am working with a disclaimer that needs to be clicked, and nothing more.

Main parent button

<button form="checkedTrue" type="submit">Submit example</button>

Form1:

<form id= 'checkedTrue'>
    Checkbox: <input type='checkbox' id='myCheck' name='test' required>
</form>

Form 2:

<form id= 'checkedTrue'>
    Checkbox: <input type='checkbox' id='myCheck2' name='test2' required>
</form>

• html
• forms
• checkbox

Share Improve this question Follow edited Nov 18, 2024 at 18:04 JohnLyons asked Nov 18, 2024 at 17:41 JohnLyonsJohnLyons 3311 silver badge44 bronze badges 7

• If you link the submit button to multiple forms, which one is it supposed to submit? You can only submit one form at a time. – Barmar Commented Nov 18, 2024 at 17:54
• This question is similar to: Submit two forms with one button. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. – Justinas Commented Nov 18, 2024 at 17:57
• I am trying to validate the checkboxes as required. The button is more of a link to the other page. To put it simply, one cannot go onto the next page unless all checkboxes are ticked – JohnLyons Commented Nov 18, 2024 at 17:57
• @JohnLyons How do you validate it? Via JS? You don't need any form element to have working input fields and control then via JS – Justinas Commented Nov 18, 2024 at 17:58
• Why do they have to be in two different forms? – Barmar Commented Nov 18, 2024 at 17:58

 |  Show 2 more comments

1 Answer 1

Sorted by: Reset to default 1

in HTML 5 you can simply attach any forms elements to your form,
by the use of form attribute.

myForm.onsubmit = e => 
  {
  e.preventDefault();
  
  console.clear();
  console.log('cbx1 = ', myForm.cbx1.checked ? 'checked' : 'unchecked' );
  console.log('cbx2 = ', myForm.cbx2.checked ? 'checked' : 'unchecked' );
  }

<form id="myForm"></form>
 
<p>Checkbox1:<input type="checkbox" name="cbx1" form="myForm" ></p>
<p>Checkbox2:<input type="checkbox" name="cbx2" form="myForm" ></p>

<button type="submit"  form="myForm" >Submit button</button>