web-dev-qa-db-fra.com

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

J'ai un champ de formulaire select que je veux marquer comme "en lecture seule", car l'utilisateur ne peut pas modifier la valeur, mais la valeur est toujours soumise avec le formulaire. L'utilisation de l'attribut disabled empêche l'utilisateur de modifier la valeur, mais ne la soumet pas avec le formulaire.

L'attribut readonly n'est disponible que pour les champs input et textarea, mais c'est essentiellement ce que je veux. Y a-t-il un moyen de le faire fonctionner?

Deux possibilités que je considère incluent:

  • Au lieu de désactiver select, désactivez tous les options et utilisez CSS pour masquer la sélection de sorte qu'elle ressemble à sa désactivée.
  • Ajoutez un gestionnaire d'événements click au bouton d'envoi afin qu'il active tous les menus déroulants désactivés avant de soumettre le formulaire.
javascripthtmlcssformshtml-select
172
Marquis Wang
<select disabled="disabled">
    ....
</select>
<input type="hidden" name="select_name" value="selected value" />

Où select_name est le nom que vous donneriez normalement à <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" />

Maintenant, avec celui-ci, j’ai remarqué que, selon le serveur Web que vous utilisez, vous devrez peut-être entrer l’entrée hidden avant ou après le <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 la clé.

113
Jordan S. Jones

Désactivez les champs, puis activez-les avant que le formulaire ne soit soumis:

code jQuery:

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

Je cherchais une solution pour cela, et comme je ne trouvais pas de solution dans ce fil, je le faisais moi-même.

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

C'est simple, vous floutez le champ lorsque vous vous concentrez dessus, par exemple, vous le désactivez, mais vous envoyez ses données.

12
Jean Paul Rumeau

Je me trouvais face à un scénario légèrement différent, dans la mesure où je voulais uniquement empêcher l'utilisateur de modifier la valeur sélectionnée en fonction d'une zone de sélection antérieure. Ce que j’ai fini par faire, c’est tout simplement de désactiver toutes les autres options non sélectionnées de la zone de sélection en utilisant

$('#toSelect')find(':not(:selected)').attr('disabled','disabled');
7
trafalmadorian

cela ne fonctionne pas avec le sélecteur: input pour les champs sélectionnés, utilisez ceci:

    jQuery(function() {

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

    });
6
chhalpha

Même solution suggéré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 à comprendre plus, mais est évidemment moins flexible que celui de jQuery.

6
Marco Demaio

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

Ajoutez simplement une ligne avant de soumettre.

$ ("# XYZ"). RemoveAttr ("disabled");

4
PPB

Le moyen le plus simple que j'ai trouvé était de créer une petite fonction javascript liée à votre formulaire:

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

et vous l'appelez sous votre forme ici:

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

Ou vous pouvez l'appeler dans la fonction que vous utilisez pour vérifier votre formulaire :)

4
Alex PARISOT

J'ai créé un plugin rapide (Jquery uniquement), qui enregistre la valeur dans un champ de données lorsqu'une entrée est désactivée. Cela signifie simplement que tant que le champ est désactivé par programme via jquery à l'aide de .prop () ou .attr () ..., l'accès à la valeur par .val (), .serialize () ou .serializeArra () renvoie toujours le résultat. valeur même si désactivé :)

Prise éhontée: https://github.com/Jezternz/jq-disabled-inputs

2
Josh Mc

Ou utilisez du JavaScript pour changer le nom de la sélection et le définir sur désactivé. De cette façon, la sélection est toujours soumise, mais sous un nom que vous ne vérifiez pas.

2
Byron Whitlock

J'ai trouvé une solution viable: supprimez tous les éléments sauf celui sélectionné. Vous pouvez ensuite changer le style en quelque chose qui semble également désactivé. Utilisation de jQuery:

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

Sur la base de la solution de Jordan, j'ai créé une fonction qui crée automatiquement une entrée masquée avec le même nom et la même valeur que la sélection que vous souhaitez invalider. Le premier paramètre peut être un élément id ou jquery; le second est un paramètre facultatif booléen où "true" est désactivé et "false" active l'entrée. Si omis, le second paramètre bascule la sélection entre "activé" et "désactivé".

function changeSelectUserManipulation(obj, disable){
    var $obj = ( typeof obj === 'string' )? $('#'+obj) : obj;
    disable = disable? !!disable : !$obj.is(':disabled');

    if(disable){
        $obj.prop('disabled', true)
            .after("<input type='hidden' id='select_user_manipulation_hidden_"+$obj.attr('id')+"' name='"+$obj.attr('name')+"' value='"+$obj.val()+"'>");
    }else{
        $obj.prop('disabled', false)
            .next("#select_user_manipulation_hidden_"+$obj.attr('id')).remove();
    }
}

changeSelectUserManipulation("select_id");
1
Doglas
<select id="example">
    <option value="">please select</option>
    <option value="0" >one</option>
    <option value="1">two</option>
</select>



if (condition){
    //you can't select
    $("#example").find("option").css("display","none");
}else{
   //you can select
   $("#example").find("option").css("display","block");
}
0
Thxopen