동적으로 숨겨진 필드를 양식에 추가하는 방법은 무엇입니까?

Question

나는 OptimizePress (wordpress 테마)를 사용합니다. 옵트 인 형식이 좋지만 유감스럽게도 UI를 통해 숨겨진 양식 필드를 추가하는 방법은 없습니다. 각 페이지마다 맞춤 스크립트를 추가 할 수있는 옵션이 있습니다.

미리 정의 된 숨김 필드를 양식에 동적으로 추가하려면 어떻게해야합니까? 양식에 ID가 없습니다. 다음과 같은 것이 작동하지만 양식 ID가 없을 때 어떻게 할 수 있습니까?

var input = document.createElement("input"); 

input.setAttribute("type", "hidden"); 

input.setAttribute("name", "name_you_want"); 

input.setAttribute("value", "value_you_want"); 

//append to form element that you want . 
document.getElementById("formname").appendChild(input); 

이것은 페이지의 유일한 양식입니다.

아래 예제 중 일부를 사용하면 type = hidden : http://jsfiddle.net/eLazhj3d/1과 작동하지 않습니다.

하지만 type = text : http://jsfiddle.net/eLazhj3d/2에서 작동합니다.

document.querySelector("form").appendChild(input); 

가 form 어떤 요소를 얻을 것이다 : 귀하의 경우, 그래서 document.querySelector() 기능을 사용하면 CSS를 선택베이스를 사용하는 모든 요소를 ​​타겟팅 할 수 있습니다 사용

document.forms[0].appendChild(input); 

Answer 1

같은 시도 꼬리표. 당신이 페이지에 하나의 양식 태그가있는 경우

Query Selector Docs

Answer 2

:

Answer 3

, 당신은 단지 첫 번째 인덱스에있는 요소를 얻을, 그것은 배열을 반환합니다

document.getElementsByTagName("form")[0]; 

을 사용할 수 있습니다

Answer 4

당신이 할 수있는 배열을 리턴하는 getElementsByTagName을 사용하십시오.

이 있다면 페이지의 첫 번째 형태는

document.getElementsByTagName('form')[0].appendChild(input); 

Answer 5

같은 것이 여기에 작업 (보여주기 위해 눈에 보이는 텍스트 필드) 바이올린의 것 : 사용

:

document.querySelector("form").appendChild(input); 

http://jsfiddle.net/s55snxtn/

코드 : HTML :

<form action=""><input type="text"/> 
</form> 

자바 스크립트 : 페이지에 하나의 양식을

var input = document.createElement("input"); 

input.setAttribute("type", "text"); 

input.setAttribute("name", "name_you_want"); 

input.setAttribute("value", "value_you_want"); 

//append to form element that you want . 
document.querySelector("form").appendChild(input);