jQuery-즉시 숨겨진 양식 요소 만들기

333

jQuery를 사용하여 숨겨진 입력 양식 필드 를 동적으로 작성하는 가장 간단한 방법은 무엇입니까 ?

613

$('<input>').attr('type','hidden').appendTo('form');

두 번째 질문에 대답하려면 :

$('<input>').attr({
    type: 'hidden',
    id: 'foo',
    name: 'bar'
}).appendTo('form');

— 데이비드 헬스 싱
소스

56

입력 유형을 만든 후에 변경하려고하면 IE가 질식합니다. $('<input type="hidden">').foo(...)해결 방법으로 사용하십시오 .

— Roy Tinker

4

또한 jQuery 문서는 DOM 조작이 비싸므로 여러 입력을 추가 해야하는 경우 $ (this) .append (hidden_element_array.join ( ''))와 같은 것을 사용하여 입력을 모두 한 번 추가하십시오.

— Kedar Mhaswade

1

방금 jQuery 1.6.2 로이 방법을 시도하고 Firefox 7.0.1 에서이 오류를 수신했습니다. "포착되지 않은 예외 : 유형 속성을 변경할 수 없습니다"이러한 조건에서 attr 방법을 사용하여 유형 속성을 변경할 수없는 것 같습니다. 나는 지금 아래 방법을 시도하고 있습니다 ...

— Mikepote

.prop새로운 API 릴리스에서 이와 동일한 접근 방식이 새로운 기능 과 함께 작동 합니까?

— SpaceBison

3

많은 사람들이 생각하는 것처럼 @SpaceBison .prop은 "새로운 .attr" 것이 아닙니다 . 여전히 .attr속성을 설정 하는 데 사용해야 합니다.

— David Hellsing

138

$('#myformelement').append('<input type="hidden" name="myfieldname" value="myvalue" />');

— 마크 벨
소스

1

오래된 IE 에서이 답변을 테스트 했습니까?

— Arthur Halma

11

개인적으로 이것은 DOM 조작 / 함수 호출이 적기 때문에 허용되는 답변보다 훨씬 나은 접근 방식이라고 생각합니다.

— PaulSkinner

3

@PaulSkinner 주어진 경우에 대해 그렇습니다. 그러나 항상 그렇지는 않습니다. 여기를보세요 stackoverflow.com/a/2690367/1067465

— Fernando Silva

34

David와 동일하지만 attr ()이 없습니다.

$('<input>', {
    type: 'hidden',
    id: 'foo',
    name: 'foo',
    value: 'bar'
}).appendTo('form');

— 세르게이 오니 첸코
소스

3

이 방법으로 태그를 채우는 이름이 있습니까?

— DLF85

입력을 한 번만 추가하는 방법? 존재하는 경우 동일한 속성으로 새 값을 계속 입력합니다.

— Snow Bases

매우 능률적으로, 나는 그것을 좋아합니다.

— Jacques

27

더 많은 속성을 추가하려면 다음과 같이하십시오.

$('<input>').attr('type','hidden').attr('name','foo[]').attr('value','bar').appendTo('form');

또는

$('<input>').attr({
    type: 'hidden',
    id: 'foo',
    name: 'foo[]',
    value: 'bar'
}).appendTo('form');

— 슬립 스트림
소스

콘솔 오류가 발생했습니다 Unexpected identifier.

— Prafulla Kumar Sahu

두번째 코드는 "id"가 foo1, foo2 등과 같은 동적으로 생성 될 필요가있는 것 같습니다

— Web_Developer

5

function addHidden(theForm, key, value) {
    // Create a hidden input element, and append it to the form:
    var input = document.createElement('input');
    input.type = 'hidden';
    input.name = key;'name-as-seen-at-the-server';
    input.value = value;
    theForm.appendChild(input);
}

// Form reference:
var theForm = document.forms['detParameterForm'];

// Add data:
addHidden(theForm, 'key-one', 'value');

— 사우라 찬드라 파텔
소스

2

무엇입니까 'name-as-seen-at-the-server'?

— SaAtomic

1

JSFIDDLE 작업

당신의 양식이 같은 경우

<form action="" method="get" id="hidden-element-test">
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="Submit">
</form> 
    <br><br>   
    <button id="add-input">Add hidden input</button>
    <button id="add-textarea">Add hidden textarea</button>

숨겨진 입력 및 텍스트 영역을 추가하여 다음과 같이 구성 할 수 있습니다.

$(document).ready(function(){

    $("#add-input").on('click', function(){
        $('#hidden-element-test').prepend('<input type="hidden" name="ipaddress" value="192.168.1.201" />');
        alert('Hideen Input Added.');
    });

    $("#add-textarea").on('click', function(){
        $('#hidden-element-test').prepend('<textarea name="instructions" style="display:none;">this is a test textarea</textarea>');
        alert('Hideen Textarea Added.');
    });

});

여기에서 작동하는 jsfiddle을 확인 하십시오.

— Subodh Ghulaxe
소스