ตั้งค่าของเขตข้อมูลที่ซ่อนอยู่ในแบบฟอร์มโดยใช้“ .val ()” ของ jQuery

188

ฉันพยายามกำหนดค่าของเขตข้อมูลที่ซ่อนอยู่ในแบบฟอร์มโดยใช้ jQuery แต่ไม่ประสบความสำเร็จ

นี่คือตัวอย่างรหัสที่อธิบายถึงปัญหา หากฉันให้ประเภทอินพุตเป็น "text" มันจะทำงานได้โดยไม่มีปัญหา แต่การเปลี่ยนประเภทอินพุตเป็น "ซ่อน" ไม่ทำงาน!

<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 มีปัญหาในการตั้งค่าช่องป้อนข้อมูลที่ซ่อนหรือซ่อนอยู่

ความคิดใด ๆ มีวิธีแก้ปัญหาสำหรับสิ่งนี้ที่ใช้งานได้จริง?

jquery set hidden-fields

— texens
แหล่งที่มา

316

:texthiddenจะล้มเหลวสำหรับการป้อนข้อมูลที่มีค่าชนิดของ นอกจากนี้ยังมีประสิทธิภาพมากกว่าการใช้เพียง:

$("#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" ตามที่คุณเพิ่งพูดถึง ดังนั้นดูเหมือนว่าค่าของเขตข้อมูลที่ซ่อนอยู่จะไม่เปลี่ยนแปลง

— ประมวลผล

1

@texens: ฉันจะสงสัยว่าปัญหาอยู่ที่อื่น อย่างที่คุณเห็นจากตัวอย่างที่ฉันเชื่อมโยงใช้val()งานได้ดีกับอินพุตที่ซ่อนอยู่การเปลี่ยนค่าจาก "ไม่เปลี่ยน" เป็น "เปลี่ยน" ฉันได้แก้ไขตัวอย่างเพื่อรวมรหัสที่คุณวางไว้ด้านบนด้วยการแจ้งเตือนเพื่อยืนยันการเปลี่ยนแปลงค่า: jsbin.com/elovo/2/edit

— Andy E

แอนดี้ขอบคุณมากสำหรับตัวอย่าง ฉันรันโค้ดที่กล่าวถึงข้างต้นและทำงานได้ตามที่ควรจะเป็น และการแจ้งเตือนยืนยันอย่างแน่นอนว่ามีการเปลี่ยนแปลงค่า ฉันได้เปิดแหล่งที่มาของหน้าโดยใช้คุณสมบัติ "View Page Source" ของ Firefox และในแหล่งที่มาของหน้ามันยังคงแสดงค่าเก่าไม่ใช่ค่าใหม่ (แม้แต่รหัสใน pastebin ที่กล่าวถึงข้างต้น) แต่กล่องการแจ้งเตือนยืนยันค่าที่เปลี่ยนแปลง ดังนั้นฉันสมมติว่านี่เป็นปัญหา Firefox (หรือฉันโง่เกินไปและมองสิ่งที่สำคัญ?) ขอขอบคุณสำหรับเวลาของคุณ :)

— texens

2

@texens: ไม่มีปัญหา ฉันขอแนะนำให้ใช้เครื่องมือดีบั๊กที่เหมาะสมFirebugถ้าคุณใช้ Firefox แทนที่จะดูแหล่งที่มา พฤติกรรมของ "มุมมองแหล่งที่มา" นั้นเหมือนกันในทุกเบราว์เซอร์และจะแสดงซอร์สโค้ดที่ดาวน์โหลดและไม่มีการแก้ไขของหน้า

— Andy E

2

ฉันไม่คิดว่าปัญหาเกิดขึ้นกับ Firefox หรือเครื่องมือเฉพาะเท่าที่เป็นอยู่กับวิธีการแสดงและแสดง HTML ที่แก้ไข ฉันมีสถานการณ์เดียวกันกับ OP ยกเว้นว่ามี jQuery เข้ามาเกี่ยวข้องอีกเล็กน้อย ในกรณีของฉันเช่นนี้รหัสทำงานได้อย่างถูกต้อง - เหตุการณ์การคลิกอัปเดตอินพุตประเภท "ซ่อน" อย่างถูกต้อง - แต่ Firebug ไม่แสดงค่าที่อัปเดตสำหรับเขตข้อมูลที่ซ่อนอยู่แม้ว่าพวกเขาจะได้รับการปรับปรุงและ jQuery สามารถเข้าถึงได้ และถึงแม้ว่าค่าที่อัปเดตสำหรับเขตข้อมูลที่มองเห็นจะแสดงใน Firebug อย่างถูกต้อง

— Dave DuPlantis

62

หากคุณมีปัญหาในการตั้งค่าของเขตข้อมูลที่ซ่อนอยู่เนื่องจากคุณส่งรหัสไปให้นี่เป็นวิธีแก้ปัญหา:

แทนการเพียงแค่ทำ$("#hidden_field_id").val(id) $("input[id=hidden_field_id]").val(id)ไม่แน่ใจว่าความแตกต่างคืออะไร แต่ได้ผล

— Chuck Callebs
แหล่งที่มา

3

ระวังสิ่งนี้อาจช้ามากในเบราว์เซอร์รุ่นเก่า ( learn.jquery.com/using-jquery-core/selecting-elements )

— Alex Klaus

ไม่ทำงานสำหรับฉันเบราว์เซอร์ - Chrome 48 ไม่แน่ใจว่าทำไม

— Gurpreet Singh

26

ในที่สุดฉันได้พบวิธีแก้ปัญหาและเป็นวิธีง่าย ๆ :

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

ทำงานเหมือนจับใจ เบาะแสไม่มีเหตุผลที่ jQuery ไม่ถอยกลับไป

— zamber
แหล่งที่มา

ในทางเทคนิคการใช้ DOM ไม่ใช่ jQuery แต่มันง่ายและใช้งานได้ (ฉันลองเกือบทุกคำตอบที่นี่สำหรับกรณีของฉันในการเปลี่ยนค่าในเวลาที่ส่งแบบฟอร์มและพวกเขาไม่ทำงาน)

— hlongmore

นั่นเป็นเหตุผลที่ฉันโพสต์คำตอบนี้;) ดีใจที่มันช่วย สำหรับ jQuery พวกเขามีการแก้ไขที่อาจเกิดขึ้นที่นี่github.com/jquery/jquery/blob/...แต่มันก็เป็นเพียง type="radio"แต่สำหรับ ฉันขี้เกียจรายงานปัญหาโดยเฉพาะเมื่อฉันแก้ไขปัญหานี้เมื่อ 4 ปีที่แล้ว ฉันยังขาดถ้ามันควรได้รับการแก้ไขใน jQuery - อาจเป็นไปได้ว่าวิธีการดังกล่าวเพื่อป้องกัน jiddery kiddies จากตัวเอง? ใครจะรู้ ...

— zamber

1

โซลูชัน jQuery ไม่ได้ผลสำหรับฉันเช่นกัน ต้องไปกับวานิลลา JS

— Varun Sharma

17

ฉันมีปัญหาเดียวกัน Google Chrome ผิดปกติพอและอาจเป็นไปได้ว่าคนอื่น (ไม่แน่ใจ) ไม่ชอบ

$("#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" />

การเปลี่ยนแปลง !!

จะต้องเป็น "สิ่งสตริง"

— mr.zaga
แหล่งที่มา

2

สิ่งนี้แก้ไขให้ฉันเช่นกัน ฉันลงเอยด้วยการใช้.val(' 0')ซึ่งมีการแยกวิเคราะห์อย่างถูกต้องโดยparseIntใน Javascript เช่นเดียวกับint()ใน Python แบ็กเอนด์ของฉัน

— 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

จริงๆแล้วนี่เป็นปัญหาต่อเนื่อง แม้ว่าแอนดี้จะถูกต้องเกี่ยวกับแหล่งที่มาที่ดาวน์โหลด, .val (... ) และ .attr ('value', ... ) ดูเหมือนจะไม่แก้ไข html จริง ๆ ฉันคิดว่านี่เป็นปัญหาจาวาสคริปต์และไม่ใช่ปัญหา jquery หากคุณใช้ firebug แม้คุณจะมีคำถามเดียวกัน ในขณะที่ดูเหมือนว่าถ้าคุณส่งแบบฟอร์มด้วยค่าที่แก้ไขแล้วมันจะผ่านไป html จะไม่เปลี่ยนแปลง ฉันพบปัญหานี้พยายามสร้างตัวอย่างก่อนพิมพ์ของแบบฟอร์มที่แก้ไข (ทำ [form] .html ()) มันคัดลอกทุกอย่างโอเครวมถึงการเปลี่ยนแปลงทั้งหมดยกเว้นการเปลี่ยนแปลงค่า ดังนั้นการแสดงตัวอย่างงานพิมพ์แบบโมดัลของฉันค่อนข้างไร้ประโยชน์ ... วิธีแก้ปัญหาของฉันอาจต้อง 'สร้าง' รูปแบบที่ซ่อนอยู่ซึ่งมีค่าที่เพิ่มหรือสร้างตัวอย่างก่อนพิมพ์อย่างอิสระและทำการปรับเปลี่ยนในแต่ละครั้ง ทั้งสองอย่างไม่ถูกต้อง แต่ถ้ามีคนคิดว่าทำไมพฤติกรรมการตั้งค่าไม่เปลี่ยน html (ใน DOM ฉันสมมติว่า) จะต้องทำ

+1 จากฉัน! คุณถูก. value และ .val () มีปัญหาขณะอัปเดตโดยใช้ jQuery คุณพบอะไรรอบ ๆ ?

— 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" />

การเพิ่มไปยังเธรดนี้ในกรณีที่ผู้อื่นมีปัญหาเดียวกัน

— Jardalu
แหล่งที่มา

3

ในกรณีของฉันฉันใช้ non-string (จำนวนเต็ม) เป็นพารามิเตอร์ของ val () ซึ่งใช้งานไม่ได้เคล็ดลับนั้นง่ายเหมือน

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

— Shawn
แหล่งที่มา

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

gotcha อีกที่นี่เสียเวลาของฉันดังนั้นฉันคิดว่าฉันจะผ่านไปตามปลาย ฉันมีฟิลด์ที่ซ่อนอยู่ฉันให้รหัสที่มี และ[]วงเล็บในชื่อ (เนื่องจากใช้กับ struts2) และตัวเลือก$("#model.thefield[0]")จะไม่พบฟิลด์ที่ซ่อนของฉัน การเปลี่ยนชื่อ id เพื่อไม่ใช้จุดและวงเล็บทำให้ตัวเลือกเริ่มทำงาน ดังนั้นในที่สุดฉันก็ลงเอยด้วยรหัสmodel_the_field_0แทนและตัวเลือกทำงานได้ดี

— user738048
แหล่งที่มา

นั่นเพราะตัวเลือกของคุณ$("#model.thefield[0]")จะถูกตีความว่าเป็น: องค์ประกอบที่มีidค่าเท่ากับmodel, CSS classของthefieldและบางคนattributeเรียกว่า0... ถ้าคุณต้องการที่จะใช้ตัวอักษรเหล่านั้นของคุณในidการใช้วิธีการที่แนะนำโดยชัค Callebs ในคำตอบของเขา ใน HTML5 idอาจเป็นสตริงใด ๆ ที่ไม่ว่างเปล่าและไม่มีอักขระเว้นวรรค ( อ้างอิง )

— โอลิเวอร์

1

ใช้ ID:

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

ใช้คลาส:

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

— อาร์มาน
แหล่งที่มา

0

หากคุณกำลังค้นหา haml อยู่นี่คือคำตอบสำหรับฟิลด์ที่ซ่อนอยู่เพื่อตั้งค่าให้กับฟิลด์ที่ถูกซ่อนเช่น

%input#forum_id.hidden

ใน jquery ของคุณเพียงแค่แปลงค่าให้เป็นสตริงแล้วต่อเติมโดยใช้คุณสมบัติ attr ใน jquery หวังว่ามันจะทำงานในภาษาอื่นด้วย

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

— Yarrabhumi
แหล่งที่มา

-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

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

ตัวแปรจะเก็บค่าของ hiddenfield ที่นี่ (selectindex)

ฝั่งเซิร์ฟเวอร์

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

ตลาดหลักทรัพย์

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

— mzonerz
แหล่งที่มา

OP กำลังถามว่าทำไมรหัสอย่างคุณถึงไม่เหมาะกับเขาดังนั้นนี่จึงไร้ประโยชน์สำหรับคำถามนี้

— ProfK

-1

ใครก็ตามที่ดิ้นรนกับสิ่งนี้มีวิธี "inline" ที่ง่ายมากในการทำเช่นนี้กับ 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 มีประโยชน์ (เช่นในกรณีของฉัน) ที่คุณต้องการส่งผ่านค่าฟิลด์ไปยังฟอร์ม "การค้นหาขั้นสูง" และไม่บังคับให้ผู้ใช้พิมพ์คำค้นหาอีกครั้ง

— Joyrex
แหล่งที่มา