Multiple form ID's in HTML5's input form attribute
Nowhere in the spec says that the value of the form attribute is a space-separated list of IDs of form elements in the document:
If a reassociateable form-associated element has a form attribute specified, then that attribute's value must be the ID of a form element in the element's owner Document.
Source: WHATWG HTML5 specification
Can input form attribute specify multiple form ids? Or not?
There is no definite affirmative answer. It seams that we can only say that, since nowhere in the w3 consortium specs it is stated that an input can be associated with multiple forms, it implies that it cannot; (and also a conclusion that w3schools info should be taken with a grain of salt as CBroe noted).
When I tested it - using two forms with ids "form1" and "form2", and an 'outside' input element with form-attribute set to form="form1 form2" - this input did not submit with neither of forms. Meaning that, since form-attribute is not exactly set to one form id, it doesn't connect it to any form.
Further in the test I have added a third form with form id="form1 form2". This resulted in input element (which is outside of all of the forms, with form-attribute set to form="form1 form2") to get submitted with this form, but not with form with id="form1" nor with form with id="form2".
Therefore, with my limited knowledge, I dare to make a conclusion:
One input element cannot be associated with multiple forms by specifying space-delimited ids for its form-attribute (or by any other means most likely).
This question is a duplicate of Multiple form ID's in HTML5's input form attribute, but there is a bit more detailed explanation here.
Possible to attach INPUT element to multiple forms?
No, a form control can be associated with only one form.
From w3c specification:
If a reassociateable form-associated element has a form attribute specified, then that attribute's value must be the ID of a form element in the element's owner Document.
You can use a single, large form and decide (on the server) which inputs to pay attention to based on which submit button was pressed.
Two separate forms, with inputs that have same name and id
It is not legal to use the same id property twice on the same page. It does not matter at all if the elements are on the same form or different forms.
They can absolutely have the same name property. Names are what gets sent to your server. You can have fifty elements on the same form with the same name if you want.
But the whole purpose of IDs is that they absolutely must be unique on the page.
So simply make the first one ... id="x1" name="x" ... and the second ... id="x2" name="x" ... and then make your labels point to for="x1" or for="x2"
Selecting a form's information when we have multiple forms with same ids in javascript
ID has to be unique for each single element you should use something else instead of IDs.
Use from's onsubmit event
<form onsubmit="myFunction">...</form>
function myFunction(event) {
event.preventDefault()
var form = event.target
// define your input data
var input1 = $(form).find('[name=input1]').val()
$.ajax(url, { /* your ajax setup */ })
}
How to handle html5 validation if there are two different forms Id in a single page?
Since you're using HTML5 validation, use HTML5 DOM methods:
$(document).ready(function() { // Add the e (event) argument to your event handler... $("#saveBtn").on("click", function(e) { // and call preventDefault() on it to prevent submission of the form. e.preventDefault(); let allValid = true; $("form").each(function (index, form) { allValid = allValid && form.reportValidity(); }); if (allValid) { /*$.ajax({ // ajax code to submit }); */ } });
});form { border: 1px solid blue; }input:invalid { border: 1px solid red; }<!DOCTYPE html><html>
<head> <title></title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script></head>
<body> <div class="container" style="padding-bottom: 20px;"> <h2>Pre Assessment</h2> <div class="card"> <div class="card-body"> <div class="col-md-12" style="float: none;"> <form id="oldForm"> <div class="row"> <div class="form-group col-md-6 assess"> <div class="col-md-12"> <font face="preeti" size="5">s/ lgwf{/0f ug{ kg]{ sf/0f </font> <select class="form-control" name="causeOfExciseAct" id="causeOfExciseAct"> <option value="" selected disabled hidden>Choose here</option> <option value="appeal">Appeal</option> <option value="other">Other</option> </select> </div> </div> <div class="form-group col-md-6"> <div class="row"> <div class="col-md-12 pnbp" style="margin-bottom: 10px;"> <font face="preeti" size="5"> k'g/fj]bgsf] lg0f{o cg';f/ ePsf] eP k'g/fj]bg g+ </font> <input type="text" class="form-control" id="appealId" name="appealId" required /> </div> </div> <div class="row"> <div class="col-md-12 orIf" style="margin-bottom: 10px;"> <font face="preeti" size="5">cGo</font> <input type="text" class="form-control" id="reasonDesc" name="reasonDesc" required /> </div> </div> </div> </div> <!-- for other two field --> <div class="row"> <div class="form-group col-md-3"> <div class="col-md-12" style="margin-bottom: 10px;"> (B.S.) <input type="text" class="form-control" onchange="changeToAd(this.value,document.getElementById('intCalUptoAd').id)" id="intCalUpto" name="intCalUpto" required> </div> </div> <div class="form-group col-md-3"> <div class="col-md-12" style="margin-bottom: 10px;"> <font face="preeti" size="5"> </font>(A.D.) <input type="text" class="form-control" onchange="changeToBs(this.value,document.getElementById('intCalUpto').id)" id="intCalUptoAd" name="intCalUptoAd" required> </div> </div> <div class="form-group col-md-3"> <div style="margin-bottom: 40px;"> (B.S) <input type="text" class="form-control" onchange="changeToAd(this.value,document.getElementById('assessmentDateAd').id)" id="assessmentDate" name="assessmentDate"> </div> </div> <div class="form-group col-md-3"> <div style="margin-bottom: 40px;"> (A.D) <input type="text" class="form-control" onchange="changeToBs(this.value,document.getElementById('assessmentDate').id)" id="assessmentDateAd" name="assessmentDateAd"> </div> </div> </div> </form> <form id="newForm"> <div id="formContainer" class="col-md-12" style="float: none;"> <div style="margin-bottom: 30px;"> <div class="form-group row"> <div class="col-md-1"></div> <div class="col-md-4"> <label>Reason</label> </div> <div class="col-md-2"> <label>Amount</label> </div> <div class="col-md-2"> <label>Penalty</label> </div> <div class="col-md-1">Total</div> <div class="col-md-2">Action</div> </div> <div class="customs-table row"> <div class="col-md-1"> <label>Customs</label> </div> <div class="col-md-4"> <input type="text" class="form-control customReason" required /> </div> <div class="col-md-2"> <input type="number" class="form-control txt customAmount" value="0" name="abc" min="0" required /> </div> <div class="col-md-2"> <input type="number" class="form-control txt customPenalty" value="0" name="abc" min="0" required /> </div> <div class="col-md-1"> <span class="sum">0</span> </div> <div class="col-md-2"> <button type="button" class="add">+</button> <button type="button" class="remove">-</button> </div> </div> <div class="vat-table row"> <div class="col-md-1"> <label>VAT</label> </div> <div class="col-md-4"> <input type="text" class="form-control vatReason" name="vatReason" /> </div> <div class="col-md-2"> <input type="number" class="form-control txt1 vatAmount" value="0" name="vatAmount" min="0" /> </div> <div class="col-md-2"> <input type="number" class="form-control txt1 vatPenalty" value="0" name="vatPenalty" min="0" /> </div> <div class="col-md-1"> <span class="sum">0</span> </div> <div class="col-md-2"> <button type="button" class="add">+</button> <button type="button" class="remove">-</button> </div> </div> <div class="excise-table row"> <div class="col-md-1"> <label>Excise</label> </div> <div class="col-md-4"> <input type="text" class="form-control exciseReason" name="exciseReason" /> </div> <div class="col-md-2"> <input type="number" class="form-control txt2 exciseAmount" value="0" name="exciseAmount" min="0" /> </div> <div class="col-md-2"> <input type="number" class="form-control txt2 excisePenalty" value="0" name="excisePenalty" min="0" /> </div> <div class="col-md-1"> <span class="sum">0</span> </div> <div class="col-md-2"> <button type="button" class="add">+</button> <button type="button" class="remove">-</button> </div> </div> <div id="a"></div> <div class="col-md-12 pull-right"> <label>Total:</label> <b><span id="tot">0</span></b> </div> </div> <button id="saveBtn" class="btn btn-success pull-right">Submit</button> </div> </form> </div> </div> </div> </div></body>
</html>Can a textarea belong to multiple forms?
As this answer states, nowhere on the W3C Spec is stated that the form owner of an element can be a list of IDs. If for some reason, that is working for you, you're still not conforming to standards.
I suggest using jQuery if you want to submit multiple forms at the same time, or duplicate the value of input elements across different forms on submission.
Related Topics
How Could I Play a Shoutcast/Icecast Stream Using HTML5
Assign Variables to Child Template in {% Include %} Tag Django
Textarea to Fill a Parent Container Exactly, with Padding
Set Div to Remaining Height Using CSS with Unknown Height Divs Above and Below
Angular 2 - How to Hide Nav Bar in Some Components
Using "Label For" on Radio Buttons
Firefox 4 Required Input Form Red Border/Outline
Giving Background-Color to Body Applying Whole Page. Why
How to Change Style of Radio and Checkbox Input
How to Colour The List-Style-Type Auto-Generated Numbers
What Is Dom? (Summary and Importance)
How to Make a Div Take The Full Width of The Page When It Is Inside Another Div That Have 90% Width
Flexbox Width Variation with Content, Should Be Fixed Width
How to See Which Srcset Image a Browser Is Using with Browser Developer Tools
How to Display Openweathermap Weather Icon
Typescript: Problems with Type System
Why Do Symbols Like Apostrophes and Hyphens Get Replaced with Black Diamonds on My Website