Как обеспечить отправку поля формы, когда оно отключено?
у меня есть select поле формы, которое я хочу отметить как "только для чтения", так как пользователь не может изменить значение, но значение по-прежнему передается с формой. Используя disabled атрибут не позволяет пользователю изменять значение, но не передает значение с формой.
The readonly атрибут доступен только для input и textarea поля, но это в основном то, что я хочу. Есть ли способ заставить это работать?
две возможности, которые я рассматриваю включают в себя:
- вместо отключения
selectотключить всеoptions и используйте CSS для серого цвета, чтобы он выглядел как отключенный. - добавьте обработчик событий click к кнопке submit, чтобы включить все отключенные выпадающие меню перед отправкой формы.
15 ответов:
<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 вы положили его после. Как всегда, ключевым является тестирование.
отключите поля, а затем включите их перед отправкой формы:
jQuery код:
jQuery(function ($) { $('form').bind('submit', function () { $(this).find(':input').prop('disabled', false); }); });
Я искал решение для этого, и так как я не нашел решение в этой теме, я сделал свой собственный.
// With jQuery $('#selectbox').focus(function(e) { $(this).blur(); });просто, вы просто размываете поле, когда вы фокусируетесь на нем, что-то вроде отключения его, но вы на самом деле отправляете свои данные.
он не работает с селектором: input для выбора полей, используйте это:
jQuery(function() { jQuery('form').bind('submit', function() { jQuery(this).find(':disabled').removeAttr('disabled'); }); });
я столкнулся с немного другим сценарием, в котором я только хотел не позволить пользователю изменить выбранное значение на основе более раннего selectbox. То, что я в конечном итоге сделал, это просто отключить все другие невыбранные параметры в поле выбора с помощью
$('#toSelect')find(':not(:selected)').attr('disabled','disabled');
то же решение, предложенное 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.
Я использую следующий код для отключения параметров в selections
<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'); });
самый простой способ, который я нашел, это создать крошечную функцию javascript, привязанную к вашей форме:
function enablePath() { document.getElementById('select_name').disabled= ""; }и вы называете это в своей форме здесь:
<form action="act.php" method="POST" name="form_name" onSubmit="enablePath();">или вы можете вызвать его в функцию вы используете, чтобы проверить свою форму :)
или используйте некоторый JavaScript, чтобы изменить имя select и установить его в disabled. Таким образом, выбор по-прежнему отправляется, но с использованием имени, которое вы не проверяете.
Я нашел приемлемое решение: удалить все элементы, кроме выбранного. Затем вы можете изменить стиль на что-то, что выглядит отключенным. С помощью jQuery:
jQuery(function($) { $('form').submit(function(){ $('select option:not(:selected)', this).remove(); }); });
Я поднял быстрый (только Jquery) плагин, который сохраняет значение в поле данных, когда вход отключен. Это просто означает, что пока поле отключается программно с помощью jquery.опора() или .attr()... доступ к стоимости .вал. ,)(сериализовать() или .serializeArra () всегда возвращает значение, даже если отключено:)
бесстыдный штекер:https://github.com/Jezternz/jq-disabled-inputs
основываясь на решении Иордана, я создал функцию, которая автоматически создает скрытый вход с тем же именем и тем же значением выбора, который вы хотите сделать недействительным. Первый параметр может быть идентификатором или элементом 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");
<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"); }
другой вариант - использовать атрибут только для чтения.
<select readonly="readonly"> .... </select>С помощью readonly значение все еще передается, поле ввода неактивно, и пользователь не может его редактировать.
Edit:
цитируется из http://www.w3.org/TR/html401/interact/forms.html#adef-readonly:
- читать-только элементы получают фокус, но не могут быть изменены пользователем.
- элементы только для чтения включены в табуляции навигация.
- элементы только для чтения могут быть успешными.
когда он говорит, что элемент может быть успешным, значит мая быть представлен, как указано здесь:http://www.w3.org/TR/html401/interact/forms.html#successful-controls
Comments