[SOLVED] HTML-5 form attribute with class instead of id

HTML-5 form attribute with class instead of id

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>

Solution

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>