javascript - form - template select html




Come garantire che un campo<select> venga inviato quando è disabilitato? (10)

Basta aggiungere una riga prima di inviare.

$ ( "# XYZ") removeAttr ( "disabilitata.");

Ho un campo modulo select che voglio contrassegnare come "readonly", in quanto l'utente non può modificare il valore, ma il valore è ancora inviato con il modulo. L'utilizzo dell'attributo disabled impedisce all'utente di modificare il valore, ma non invia il valore con il modulo.

L'attributo readonly è disponibile solo per i campi input e textarea , ma in pratica è quello che voglio. C'è un modo per farlo funzionare?

Due possibilità che sto considerando includono:

  • Invece di disabilitare la select , disabilitare tutte le option e usare i CSS per rendere grigia la selezione in modo che sembri disabilitata.
  • Aggiungi un gestore di eventi click al pulsante di invio in modo che attivi tutti i menu a discesa disabilitati prima di inviare il modulo.

Disabilitare i campi e quindi abilitarli prima che il modulo sia inviato:

codice jQuery:

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

Ho trovato una soluzione praticabile: rimuovere tutti gli elementi tranne quello selezionato. Puoi quindi cambiare lo stile in qualcosa che sembra disabilitato. Usando jQuery:

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

Il modo più semplice che ho trovato è stato quello di creare una piccola funzione javascript legata al tuo modulo:

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

e tu lo chiami nel tuo modulo qui:

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

Oppure puoi chiamarlo nella funzione che usi per controllare il tuo modulo :)


Io uso il prossimo codice per disabilitare le opzioni nelle selezioni

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

Mi sono trovato di fronte a uno scenario leggermente diverso, in quanto volevo solo non consentire all'utente di modificare il valore selezionato in base a una selezione precedente. Quello che ho finito è stato disabilitare tutte le altre opzioni non selezionate nella selectbox usando

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

Sono stato alla ricerca di una soluzione per questo, e dal momento che non ho trovato una soluzione in questo thread ho fatto il mio.

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

Semplice, devi solo sfocare il campo quando ti concentri su di esso, qualcosa come disabilitarlo, ma in realtà invii i suoi dati.


Un'altra opzione è usare l'attributo readonly.

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

Con readonly il valore è ancora inviato, il campo di input è disattivato e l'utente non può modificarlo.

Modificare:

Citato da http://www.w3.org/TR/html401/interact/forms.html#adef-readonly :

  • Gli elementi di sola lettura ricevono il focus ma non possono essere modificati dall'utente.
  • Gli elementi di sola lettura sono inclusi nella navigazione a schede.
  • Gli elementi di sola lettura potrebbero avere successo.

Quando dice che l'elemento può essere di successo, significa che può essere inviato, come indicato qui: http://www.w3.org/TR/html401/interact/forms.html#successful-controls


La stessa soluzione suggerita da Tres senza usare 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>

Questo potrebbe aiutare qualcuno a capire di più, ma ovviamente è meno flessibile di quello di jQuery.


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

Dove select_name è il nome che normalmente darebbe a <select> .

Un'altra opzione.

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

Ora con questo, ho notato che, a seconda del server web che si sta utilizzando, potrebbe essere necessario inserire l'input hidden prima o dopo <select> .

Se la mia memoria mi serve correttamente, con IIS, lo metti prima, con Apache lo metti dopo. Come sempre, il test è la chiave.





html-select