Как обеспечить, чтобы поле формы <select> было отправлено, когда оно отключено?
У меня есть поле формы select
, которое я хочу пометить как "readonly", так как пользователь не может изменить значение, но значение все равно представляется с формой. Использование атрибута disabled
не позволяет пользователю изменять значение, но не передает значение с помощью формы.
Атрибут readonly
доступен только для полей input
и textarea
, но это в основном то, что я хочу. Есть ли способ заставить это работать?
Две возможности, которые я рассматриваю, включают:
- Вместо отключения
select
отключите все option
и используйте CSS для выделения серым цветом, чтобы он выглядел как отключенный.
- Добавьте обработчик события клика в кнопку отправки, чтобы он разрешил все отключенные меню выпадающего меню перед отправкой формы.
Ответы
Ответ 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