อินพุตของฟอร์มที่ปิดใช้งานจะไม่ปรากฏในคำขอ

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

มีวิธีแก้ปัญหาสำหรับสิ่งนี้โดยไม่เพิ่มเขตข้อมูลที่ซ่อนอยู่หรือไม่?

<form action="/Media/Add">
    <input type="hidden" name="Id" value="123" />

    <!-- this does not appear in request -->
    <input type="textbox" name="Percentage" value="100" disabled="disabled" /> 

</form>

องค์ประกอบที่มีdisabledคุณสมบัติไม่ได้ถูกส่งหรือคุณสามารถพูดได้ว่าค่าของพวกเขาจะไม่โพสต์ (ดูหัวข้อย่อยที่สองภายใต้ขั้นตอนที่ 3 ในสเป็ค HTML 5 สำหรับการสร้างชุดข้อมูลแบบฟอร์ม )

กล่าวคือ

<input type="textbox" name="Percentage" value="100" disabled="disabled" /> 

FYI ต่อ17.12.1ในข้อมูลจำเพาะ HTML 4:

1. ตัวควบคุมที่ปิดใช้งานไม่ได้รับการโฟกัส
2. ตัวควบคุมที่ปิดใช้งานถูกข้ามในการนำทางแบบแท็บ
3. ไม่สามารถโพสต์การควบคุมที่ปิดใช้งานได้สำเร็จ

คุณสามารถใช้แอreadonlyททริบิวในกรณีของคุณโดยการทำเช่นนี้คุณจะสามารถโพสต์ข้อมูลในฟิลด์ของคุณ

กล่าวคือ

<input type="textbox" name="Percentage" value="100" readonly="readonly" />

FYI ต่อ17.12.2ในข้อมูลจำเพาะ HTML 4:

1. องค์ประกอบแบบอ่านอย่างเดียวได้รับโฟกัส แต่ผู้ใช้ไม่สามารถแก้ไขได้
2. องค์ประกอบแบบอ่านอย่างเดียวจะรวมอยู่ในการนำทางแบบแท็บ
3. องค์ประกอบแบบอ่านอย่างเดียวได้รับการโพสต์เรียบร้อยแล้ว

การใช้ Jquery และการส่งข้อมูลด้วย ajax คุณสามารถแก้ปัญหาของคุณได้:

<script>

$('#form_id').submit(function() {
    $("#input_disabled_id").prop('disabled', false);

    //Rest of code
    })
</script>

ในการโพสต์ค่าจากอินพุตที่ถูกปิดใช้งานนอกเหนือจากอินพุตที่เปิดใช้งานคุณสามารถเปิดใช้งานอินพุตทั้งหมดของฟอร์มอีกครั้งในขณะที่กำลังส่ง

<form onsubmit="this.querySelectorAll('input').forEach(i => i.disabled = false)">
    <!-- Re-enable all input elements on submit so they are all posted, 
         even if currently disabled. -->

    <!-- form content with input elements -->
</form>

ถ้าคุณชอบ jQuery:

<form onsubmit="$(this).find('input').prop('disabled', false)">
    <!-- Re-enable all input elements on submit so they are all posted, 
         even if currently disabled. -->

    <!-- form content with input elements -->
</form>

สำหรับ ASP.NET MVC C # Razor คุณเพิ่มตัวจัดการการส่งเช่นนี้:

using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post,
    // Re-enable all input elements on submit so they are all posted, even if currently disabled.
    new { onsubmit = "this.querySelectorAll('input').forEach(i => i.disabled = false)" } ))
{
    <!-- form content with input elements -->
}

หากคุณต้องปิดการใช้งานฟิลด์และส่งข้อมูลคุณสามารถใช้จาวาสคริปต์เพื่อป้อนข้อมูลเดียวกันลงในฟิลด์ที่ซ่อนอยู่ (หรือเพียงแค่ตั้งค่าฟิลด์ที่ซ่อนไว้ด้วย) วิธีนี้จะช่วยให้คุณปิดการใช้งาน แต่ยังคงโพสต์ข้อมูลแม้ว่าคุณจะโพสต์ไปที่หน้าอื่น

ฉันกำลังปรับปรุงคำตอบนี้เนื่องจากมีประโยชน์มาก เพียงเพิ่มแบบอ่านอย่างเดียวไปยังอินพุต

ดังนั้นรูปแบบจะเป็น:

<form action="/Media/Add">
    <input type="hidden" name="Id" value="123" />
    <input type="textbox" name="Percentage" value="100" readonly/>
</form>

ความหมายนี้รู้สึกเหมือนพฤติกรรมที่ถูกต้อง

ฉันจะถามตัวเองว่า " ทำไมฉันต้องส่งค่านี้ "

หากคุณมีอินพุตที่ปิดใช้งานบนฟอร์มดังนั้นคุณคงไม่ต้องการให้ผู้ใช้เปลี่ยนค่าโดยตรง

ค่าใด ๆ ที่แสดงในอินพุตที่ปิดใช้งานควรเป็นเช่นกัน

1. เอาท์พุทจากค่าบนเซิร์ฟเวอร์ที่ผลิตแบบฟอร์มหรือ
2. ถ้าแบบฟอร์มเป็นแบบไดนามิกสามารถคำนวณได้จากอินพุตอื่น ๆ ในแบบฟอร์ม

สมมติว่าเซิร์ฟเวอร์ที่ประมวลผลแบบฟอร์มเหมือนกับเซิร์ฟเวอร์ที่ให้บริการข้อมูลทั้งหมดในการทำซ้ำค่าของอินพุตที่ปิดใช้งานควรพร้อมใช้งานในการประมวลผล

ในความเป็นจริงเพื่อรักษาความถูกต้องของข้อมูล - แม้ว่าค่าของอินพุตที่ปิดใช้งานถูกส่งไปยังเซิร์ฟเวอร์ประมวลผลคุณควรตรวจสอบความถูกต้องจริง ๆ การตรวจสอบนี้จะต้องใช้ข้อมูลในระดับเดียวกับที่คุณจะต้องทำซ้ำค่าต่อไป!

ฉันเกือบจะยืนยันว่าอินพุตแบบอ่านอย่างเดียวไม่ควรส่งในคำขอเช่นกัน

มีความสุขที่ได้รับการแก้ไข แต่กรณีการใช้งานทั้งหมดที่ฉันสามารถนึกได้ว่าต้องส่งอินพุตแบบอ่านอย่างเดียว / ปิดการใช้งานจริง ๆ เพียงแค่ใส่สไตล์ในการปลอมตัว

ฉันคิดว่ามันใช้งานได้ง่ายขึ้น อ่านฟิลด์อินพุตอย่างเดียวจากนั้นจัดสไตล์เพื่อให้ผู้ใช้รู้ว่าอ่านได้อย่างเดียว อินพุตที่วางไว้ที่นี่ (จาก AJAX เป็นต้น) ยังสามารถส่งได้โดยไม่ต้องใช้รหัสเพิ่มเติม

<input readonly style="color: Grey; opacity: 1; ">

คุณสามารถหลีกเลี่ยงการปิดการใช้งานโดยสิ้นเชิงมันเจ็บปวดเนื่องจากรูปแบบ html จะไม่ส่งสิ่งที่เกี่ยวข้อง<p>หรือป้ายกำกับอื่น ๆ

ดังนั้นคุณสามารถใส่ปกติ

<input text tag just before you have `/>

เพิ่มสิ่งนี้ readonly="readonly"

มันจะไม่ปิดการใช้งานข้อความของคุณ แต่จะไม่เปลี่ยนแปลงโดยผู้ใช้ดังนั้นจึงทำงานได้เหมือนกัน<p>และจะส่งค่าผ่านแบบฟอร์ม เพียงลบเส้นขอบหากคุณต้องการทำให้มันเหมือน<p>แท็กมากขึ้น