Подтвердить что ты не робот

Как обеспечить, чтобы поле формы <select> было отправлено, когда оно отключено?

У меня есть поле формы select, которое я хочу пометить как "readonly", так как пользователь не может изменить значение, но значение все равно представляется с формой. Использование атрибута disabled не позволяет пользователю изменять значение, но не передает значение с помощью формы.

Атрибут readonly доступен только для полей input и textarea, но это в основном то, что я хочу. Есть ли способ заставить это работать?

Две возможности, которые я рассматриваю, включают:

  • Вместо отключения select отключите все option и используйте CSS для выделения серым цветом, чтобы он выглядел как отключенный.
  • Добавьте обработчик события клика в кнопку отправки, чтобы он разрешил все отключенные меню выпадающего меню перед отправкой формы.
4b9b3361

Ответ 1

<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>.

Если моя память правильно меня обслуживает, с IIS, вы положили ее раньше, с Apache, которую вы положили после. Как всегда, тестирование является ключевым.

Ответ 2

Отключите поля и затем включите их перед отправкой формы:

Код jQuery:

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

Ответ 3

Я искал решение для этого, и так как я не нашел решение в этой теме, я сделал свой собственный.

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

Простой, вы просто размываете поле, когда фокусируетесь на нем, что-то вроде отключения его, но вы действительно отправляете его данные.

Ответ 4

он не работает с селектором: для выбора полей, используйте это:

    jQuery(function() {

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

    });

Ответ 5

Я столкнулся с немного другим сценарием, потому что я просто не хотел, чтобы пользователь мог изменить выбранное значение на основе более раннего selectbox. То, что я закончил, было просто отключением всех других не выбранных опций в selectbox с помощью

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

Ответ 6

То же решение, предложенное Tres без использования 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.

Ответ 7

Я использую следующий код для отключения параметров в выборе

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

Ответ 8

Просто добавьте строку перед отправкой.

$ ( "# XYZ" ) removeAttr ( "отключено" );.

Ответ 9

Или используйте какой-либо JavaScript, чтобы изменить имя выбора и установить его для отключения. Таким образом, выбор по-прежнему отправляется, но с использованием имени, которое вы не проверяете.

Ответ 10

Самый простой способ, который я нашел, - создать крошечную функцию javascript, привязанную к вашей форме:

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

и вы вызываете его в своей форме:

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

Или вы можете вызвать его в функции, которую вы используете для проверки вашей формы:)

Ответ 11

Я нашел работоспособное решение: удалите все элементы, кроме выбранного. Затем вы можете изменить стиль на то, что выглядит также отключенным. Использование jQuery:

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

Ответ 12

Я взломал быстрый (только JQuery) плагин, который сохраняет значение в поле данных, когда вход отключен. Это просто означает, что пока поле автоматически отключается через jquery с использованием .prop() или .attr()... тогда доступ к значению с помощью .val(),.serialize() или .serializeArra() всегда будет возвращать значение, даже если оно отключено:)

Бесстыдный плагин: https://github.com/Jezternz/jq-disabled-inputs

Ответ 13

Основываясь на решении Jordan, я создал функцию, которая автоматически создает скрытый ввод с тем же именем и одним и тем же значением выбора, который вы хотите стать недействительным. Первым параметром может быть идентификатор или элемент jquery; второй - логический необязательный параметр, где "true" отключается, а "false" - вход. Если этот параметр опущен, второй параметр переключает выбор между "включен" и "отключен".

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");

Ответ 14

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

Ответ 15

Другой вариант - использовать атрибут readonly.

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

С готовностью значение по-прежнему отправляется, поле ввода неактивно, и пользователь не может его редактировать.

Edit:

Цитата из http://www.w3.org/TR/html401/interact/forms.html#adef-readonly:

  • Элементы только для чтения получают фокус, но не могут быть изменены пользователем.
  • Элементы только для чтения включены в навигацию по табуляции.
  • Элементы, доступные только для чтения, могут быть успешными.

Когда он говорит, что элемент может быть успешным, это означает, что он может быть представлен, как указано здесь: http://www.w3.org/TR/html401/interact/forms.html#successful-controls