HTML input field OUTSIDE of a form

HtmlFormsInputLayout

Html Problem Overview


I have a form with a set of inputs, and I want my page to refresh when one of them changes. I have a second set of inputs on the OTHER side of the page, and the css layout doesn't make it convenient for me to put them in the same <form> </form> tag. I was wondering if there is a way that I can make sure those "inputs" that are located outside of the <form> tag are still associated with that form.

Is there some way we can assign a "form id" to the inputs?

Html Solutions


Solution 1 - Html

In HTML5, you can use the form attribute:

> A form-associated element is, by default, associated with its ancestor form element, but may have a form attribute specified to override this. > > If a 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.

Example:

<form id="myform">
    <input id="something" type="text">
</form>

<button form="myform" type="submit">Submit that form over there</button>

You should however make sure that it is clear to the user that these visually separated form elements are in fact connected.

Solution 2 - Html

<input type="text" form="myform" /> worked for me.

Update
This worked great with FireFox, however gave me trouble in IE 11 as the form attribute is not recognized with IE (as of writing this).

I had to just set a hidden input field inside the form, and transferred value to hidden input field from input outside form; with onclick using jQuery.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestiondlitwakView Question on Stackoverflow
Solution 1 - HtmlYouView Answer on Stackoverflow
Solution 2 - Htmleaglei22View Answer on Stackoverflow