jQuery의 ".val ()"을 사용하는 양식에서 숨겨진 필드 값 설정이 작동하지 않습니다


188

jQuery를 사용하여 양식에서 숨겨진 필드의 값을 설정하려고했지만 성공하지 못했습니다.

다음은 문제를 설명하는 샘플 코드입니다. 입력 유형을 "텍스트"로 유지하면 아무런 문제없이 작동합니다. 그러나 입력 유형을 "숨김"으로 변경해도 작동하지 않습니다!

<html>

    <head>
        <script type="text/javascript" src="jquery.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("button").click(function() {
                    $("input:text#texens").val("tinkumaster");
                });
            });
        </script>
    </head>

    <body>
        <p>
            Name:
            <input type="hidden" id="texens" name="user" value="texens" />
        </p>
        <button>
            Change value for the text field
        </button>
    </body>

</html>

또한 입력 유형을 "text"로 설정 한 다음 입력 상자에 "display : none"스타일을 사용하여 다음 해결 방법을 시도했습니다. 그러나 이것도 실패합니다! jQuery에 숨겨진 또는 보이지 않는 입력 필드를 설정하는 데 문제가있는 것 같습니다.

어떤 아이디어? 실제로 작동하는 해결 방법이 있습니까?

답변:


316

:text유형 값이 인 입력에 실패합니다 hidden. 그냥 사용하는 것이 훨씬 더 효율적입니다.

$("#texens").val("tinkumaster");

ID 속성은 웹 페이지에서 고유해야합니다. 웹 페이지에서 문제가 발생할 수 있으므로 더 복잡한 선택기를 지정하면 작업 속도가 느려지고 깔끔하게 보이지 않습니다.

에서 예 http://jsbin.com/elovo/edit 에서 귀하의 예제 코드를 사용하여, http://jsbin.com/elovo/2/edit


앤디, 빠른 답변 감사합니다. 실제로 "#texens"를 먼저 사용한 다음 "#input : hidden # texens"를 사용해 보았는데 둘 다 작동하지 않는 것 같습니다. 양식의 입력 유형을 "hidden"에서 "text"로, "#input : hidden : texens"를 "#input : text : texens"로 변경하면 아무런 문제없이 작동했습니다. "#input : text # texens"는 위의 오타였으며 방금 언급 한대로 "#input : hidden # texens"또는 "#texens"여야합니다. 따라서 숨겨진 필드의 값은 변경되지 않는 것 같습니다.
texens

1
@texens : 문제가 다른 곳에 있다고 생각합니다. 내가 연결 한 예제에서 알 수 있듯이 val()숨겨진 입력에서 값이 "변경되지 않음"에서 "변경됨"으로 변경되어 제대로 작동합니다. 값 변경을 확인하는 경고와 함께 위에 붙여 넣은 코드를 포함하도록 예제를 수정했습니다. jsbin.com/elovo/2/edit
Andy E

앤디, 예를 들어 주셔서 감사합니다. 위에서 언급 한 코드를 실행했으며 정상적으로 작동합니다. 그리고 경고는 실제로 값이 변경되었음을 확인합니다. Firefox의 "페이지 소스보기"기능을 사용하여 페이지 소스를 열었습니다. 그리고 페이지 소스에서 여전히 새 값이 아닌 이전 값을 보여줍니다 (위의 pastebin의 코드조차도). 그러나 경고 상자는 변경된 값을 확인합니다. 그래서 나는 이것이 Firefox 문제라고 가정하고 있습니다 (또는 너무 어리 석고 중요한 것을 간과하고 있습니까?). 다시 한번, 시간 내 주셔서 감사합니다 :)
texens

2
@texens : 문제 없습니다. 소스를 보는 대신 Firefox를 사용하는 경우 적절한 디버깅 도구 인 Firebug를 사용하는 것이 좋습니다 . "소스보기"의 동작은 모든 브라우저에서 거의 동일하며 다운로드 된 수정되지 않은 페이지 소스 코드를 표시합니다.
Andy E

2
수정 된 HTML이 렌더링되고 표시되는 방식만큼이나 Firefox 또는 특정 도구에 문제가 있다고 생각하지 않습니다. jQuery가 훨씬 더 많이 있다는 점을 제외하고는 OP와 동일한 상황입니다. 필자의 경우이 코드와 같이 코드가 올바르게 작동합니다 .click 이벤트는 "숨겨진"유형의 입력을 올바르게 업데이트하지만 숨겨진 필드는 업데이트되었지만 jQuery가 액세스 할 수는 있지만 Firebug는 업데이트 된 값을 표시하지 않습니다. 표시 필드에 대한 업데이트 된 값이 Firebug에 올바르게 표시
되더라도

62

ID를 전달하기 때문에 숨겨진 필드의 값을 설정하는 데 문제가있는 경우 해결책이 있습니다.

대신 $("#hidden_field_id").val(id)그냥 할 $("input[id=hidden_field_id]").val(id). 차이점이 무엇인지 모르지만 작동합니다.


3
이전 브라우저에서는이 속도가 매우 느릴 수 있습니다 ( learn.jquery.com/using-jquery-core/selecting-elements )
Alex Klaus

Chrome 48 용 브라우저가 나를 위해 작동하지 않습니다. 이유가 확실하지 않음
Gurpreet Singh

26

마지막으로 해결책을 찾았으며 간단한 해결책입니다.

document.getElementById("texens").value = "tinkumaster";

매력처럼 작동합니다. jQuery가 이것으로 다시 돌아 가지 않는 이유는 없습니다.


기술적으로 이것은 jQuery가 아닌 DOM을 사용하지만 간단하고 작동합니다 (양식 제출시 값을 변경하는 경우에 대한 거의 모든 대답을 시도했지만 작동하지 않았습니다).
hlongmore

이것이 내가이 답변을 게시 한 이유입니다.). 도움이되어 다행입니다. jQuery를에 관해서는 그들은 여기에 잠재적 인 수정이 github.com/jquery/jquery/blob/... 하지만에만입니다 type="radio". 특히 4 년 전에이 문제를 해결 한 경우 문제를보고하기 위해 게을러 야합니다. jQuery에서 수정해야한다면 찢어진 것입니다. 아마도 jQuery 키드를 보호하기 위해 그렇게 구현되어 있습니까? 누가 알겠 니?
zamber

1
jQuery 솔루션도 저에게 효과적이지 않았습니다. 바닐라 JS와 함께 가야했습니다.
Varun Sharma

17

나는 같은 문제가 있었다. 이상하게도 구글 크롬과 다른 사람들은 (잘 모르겠 음) 마음에 들지 않았습니다.

$("#thing").val(0);

input type="hidden" id="thing" name="thing" value="1" />

(변경 없음)

$("#thing").val("0");

input type="hidden" id="thing" name="thing" value="1" />

(변경 없음)

그러나 이것은 작동합니다 !!!!

$("#thing").val("no");

input type="hidden" id="thing" name="thing" value="no" />

변화 !!

$("#thing").val("yes");

input type="hidden" id="thing" name="thing" value="yes" />

변화 !!

"문자열 일"이어야합니다


2
이것은 나를 위해 그것을 고쳤다. 나는 자바 스크립트뿐만 아니라 파이썬, 백엔드 에서도 .val(' 0')올바르게 구문 분석 된을 사용 parseInt했습니다 int().
rattray

10
$('input[name=hidden_field_name]').val('newVal');

어느 때에도 나를 위해 일했다

$('input[id=hidden_field_id]').val('newVal');

...도 아니다

$('#hidden_field_id').val('newVal');

했다.


9

.val 은 값 속성 서버 측을 잡고 값이 항상 업데이트되지 않았기 때문에 작동 하지 않았습니다. 그래서 나는 사용했다 :

var counter = 0;
$('a.myClickableLink').click(function(event){
   event.preventDefault();
   counter++;

   ...
   $('#myInput').attr('value', counter);
}

그것이 누군가를 돕기를 바랍니다.


그게 내가 좋아하는 대답입니다. attr 함수를 사용하면 위에서 언급 한 모든 왜곡을 피하고 올바른 작업을 수행 할 수 있습니다.

7

실제로 이것은 지속적인 문제입니다. Andy는 다운로드 한 소스에 대해 맞지만 .val (...) 및 .attr ( 'value', ...)은 실제로 HTML을 수정하지 않는 것 같습니다. 나는이 자바 스크립트 문제와 생각 하지 JQuery와 문제. 방화범을 사용했다면 같은 질문을했을 것입니다. 수정 된 값으로 양식을 제출하면 html이 변경되지 않는 것처럼 보입니다. 이 문제는 수정 된 양식의 인쇄 미리보기 ([form] .html () 수행)를 만들려고했지만 문제를 제외한 모든 변경 사항을 포함한 모든 변경 사항을 복사합니다값이 변경됩니다. 따라서 내 모달 인쇄 미리보기는 다소 쓸모가 없습니다 ... 내 해결 방법은 추가 한 값을 포함하는 숨겨진 양식을 '빌드'하거나 미리보기를 독립적으로 생성하고 사용자가 수정 한 내용을 미리보기로 만들어야 할 수도 있습니다. 둘 다 최적은 아니지만 누군가가 값 설정 동작이 왜 HTML을 변경하지 않는지 (DOM에서 가정해야 함) 알아 내지 않는 한 그렇게해야합니다.


나에게서 +1! 네가 옳아. jQuery를 사용하여 업데이트하는 동안 value 및 .val ()에 문제가 있습니다. 주변에서 발견 한 것이 있습니까?
NullPointer

4

나는 똑같은 문제를 겪고 있었고 무엇이 잘못되었는지 알았습니다. 나는 HTML을 다음과 같이 정의했다.

<form action="url" method="post">
    <input type="hidden" id="email" />
<form>
<script>
    function onsomeevent()
    {
       $("#email").val("a@a.com");
    }
</script>

서버에서 양식 값을 읽으면 항상 이메일이 비어 있습니다. 내 머리를 긁고 (그리고 수많은 검색), 실수가 형식 / 입력을 올바르게 정의하지 않았다는 것을 깨달았습니다. 입력을 수정하면 (다음 그림과 같이) 매력처럼 작동했습니다.

<input type="hidden" id="email" name="email" />

다른 사람들이 같은 문제를 겪을 경우이 스레드에 추가하십시오.


3

제 경우에는 작동하지 않는 val ()의 매개 변수로 비 문자열 (정수)을 사용했습니다. 트릭은 간단합니다.

$("#price").val('' + price);

2

사용 val()하지 못했습니다. 나는 .attr()모든 곳 에서 사용해야했다 . 또한 다른 유형의 입력이 있었고 확인란과 선택 메뉴의 경우 매우 명시 적으로 나타났습니다.

텍스트 필드 업데이트

$('#model_name').attr('value',nameVal);

파일 입력 옆의 이미지 업데이트

$('#img-avatar').attr('src', avatarThumbUrl);

부울 업데이트

if (isActive) {
    $('#model_active').attr('checked',"checked");
} else {
    $('#model_active').attr('checked', null) ;
}

업데이트 선택 (숫자 또는 문자열)

$('#model_framerate').children().each(function(i, el){
    var v = $(el).val();
    if (v === String(framerateVal)) { 
        $(el).attr('selected','selected');
    } else {
        $(el).attr('selected',null);
    }
}

1

여기에 또 다른 문제가있어서 시간을 낭비했기 때문에 팁을 전달할 것이라고 생각했습니다. 나는 숨겨진 ID를 가지고 ID를 주었다. 및 []셀렉터 (때문에 struts2와 함께 사용하기에) 이름에 괄호 $("#model.thefield[0]")내 숨겨진 필드를 찾을 것입니다. 마침표와 대괄호를 사용하지 않도록 ID 이름을 바꾸면 선택기가 작동하기 시작했습니다. 결국 나는 model_the_field_0대신 id로 끝나고 선택기가 잘 작동했습니다.


그의 당신의 선택이 있기 때문 $("#model.thefield[0]")으로 해석되고있다 : 인 요소 id와 같은 modelCSS를, classthefield일부는 attribute전화 0... 당신이 당신에 이러한 문자를 사용하려면 id사용 척 Callebs에 의해 제안 된 접근 방식 그의 대답을 . HTML5에서 이것은 id비어 있지 않고 공백 문자 ( reference )를 포함하지 않는 문자열 일 수 있습니다 .
Oliver

1

아이디 사용 :

$('input:hidden#texens').val('tinkumaster');

수업 사용 :

$('input:hidden.many_texens').val('tinkumaster');

0

haml을 검색하는 경우 숨겨진 필드가 다음과 같이 숨겨진 필드로 값을 설정하는 답입니다.

%input#forum_id.hidden

jquery에서 값을 문자열로 변환 한 다음 jquery의 attr 속성을 사용하여 값을 추가하십시오. 이것이 다른 언어에서도 작동하기를 바랍니다.

$('#forum_id').attr('val',forum_id.toString());

-1
<javascript>


slots=''; hidden=''; basket = 0;

    cost_per_slot = $("#cost_per_slot").val();
    //cost_per_slot = parseFloat(cost_per_slot).toFixed(2)

    for (i=0; i< check_array.length; i++) {
        slots += check_array[i] + '\r\n';
        hidden += check_array[i].substring(0, 8) + '|';
        basket = (basket + parseFloat(cost_per_slot));
    }

    // Populate the Selected Slots section
    $("#selected_slots").html(slots);

    // Update hidden slots_booked form element with booked slots
    $("#slots_booked").val(hidden);     

    // Update basket total box
    basket = basket.toFixed(2);
    $("#total").html(basket);


-1

get 및 set 아래의 구문을 사용하십시오.

가져 오기

//Script 
var a = $("#selectIndex").val();

여기서 변수는 hiddenfield (selectindex)의 값을 보유합니다

서버 측

<asp:HiddenField ID="selectIndex" runat="server" Value="0" />

세트

var a =10;
$("#selectIndex").val(a);

OP는 왜 당신과 같은 코드가 그에게 효과가 없는지 묻기 때문에이 질문에 쓸모가 없습니다.
ProfK December

-1

이것으로 어려움을 겪고있는 사람이라면 jQuery로 이것을 수행하는 매우 간단한 "인라인"방법이 있습니다.

<input type="search" placeholder="Search" value="" maxlength="256" id="q" name="q" style="width: 300px;" onChange="$('#ADSearch').attr('value', $('#q').attr('value'))"><input type="hidden" name="ADSearch" id="ADSearch" value="">

텍스트가 onChange 이벤트를 사용하여 표시되는 입력에 입력 될 때 숨겨진 필드의 값을 설정합니다. 필드 값을 "고급 검색"양식에 전달하고 사용자가 검색 쿼리를 다시 입력하지 않도록하는 데 도움이됩니다 (제 경우처럼).

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.