Comment s'assurer qu'un champ de formulaire <select> est soumis lorsqu'il est désactivé ?

Question

J'ai un select Je veux marquer un champ de formulaire comme étant "en lecture seule", c'est-à-dire que l'utilisateur ne peut pas modifier la valeur, mais celle-ci est quand même soumise avec le formulaire. En utilisant l'option disabled empêche l'utilisateur de modifier la valeur, mais ne soumet pas la valeur avec le formulaire.

Le site readonly est uniquement disponible pour input et textarea mais c'est en gros ce que je veux. Y a-t-il un moyen de le faire fonctionner ?

Voici deux possibilités que j'envisage :

• Au lieu de désactiver le select pour désactiver tous les option et utilisez le CSS pour griser la sélection afin de donner l'impression qu'elle est désactivée.
• Ajoutez un gestionnaire d'événement de clic au bouton d'envoi pour qu'il active tous les menus déroulants désactivés avant d'envoyer le formulaire.

Answer 1

Désactivez les champs, puis activez-les avant de soumettre le formulaire :

Code jQuery :

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

Answer 2

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

Où select_name est le nom que vous donneriez normalement à l <select> .

Une autre option.

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

J'ai remarqué que, selon le serveur Web que vous utilisez, vous devrez peut-être mettre l'option hidden soit avant, soit après l'entrée <select> .

Si ma mémoire est bonne, avec IIS, vous le mettez avant, avec Apache vous le mettez après. Comme toujours, les tests sont essentiels.

Answer 3

J'ai cherché une solution pour cela, et comme je n'ai pas trouvé de solution dans ce fil, j'ai fait le mien.

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

C'est simple, il suffit de brouiller le champ lorsque vous vous concentrez dessus, un peu comme si vous le désactiviez, mais vous envoyez réellement ses données.

Answer 4

Même solution que celle proposée par Tres sans utiliser 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>

Cela pourrait aider quelqu'un à mieux comprendre, mais c'est évidemment moins flexible que celui de jQuery.

Answer 5

J'utilise le code suivant pour désactiver les options dans les sélections

<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');
});