how to set form attribute on a createElement input with Javascript

Question

can someone please help me out? I'm trying to create an input dynamically with this function, but the "form" attribute is not being set.

function addInput(parentID,inputNAME) {
    var padre = document.getElementById(parentID);
    var container = document.createElement("input");
    container.type = "text";
    container.name = inputNAME;
    container.value = "";
    container.form = 'extra';
    var enter = document.createElement("br");
    padre.appendChild(container);
    padre.appendChild(enter);
}

I've also tried with this:

container.formName = 'extra';
container['form'] = 'extra';
container.attributes['form'] = 'extra';
container.createAttribute('form','extra')

EDIT:
Answer:
container.setAttribute("Form",'extra');

What are you trying to accomplish? Your setAttribute is setting a custom attribute on the element. I think you should describe what the end goal is. — user1106925
– user1106925, Commented Jun 30, 2012 at 23:59
Your setAttribute() works in FF but it has no effect as this is unrelated to the property form which, as the answer says, is implicitly set to the form you append the field to. — Mitya
– Mitya, Commented Jul 1, 2012 at 0:01
The form attribute is new in HTML5, it allows you to associate a form field with an arbitrary form. — Neil
– Neil, Commented Jul 1, 2012 at 0:02
Sorry for the lack of context. I'm using the form attribute in HTML5 to prevent the elements from being displayed in the URL if the user decides to do something else instead of submitting the info. I'm using form > PHP for navigation. — Manatax
– Manatax, Commented Jul 1, 2012 at 22:57

Manatax · Accepted Answer · 2012-07-01 22:58:55Z

9

I've used

container.setAttribute("Form",'extra');

and it appears to be working in FF, Chrome and Opera.

answered Jul 1, 2012 at 22:58

Manatax

4,2436 gold badges32 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RobG · Accepted Answer · 2012-07-01 06:02:09Z

2

Dunno why "am not i am" delete his/her answer, it is mostly correct. The form property is specified in the DOM 2 HTML spec as readonly and references the form that a form control is in. If it isn't in a form, it will be undefined.

The form attribute is new in HTML5 and is intended to associate a control with a form other than the one it is in. This is intended to be used for nested forms.

Setting a form attribute on an input element may have unpredictable results. In browsers conforming to HTML5, if the value of the form attribute is the ID of another form in the document, the control will be associated with that form so its form property is a reference to the form and its form attribute will be a string (the ID of the associated form). Otherwise, the attribute value will not be reflected in the control's form DOM property but may keep the attribute value as set.

IE has always messed up attributes and properties, IE 6 replaces the form property with the attribute value regardless. Maybe later versions behave differently, perhaps one of them supports HTML5.

The following may help:

<form id="form0">
  <div>
    <input type="button" form="form1" onclick=
      "alert('form property is: ' + this.form + ' ' + this.form.id + 
             '\nform attribute: ' + (typeof this.getAttribute('form')) +
             ' ' + this.getAttribute('form'))
      " value="Show form property  and attribute">
  </div>
</form>
<form id="form1"><div></div></form>

edited Jul 1, 2012 at 6:02

answered Jul 1, 2012 at 2:07

RobG

148k32 gold badges180 silver badges216 bronze badges

3 Comments

Manatax Over a year ago

Was there anything incorrect about my question? I was asking about the form attribute... A form-associated element is, by default, associated with its nearest ancestor form element, but may have a form attribute specified to override this.

RobG Over a year ago

I was just pointing out the difference between the form attribute and property, something that confounds many web developers (including those developing IE). The form attribute (as a standard attribute) is new, so browser support varies and so will results. You don't state what you expect setting it to do, so hard to say why it isn't doing what you want. Dunno who gave the question a -1.

RobG Over a year ago

Oh, and IE 8 is like IE 6, setting a form attribute sets the form property to same string value whether or not it's the ID of a form.

Collectives™ on Stack Overflow

how to set form attribute on a createElement input with Javascript

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related