javascript - यह सुनिश्चित करने के लिए कि<select> फॉर्म फ़ील्ड अक्षम होने पर सबमिट किया गया हो?




html css (10)

मेरे पास एक select फॉर्म फ़ील्ड है जिसे मैं "रीडोनली" के रूप में चिह्नित करना चाहता हूं, क्योंकि उपयोगकर्ता मूल्य को संशोधित नहीं कर सकता है, लेकिन मान अभी भी फ़ॉर्म के साथ सबमिट किया गया है। disabled विशेषता का उपयोग करने से उपयोगकर्ता को मूल्य बदलने से रोकता है, लेकिन फॉर्म के साथ मान सबमिट नहीं करता है।

readonly विशेषता input और textarea फ़ील्ड के लिए उपलब्ध है, लेकिन यह मूल रूप से मैं चाहता हूं। क्या यह काम करने का कोई तरीका है?

मैं जिन दो संभावनाओं पर विचार कर रहा हूं उनमें शामिल हैं:

  • select को अक्षम करने के बजाय, सभी option को अक्षम select और select को भूरे रंग के लिए सीएसएस का उपयोग करें ताकि ऐसा लगता है कि यह अक्षम है।
  • सबमिट बटन पर एक क्लिक इवेंट हैंडलर जोड़ें ताकि फ़ॉर्म को सबमिट करने से पहले यह सभी अक्षम ड्रॉपडाउन मेनू सक्षम कर सके।

JQuery का उपयोग किये बिना ट्रेज़ द्वारा सुझाए गए वही समाधान

<form onsubmit="document.getElementById('mysel').disabled = false;" action="..." method="GET">

   <select id="mysel" disabled="disabled">....</select>

   <input name="submit" id="submit" type="submit" value="SEND FORM">
</form>

यह किसी को और अधिक समझने में मदद कर सकता है, लेकिन स्पष्ट रूप से jQuery एक से कम लचीला है।


एक और विकल्प केवल पढ़ने योग्य विशेषता का उपयोग करना है।

<select readonly="readonly">
    ....
</select>

केवल पढ़ने के साथ मान अभी भी सबमिट किया गया है, इनपुट फ़ील्ड ग्रे हो गया है और उपयोगकर्ता इसे संपादित नहीं कर सकता है।

संपादित करें:

http://www.w3.org/TR/html401/interact/forms.html#adef-readonly से उद्धृत:

  • केवल-पढ़ने वाले तत्व फोकस प्राप्त करते हैं लेकिन उपयोगकर्ता द्वारा संशोधित नहीं किया जा सकता है।
  • केवल-पढ़ने वाले तत्व टैबबिंग नेविगेशन में शामिल हैं।
  • केवल-पढ़ने वाले तत्व सफल हो सकते हैं।

जब यह कहता है कि तत्व सफल हो सकता है, इसका मतलब है कि इसे यहां प्रस्तुत किया जा सकता है, जैसा कि यहां बताया गया है: http://www.w3.org/TR/html401/interact/forms.html#successful-controls


फ़ील्ड को अक्षम करें और फिर सबमिट किए जाने से पहले उन्हें सक्षम करें:

jQuery कोड:

jQuery(function ($) {        
  $('form').bind('submit', function () {
    $(this).find(':input').prop('disabled', false);
  });
});

मुझे एक व्यावहारिक समाधान मिला: चयनित तत्व को छोड़कर सभी तत्वों को हटा दें। फिर आप शैली को उस चीज़ में बदल सकते हैं जो अक्षम दिखता है। JQuery का उपयोग करना:

jQuery(function($) {
    $('form').submit(function(){
        $('select option:not(:selected)', this).remove();
    });
});

मैं इसके लिए एक समाधान की तलाश में हूं, और चूंकि मुझे इस धागे में कोई समाधान नहीं मिला है, मैंने अपना खुद का किया है।

// With jQuery
$('#selectbox').focus(function(e) {
    $(this).blur();
});

सरल, जब आप उस पर ध्यान केंद्रित करते हैं, तो आप केवल फ़ील्ड को धुंधला करते हैं, इसे अक्षम करने की तरह कुछ, लेकिन आप वास्तव में अपना डेटा भेजते हैं।


मैं चयन में अक्षम विकल्पों के लिए अगला कोड का उपयोग करता हूं

<select class="sel big" id="form_code" name="code" readonly="readonly">
   <option value="user_played_game" selected="true">1 Game</option>
   <option value="coins" disabled="">2 Object</option>
   <option value="event" disabled="">3 Object</option>
   <option value="level" disabled="">4 Object</option>
   <option value="game" disabled="">5 Object</option>
</select>

// Disable selection for options
$('select option:not(:selected)').each(function(){
 $(this).attr('disabled', 'disabled');
});

मैंने पाया सबसे आसान तरीका आपके फ़ॉर्म से जुड़ा एक छोटा जावास्क्रिप्ट फ़ंक्शन बनाना था:

function enablePath() {
    document.getElementById('select_name').disabled= "";
}

और आप इसे अपने फॉर्म में यहां कॉल करते हैं:

<form action="act.php" method="POST" name="form_name" onSubmit="enablePath();">

या आप इसे अपने फॉर्म की जांच के लिए उपयोग किए जाने वाले फ़ंक्शन में कॉल कर सकते हैं :)


यह धन के साथ काम नहीं करता है: चुनिंदा क्षेत्रों के लिए इनपुट चयनकर्ता, इसका उपयोग करें:

    jQuery(function() {

    jQuery('form').bind('submit', function() {
        jQuery(this).find(':disabled').removeAttr('disabled');
    });

    });

सबमिट करने से पहले बस एक लाइन जोड़ें।

$ ( "# XYZ") removeAttr ( "अक्षम")।


<select disabled="disabled">
    ....
</select>
<input type="hidden" name="select_name" value="selected value" />

जहां select_name वह नाम है जिसे आप आमतौर पर <select>

एक अन्य विकल्प।

<select name="myselect" disabled="disabled">
    <option value="myselectedvalue" selected="selected">My Value</option>
    ....
</select>
<input type="hidden" name="myselect" value="myselectedvalue" />

अब इस के साथ, मैंने देखा है कि आप जिस वेबसर्वर का उपयोग कर रहे हैं उसके आधार पर, आपको hidden इनपुट को पहले या बाद में <select> बाद रखना पड़ सकता है।

यदि मेरी याददाश्त सही ढंग से मेरी सेवा करती है, आईआईएस के साथ, आप इसे पहले रख देते हैं, अपाचे के साथ आप इसे डाल देते हैं। हमेशा के रूप में, परीक्षण कुंजी है।







html-select