2015-02-06 10 views
10

Così ho incontrato un problema strano ... voglio afferrare l'id di una forma dire:Grab id di una forma che ha un ingresso bambino con un name = "id"

<form id="test"> 
    <input name="id" type="hidden" value/> 
</form> 

Ma l'esecuzione di document.getElementById("test").id non restituisce test come previsto, ma restituisce l'input con name="id". Qualcuno sa cosa sta succedendo qui?

Ecco un violino che riproduce il problema ->http://jsfiddle.net/jascbbfu/

+3

perché è necessario trovare l'id del modulo? ce l'hai già ... – Deep

+0

Hm, nel tuo jsfiddle, ho notato che il nome del secondo input di test, è 'id1'; Scommetto che sta interpretando il '.id' come elemento figlio di quel nome, piuttosto che come un attributo di se stesso. Dare un'occhiata a jsfiddle –

+0

@Deep so che ho l'id, è una prova del concetto ... –

risposta

11

I nomi di controllo modulo vengono utilizzati per creare proprietà denominate del modulo che fa riferimento al controllo. Allora, dove si dispone di:

<form id="test"> 
    <input name="id"> 
</form> 

poi id di proprietà della maschera viene assegnato un riferimento all'elemento input denominato id. Ai controlli del modulo non devono mai essere assegnati nomi uguali alle proprietà standard del modulo, ad es. il seguente:

<form> 
    <input name="submit"> 
</form> 

è impossibile chiamare del form metodo di invio perché form.submit riferimenti di ingresso, non il metodo.

Come osservato in altre risposte, è possibile cambiare il nome a qualcosa che non si scontra con le proprietà forma standard, oppure utilizzare getAttribute. La prima soluzione è preferibile in quanto potrebbe anche portare a nomi più adatti per i controlli del modulo ed evitare l'uso di getAttribute.

+0

Grazie, non sapevo che potresti sovrascrivere attributi del genere, piuttosto hacky; p Probabilmente andrò con getAttribute o aggiungere attributi personalizzati (es. "Column =") perché mi piace l'idea di mappare i miei input di form direttamente al mio database colonne. –

0

E 'a causa di questa linea qui:

<form id="test"> 
    <input name="id" type="hidden"/> <!-- HERE --> 
</form> 

Il browser pensa che si intende l'elemento con il nome di "id" quando si dice:

document.getElementById("test").id // Gets input with the name of "id" 

Quale sarebbe l'elemento <input>. Cambiarlo con un altro nome diverso da id e funzionerà.

2

Quello che succede qui è un vecchio artefatto dai tempi in cui l'HTML era appena stato formalizzato. Si suppone che sieda solo sotto una raccolta nominata, ma i browser hanno deciso di creare l'accesso al collegamento in vari posti casuali. Ad ogni modo, puoi leggere di più qui: http://jibbering.com/faq/notes/form-access/ E una volta sul desktop citerò le parti pertinenti.

+0

Non riguarda l'HTML, riguarda il DOM. – RobG

0

Il JS sembra considerare id come un oggetto figlio nel formato più grande che si sta prendendo in considerazione. Siete alla ricerca per la funzione, getAttribute, questo funziona in JSfiddle:

alert(document.getElementById("test").getAttribute("id")); 
alert(document.getElementById("test2").getAttribute("id")); 

http://jsfiddle.net/jascbbfu/3/

Speranza che aiuta!

Problemi correlati