Đặt giá trị của trường ẩn trong một biểu mẫu bằng cách sử dụng jQuery .val () của jQuery không hoạt động


188

Tôi đã cố gắng đặt giá trị của một trường ẩn trong một biểu mẫu bằng jQuery, nhưng không thành công.

Dưới đây là một mã mẫu giải thích vấn đề. Nếu tôi giữ kiểu nhập thành "văn bản", nó sẽ hoạt động mà không gặp sự cố nào. Nhưng, thay đổi loại đầu vào thành "ẩn", không hoạt động!

<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>

Tôi cũng đã thử cách giải quyết sau đây, bằng cách đặt loại đầu vào thành "văn bản" và sau đó sử dụng kiểu "display: none" cho hộp đầu vào. Nhưng, điều này cũng thất bại! Có vẻ như jQuery có một số rắc rối khi thiết lập các trường nhập ẩn hoặc vô hình.

Có ý kiến ​​gì không? Có một cách giải quyết cho việc này thực sự hoạt động?

Câu trả lời:


316

:textsẽ không thành công cho đầu vào có giá trị loại hidden. Nó cũng hiệu quả hơn nhiều khi chỉ sử dụng:

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

Các thuộc tính ID phải là duy nhất trên một trang web, đảm bảo rằng các thuộc tính của bạn vì điều này có thể góp phần vào bất kỳ vấn đề nào bạn gặp phải và chỉ định một bộ chọn phức tạp hơn chỉ làm mọi thứ chậm lại và trông không gọn gàng.

Ví dụ tại http://jsbin.com/elovo/edit , sử dụng mã ví dụ của bạn tại http://jsbin.com/elovo/2/edit


Andy, cảm ơn vì đã phản hồi nhanh chóng. Tôi thực sự đã thử với "#texens" trước, sau đó với "#input: hidden # texens" và dường như cả hai đều không hoạt động. Khi tôi thay đổi loại đầu vào ở dạng từ "hidden" thành "text" và "#input: hidden: texens" thành "#input: text: texens", nó hoạt động mà không gặp rắc rối nào. "#Input: text # texens" là một lỗi đánh máy ở trên và nên là "#input: hidden # texens" hoặc chỉ là "#texens" như bạn vừa đề cập. Vì vậy, dường như các giá trị của trường ẩn không bị thay đổi.
texens

1
@texens: Tôi sẽ nghi ngờ vấn đề nằm ở chỗ khác. Như bạn có thể thấy từ ví dụ tôi liên kết đến, val()chỉ hoạt động tốt trên đầu vào ẩn, thay đổi giá trị từ "không thay đổi" thành "thay đổi". Tôi đã sửa đổi ví dụ để bao gồm mã bạn đã dán ở trên, với một cảnh báo để xác nhận thay đổi giá trị: jsbin.com/elovo/2/edit
Andy E

Andy, cảm ơn rất nhiều cho ví dụ. Tôi đã chạy mã được đề cập ở trên và nó hoạt động chính xác như nó được yêu cầu. Và cảnh báo thực sự xác nhận rằng giá trị đã được thay đổi. Tôi đã mở nguồn trang bằng tính năng "Xem trang nguồn" của Firefox. Và trong nguồn trang, nó vẫn hiển thị giá trị cũ chứ không phải giá trị mới (ngay cả đối với mã trong pastebin đã đề cập ở trên). Nhưng, hộp cảnh báo xác nhận giá trị thay đổi. Vì vậy, tôi cho rằng đây là sự cố của Firefox (hoặc tôi quá ngu ngốc và nhìn ra điều gì đó quan trọng?). Một lần nữa, cảm ơn bạn đã dành thời gian :)
texens

2
@texens: không vấn đề gì Tôi sẽ đề nghị sử dụng một công cụ sửa lỗi thích hợp, Fireorms nếu bạn sử dụng Firefox, thay vì xem nguồn. Hành vi của "nguồn xem" ít nhiều giống nhau trên tất cả các trình duyệt và sẽ hiển thị mã nguồn đã tải xuống, chưa sửa đổi của trang.
Andy E

2
Tôi không nghĩ vấn đề là do Firefox hoặc một công cụ cụ thể cũng như vấn đề về cách hiển thị và hiển thị HTML đã sửa đổi. Tôi có tình huống tương tự như OP, ngoại trừ việc có thêm một chút jQuery tham gia. Trong trường hợp của tôi, như trong trường hợp này, mã hoạt động chính xác - sự kiện nhấp cập nhật chính xác một kiểu nhập "ẩn" - nhưng Fireorms không hiển thị các giá trị được cập nhật cho các trường ẩn, mặc dù chúng đã được cập nhật và jQuery có thể truy cập chúng và mặc dù các giá trị được cập nhật cho các trường hiển thị được hiển thị chính xác trong Fireorms.
Dave DuPlantis

62

Nếu bạn gặp sự cố khi đặt giá trị của một trường ẩn vì bạn đang chuyển ID cho nó, đây là giải pháp:

Thay vì $("#hidden_field_id").val(id)chỉ làm $("input[id=hidden_field_id]").val(id). Không chắc sự khác biệt là gì, nhưng nó hoạt động.


3
Coi chừng, điều này có thể rất chậm trong các trình duyệt cũ hơn ( learn.jquery.com/USE-jquery-core/selecting-elements )
Alex Klaus

Không hoạt động với tôi, trình duyệt - Chrome 48. Không chắc tại sao
Gurpreet Singh

26

Cuối cùng, tôi đã tìm ra một giải pháp và đó là một giải pháp đơn giản:

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

Hoạt động như một lá bùa. Không có lý do tại sao jQuery không quay trở lại điều này.


Về mặt kỹ thuật, điều này sử dụng DOM chứ không phải jQuery, nhưng nó rất đơn giản và hoạt động (Tôi đã thử gần như mọi câu trả lời ở đây cho trường hợp thay đổi giá trị tại thời điểm gửi biểu mẫu và chúng không hoạt động).
hlongmore

Đó là lý do tại sao tôi đăng câu trả lời này;). Vui vì nó đã giúp. Đối với jQuery, họ có một bản sửa lỗi tiềm năng ở đây github.com/jquery/jquery/blob/, nhưng nó chỉ dành cho type="radio". Tôi lười biếng để báo cáo một vấn đề, đặc biệt là tôi đã giải quyết vấn đề này 4 năm trước. Tôi cũng bị rách nếu cần sửa nó trong jQuery - có thể nó đã được triển khai theo cách đó để bảo vệ những đứa trẻ jQuery khỏi chính chúng? Ai biết được ...
zamber 04/07/18

1
Giải pháp jQuery cũng không hiệu quả với tôi. Phải đi với Vanilla JS.
Varun Sharma

17

Tôi đã có vấn đề tương tự. google chrome đủ và có thể những người khác (không chắc chắn) không thích

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

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

(không thay đổi)

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

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

(không thay đổi)

nhưng điều này hoạt động !!!!

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

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

THAY ĐỔI !!

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

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

THAY ĐỔI !!

phải là một "chuỗi điều"


2
Điều này đã sửa nó cho tôi là tốt. Tôi đã kết thúc bằng cách sử dụng .val(' 0'), được phân tích cú pháp chính xác bởi parseIntJavascript cũng như int()trong Python, phần phụ trợ của tôi.
rattray

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

làm việc cho tôi, khi không

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

cũng không

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

đã làm.


9

.val không hoạt động với tôi, vì tôi đang nắm lấy phía máy chủ thuộc tính giá trị và giá trị không phải lúc nào cũng được cập nhật. vì vậy tôi đã sử dụng:

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

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

Hy vọng nó sẽ giúp được ai đó.


Đó là câu trả lời tôi thích. Sử dụng chức năng attr sẽ tránh tất cả các mâu thuẫn được đề cập ở trên và thực hiện đúng.

7

Trên thực tế, đây là một vấn đề đang diễn ra. Mặc dù Andy nói đúng về nguồn đã tải xuống, .val (...) và .attr ('value', ...) dường như không thực sự sửa đổi html. Tôi nghĩ rằng đây là một vấn đề javascript và không phải là một vấn đề jquery. Nếu bạn đã sử dụng firebird thậm chí bạn sẽ có cùng một câu hỏi. Mặc dù có vẻ như nếu bạn gửi biểu mẫu với các giá trị được sửa đổi, nó sẽ đi qua, html không thay đổi. Tôi gặp vấn đề này khi cố gắng tạo bản xem trước in của biểu mẫu đã sửa đổi (thực hiện [biểu mẫu] .html ()) nó sao chép mọi thứ đều ổn, bao gồm tất cả các thay đổi ngoại trừgiá trị thay đổi. Do đó, bản xem trước in phương thức của tôi có phần vô dụng ... cách giải quyết của tôi có thể là 'xây dựng' một dạng ẩn chứa các giá trị họ đã thêm hoặc tạo bản xem trước một cách độc lập và thực hiện mỗi sửa đổi mà người dùng thực hiện cũng sửa đổi bản xem trước. Cả hai đều không tối ưu, nhưng trừ khi có ai đó hiểu tại sao hành vi cài đặt giá trị không thay đổi html (trong DOM tôi giả sử) thì nó sẽ phải làm.


+1 từ tôi! Bạn đúng. value và .val () có vấn đề trong khi cập nhật nó bằng jQuery. Bạn đã tìm thấy bất cứ điều gì xung quanh?
NullPulum

4

Tôi đã có cùng một vấn đề, và tôi đã tìm ra những gì sai. Tôi đã có HTML được định nghĩa là

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

Đọc các giá trị biểu mẫu trên máy chủ luôn dẫn đến email là trống. Sau khi gãi đầu (và nhiều tìm kiếm), tôi nhận ra lỗi không xác định đúng mẫu / đầu vào. Khi sửa đổi đầu vào (như hiển thị tiếp theo), nó hoạt động như một nét duyên dáng

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

Thêm vào chủ đề này trong trường hợp những người khác có cùng một vấn đề.


3

Trong trường hợp của tôi, tôi đã sử dụng một chuỗi không phải là số (số nguyên) làm tham số của val () không hoạt động, thủ thuật chỉ đơn giản như

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

2

Sử dụng val()không làm việc cho tôi. Tôi đã phải sử dụng .attr()ở khắp mọi nơi. Ngoài ra tôi có các loại đầu vào khác nhau và phải khá rõ ràng trong trường hợp hộp kiểm và chọn menu.

Cập nhật trường văn bản

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

Cập nhật hình ảnh bên cạnh nhập tập tin

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

Cập nhật boolean

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

Cập nhật chọn (có số hoặc chuỗi)

$('#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

Một Gotcha khác ở đây đã lãng phí một phần thời gian của tôi, vì vậy tôi nghĩ rằng tôi sẽ vượt qua tiền boa. Tôi đã có một trường ẩn tôi đã cho một id có. và []dấu ngoặc trong tên (do sử dụng với struts2) và bộ chọn $("#model.thefield[0]")sẽ không tìm thấy trường ẩn của tôi. Đổi tên id thành không sử dụng dấu chấm và dấu ngoặc khiến bộ chọn bắt đầu hoạt động. Vì vậy, cuối cùng tôi đã kết thúc với một id model_the_field_0thay thế và bộ chọn hoạt động tốt.


Đó là vì chọn của bạn $("#model.thefield[0]")đang được hiểu là: một phần tử với idbằng model, một css classcủa thefieldvà một số attributeđược gọi là 0... Nếu bạn muốn sử dụng những nhân vật trong của bạn idsử dụng phương pháp được đề xuất bởi Chuck Callebs trong câu trả lời của ông . Trong HTML5, idcó thể là bất kỳ chuỗi nào không trống và không chứa bất kỳ ký tự khoảng trắng ( tham chiếu ) nào.
Oliver

1

Sử dụng ID:

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

Sử dụng lớp:

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

0

Nếu bạn đang tìm kiếm haml thì đây là câu trả lời cho trường ẩn để đặt giá trị thành trường ẩn như

%input#forum_id.hidden

Trong jquery của bạn, chỉ cần chuyển đổi giá trị thành chuỗi và sau đó nối nó bằng thuộc tính attr trong jquery. hy vọng điều này cũng hoạt động trong các ngôn ngữ khác cũng có.

$('#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

Chỉ cần sử dụng cú pháp bên dưới get và set

ĐƯỢC

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

ở đây một biến sẽ giữ giá trị của hiddenfield (selectindex)

Phía máy chủ

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

BỘ

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

OP đang hỏi tại sao mã như của bạn không hoạt động với anh ta, vì vậy điều này là vô ích cho câu hỏi này.
ProfK

-1

Bất cứ ai khác đang vật lộn với điều này, có một cách "nội tuyến" rất đơn giản để làm điều này với 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="">

Điều này đặt giá trị của trường ẩn khi văn bản được nhập vào đầu vào hiển thị bằng cách sử dụng sự kiện onChange. Hữu ích (như trong trường hợp của tôi) khi bạn muốn chuyển một giá trị trường sang biểu mẫu "Tìm kiếm nâng cao" và không buộc người dùng nhập lại truy vấn tìm kiếm của họ.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.