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

JAVASCRIPT / 글쓴이

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

답변

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

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

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

답변

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

답변

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

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

답변

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

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

또는

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

답변

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');

답변

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을 확인 하십시오.

답변