HTML input field OUTSIDE of a form

Question

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?

You could manually grab their values using javascript on submit. What is stopping you from putting them into the form? Do you have formatting attached to the `
`? — user122211, Jul 10 '11 at 22:28

score 155 · Accepted Answer · answered Jul 10 '11 at 22:32

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.

will this work in angularjs forms and form validation? – Ankit Pandey Mar 19 '19 at 08:51 — Ankit Pandey, Mar 19 '19 at 08:51

eaglei22 · Answer 2 · 2017-12-18T20:35:01.180

46

<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.

edited Dec 18 '17 at 20:35

answered Nov 08 '17 at 01:17

eaglei22

2,589
1
38
53

98

Funny, I stumbled across this as this issue came up again for me. I tried to up-vote, and got the, "You can't vote for your own post." message. Didn't realize I wrote this. past eaglei22 helped future eaglei22 out! – eaglei22 Apr 27 '18 at 15:03
8

Oh, it's your answer again. I remember this comment, but completely forgot about the content of the answer :) – user1201917 Apr 02 '20 at 20:35
1

You are not alone with this of giving likes to your own post, long time forgoten, eaglei22 :D By the way, the form attribute seems to be supported for different type of tags like button, input, label, output (the great forgotten tag), select and textarea. It is supposed to be also available for fieldset, meter and object tags, but browsers seems not to support them, as stated in https://www.w3schools.com/tags/att_form.asp – tomasofen Jan 18 '21 at 13:09
2

Somebody made a joke about that, came to see it. – vmemmap Feb 09 '21 at 13:10

score -2 · Answer 3 · edited Jan 13 '23 at 09:07

<input class="checkbox" id="staff_recruiting" name="company_type" 
    value="staff_recruiting" type="checkbox">
<input type="hidden" value="all" name="keyword" id="search-keyword-input">

$('#search-keyword').keyup(function() { 
    $('#search-keyword-input').val($(this).val());
});

Your problem will be solved bro:

Add a hidden input field in your form.
Using jQuery or JS to change that hidden input field value with that outside input box.
Your page will refresh and your outside box value will be grabbed.

HTML input field OUTSIDE of a form

3 Answers3

Linked