it-swarm.com.de

Wie kann sichergestellt werden, dass ein Formularfeld <select> gesendet wird, wenn es deaktiviert ist?

Ich habe ein Formularfeld select, das ich als "schreibgeschützt" markieren möchte, da der Benutzer den Wert nicht ändern kann, der Wert jedoch weiterhin mit dem Formular übermittelt wird. Die Verwendung des Attributs disabled verhindert, dass der Benutzer den Wert ändert, übermittelt ihn jedoch nicht mit dem Formular.

Das readonly -Attribut ist nur für die Felder input und textarea verfügbar, aber im Grunde ist es das, was ich will. Gibt es eine Möglichkeit, das zum Laufen zu bringen?

Zwei Möglichkeiten, die ich erwäge, umfassen:

  • Anstatt das select zu deaktivieren, deaktivieren Sie alle options und verwenden Sie CSS, um die Auswahl so auszublenden, dass sie wie deaktiviert aussieht.
  • Fügen Sie der Senden-Schaltfläche einen Click-Event-Handler hinzu, damit alle deaktivierten Dropdown-Menüs aktiviert werden, bevor Sie das Formular senden.
172
Marquis Wang
<select disabled="disabled">
    ....
</select>
<input type="hidden" name="select_name" value="selected value" />

Wobei select_name Der Name ist, den Sie normalerweise als <select> Bezeichnen würden.

Andere Option.

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

Jetzt ist mir aufgefallen, dass Sie je nach verwendetem Webserver die Eingabe hidden entweder vor oder nach dem <select> Eingeben müssen.

Wenn mein Gedächtnis mir richtig dient, setzen Sie es mit IIS vor, mit Apache setzen Sie es nach. Testen ist wie immer der Schlüssel.

113
Jordan S. Jones

Deaktivieren Sie die Felder und aktivieren Sie sie, bevor das Formular gesendet wird:

jQuery-Code:

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

Ich habe nach einer Lösung dafür gesucht und da ich in diesem Thread keine Lösung gefunden habe, habe ich meine eigene gefunden.

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

Ganz einfach, Sie verwischen das Feld, wenn Sie sich darauf konzentrieren, und deaktivieren es, aber Sie senden tatsächlich die Daten.

12

Ich war mit einem etwas anderen Szenario konfrontiert, da ich dem Benutzer nur nicht erlauben wollte, den ausgewählten Wert basierend auf einer früheren Auswahlbox zu ändern. Am Ende habe ich einfach alle anderen nicht ausgewählten Optionen in der Auswahlbox mit deaktiviert

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

dies funktioniert nicht mit dem Eingabeselektor: für Auswahlfelder. Verwenden Sie diesen:

    jQuery(function() {

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

    });
6
chhalpha

Dieselbe von Tres vorgeschlagene Lösung ohne Verwendung von 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>

Dies mag jemandem helfen, mehr zu verstehen, ist aber offensichtlich weniger flexibel als jQuery.

6
Marco Demaio

Ich verwende den nächsten Code zum Deaktivieren von Optionen in Auswahlen

<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

Fügen Sie vor dem Absenden einfach eine Zeile hinzu.

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

4
PPB

Der einfachste Weg, den ich gefunden habe, war das Erstellen einer kleinen Javascript-Funktion, die mit Ihrem Formular verknüpft ist:

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

und du nennst es in deiner Form hier:

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

Oder Sie können es in der Funktion aufrufen, mit der Sie Ihr Formular überprüfen :)

4
Alex PARISOT

Ich habe ein schnelles Plugin (nur Jquery) erstellt, das den Wert in einem Datenfeld speichert, während eine Eingabe deaktiviert ist. Dies bedeutet nur, solange das Feld programmgesteuert durch jquery mit .prop () oder .attr () deaktiviert wird. Wenn Sie dann mit .val (), .serialize () oder .serializeArra () auf den Wert zugreifen, wird immer der Wert zurückgegeben Wert auch wenn deaktiviert :)

Schamloser Stecker: https://github.com/Jezternz/jq-disabled-inputs

2
Josh Mc

Oder verwenden Sie JavaScript, um den Namen der Auswahl zu ändern und sie zu deaktivieren. Auf diese Weise wird die Auswahl weiterhin gesendet, aber mit einem Namen, den Sie nicht überprüfen.

2
Byron Whitlock

Ich habe eine praktikable Lösung gefunden: Entfernen Sie alle Elemente außer dem ausgewählten. Sie können den Stil dann auch in einen deaktivierten Stil ändern. Verwenden von jQuery:

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

Basierend auf der Lösung des Jordan habe ich eine Funktion erstellt, die automatisch eine versteckte Eingabe mit demselben Namen und demselben Wert der Auswahl erstellt, die ungültig werden soll. Der erste Parameter kann eine ID oder ein Abfrageelement sein. Der zweite ist ein optionaler boolescher Parameter, bei dem "true" deaktiviert und "false" die Eingabe aktiviert. Wenn nicht angegeben, schaltet der zweite Parameter die Auswahl zwischen "aktiviert" und "deaktiviert" um.

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