Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Невозможно активировать radio кнопку в IE
 
 автор: Drago   (20.09.2007 в 22:08)   письмо автору
 
 

Есть такой код

<html>
<body>
<script>
var numvar = 3;
function add()
    {
    numvar++;

    var teg = document.getElementById("v");
    var newElem = document.createTextNode(numvar + ') ');
    teg.appendChild(newElem);

    newElem = document.createElement("input");
    newElem.type = 'radio';
    newElem.name = 'a';
    newElem.value = numvar;
    newElem.disabled = 0;
    teg.appendChild(newElem);

    newElem = document.createElement("br");
    teg.appendChild(newElem);
    }
</script>
<a href=# onclick='add()'>добавить</a>
<form>
<table><tr><td>
1) <input type=radio name=a value=1><br>
2) <input type=radio name=a value=2><br>
<span id=v></span>
</td></tr></table>
</form>
</body>
</html>


Добавление происходит отлично, но проблема в ИЕ. Созданные радио кнопки, невозможно активировать. В Опере и ФФ, такой проблемы нет.

Подскажите, как исправить?

   
 
 автор: bronenos   (20.09.2007 в 22:50)   письмо автору
 
   для: Drago   (20.09.2007 в 22:08)
 

а надо ли disabled менять? оно ж по умолч. - 0

   
 
 автор: Drago   (20.09.2007 в 23:11)   письмо автору
 
   для: bronenos   (20.09.2007 в 22:50)
 

да это я уже когда варианты решения перебирал - добавил.

   
 
 автор: RMW   (20.09.2007 в 23:23)   письмо автору
 
   для: Drago   (20.09.2007 в 22:08)
 

Попробуйте инпуты добавлять не в span а в form.

   
 
 автор: CNT   (21.09.2007 в 07:56)   письмо автору
 
   для: Drago   (20.09.2007 в 22:08)
 

Вот за что я люблю форумы, так это за то, что получаешь вопросы, о которых ранее никогда не задумывался... покумекаешь, найдешь решение, - и уже сам начинаешь больше знать.

Так что, Drago, большое спасибо за вопрос!

В общем, проблема тут в следующем:

1) в браузере MSIE, согласно документации, пользовать кнопку type=radio можно только тогда, когда она имеет имя, т.е. когда атрибут NAME у неё определён (в оригинале написано так: A user can select a radio button only if the button has a name.)

2) в прочих браузерах такого ограничения нет - и это НЕПРАВИЛЬНО. Вот попробуйте запустить простейший код, например в FF, и потыкайте в радиокнопки:
<html><body>
<form><input type="radio"><br><input type="radio"></form>
</body></html>

Потыкали? И что получилось?
Верно - получился полный бред.
Отметить такую (без имени) радиокнопку можно, а снять отметку - уже нельзя.
А в MSIE этот же код (запустите и проверьте) при клике по радиокнопке вовсе не даст вам ничего отметить - т.е. её нельзя будет "активировать", говоря вашими словами.
И это, по-моему, АБСОЛЮТНО ПРАВИЛЬНО (а в прочих браузерах - НЕПРАВИЛЬНО).

3) Как вы, видимо, уже догадались, радиокнопки, добавляемые вашим кодом, не получают атрибута NAME. Да, строка
newElem.name = 'a';
у вас в коде есть, но она - не функционирует в MSIE. Проверьте это сами - допишите в конце кода (после тега <FORM>) следующую конструкцию:
<input type="button" value="test" onclick="alert (document.body.innerHTML)">
, запустите файл в MSIE, добавьте радиокнопку и ткните в "test", а потом поищите в алерте outerHTML той самой новой кнопки - он будет БЕЗ атрибута NAME.

4) решение этой проблемы есть в документации - "Microsoft® JScript® allows the name to be changed at run time. This does not cause the name in the programming model to change in the collection of elements, but it does change the name used for submitting elements.
In Microsoft® Internet Explorer 5, the NAME attribute cannot be set at run time on A elements dynamically created with the createElement method. To create an A element with a name attribute, include the attribute and value when using the createElement method, or use the innerHTML property."


Перевожу: "Атрибут NAME не может устанавливаться во время выполнения в элементах, динамически созданных методом createElement. Для того, чтобы установить атрибут NAME, необходимо прописать его СРАЗУ в метод createElement, или же использовать innerHTML."
И действует это в отношении динамически созданных тегов A, APPLET, BUTTON, EMBED, FORM, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=hidden, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, LINK, MAP, OBJECT, RT, RUBY, SELECT, TEXTAREA. Для всех прочих тегов (типа SPAN, DIV...) такого ограничения нет.

Т.е. ваша задача (для MSIE) решается так:
вместо вашего
newElem = document.createElement("input");
    newElem.type = 'radio';
    newElem.name = 'a';
    newElem.value = numvar;
    newElem.disabled = 0;
    teg.appendChild(newElem); 

надо написать
newElem = document.createElement ('<input name="a" type="radio" value="' + numvar + '">');
teg.appendChild (newElem);

И в MSIE всё прекрасно заработает.
Правда, перестанет работать в FF :-))
Но здесь, я полагаю, вы разберетесь самостоятельно: т.е. сначала определите navigator.userAgent, и если есть подстрока "MSIE", то делайте одним createElement, ну а для прочих браузеров - так, как вы и делали ранее.

------------
И последнее.
а) Вам что, действительно нужно, чтобы ваша страница после всякого добавления новой радиокнопки каждый раз дергалась?
Видимо, всё же не нужно... а вы просто ЗАБЫЛИ добавить в ONCLICK отмену действия по умолчанию.
Т.е. перепишите ссылку в виде:
<a href=# onclick='add (); return false'>добавить</a>


б) тег <SPAN> - излишество. Уберите его, а id="v" назначьте ячейке <TD>. И код будет работать не хуже.

   
 
 автор: Drago   (21.09.2007 в 10:27)   письмо автору
 
   для: CNT   (21.09.2007 в 07:56)
 

Огромнейшее спасибо, за такой подробный развернутый ответ! Все исправил, все работает. :)

>И последнее...
На самом деле, это не полный код. Я многое вырезал из функции и HTML, для того, чтобы было лучше видно, собственно, проблему.
Но, тем не мение, спасибо и за это дополнение. :)


Теперь, маленький тест.

Чуть изменив мою исходную функцию, а именно, заменив radio на text, добавим кнопочку submit и поместим это все в php файл, в котором будут выводится POST данные. Вообщем, вот такой скрипт:

<html>
<body>

<?php
echo "<pre>";
print_r($_POST['a']);
echo 
"</pre>":
?>

<script>
var numvar = 2;
function add()
    {
    numvar++;

    var teg = document.getElementById("v");
    var newElem = document.createTextNode(numvar + ') ');
    teg.appendChild(newElem);

    newElem = document.createElement("input");
    newElem.type = 'text';
    newElem.name = 'a[]';
    newElem.value = numvar;
    teg.appendChild(newElem);

    newElem = document.createElement("br");
    teg.appendChild(newElem);
    }
</script>
<a href=# onclick='add();return false;'>добавить</a>
<form method=post action=''>
<table><tr><td id=v>
1) <input type=text name=a[] value=1><br>
2) <input type=text name=a[] value=2><br>

</td></tr></table>
<input type=submit value=Отправить>
</form>
<input type="button" value="test" onclick="alert (document.body.innerHTML)">
</body>
</html>


Теперь, если добавить несколько текстовых полей, и убедившись (нажав на кнопочку test), что они не имеют аттрибута Name, жмем Отправить.

В результате, получаем в POST данных значения, помимо, двух заранее созданных полей, еще и созданных динамически. Хотя, это, вроде как, противоречит приведенной вами информации:
...
И действует это в отношении динамически созданных тегов A, APPLET, BUTTON, EMBED, FORM, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=hidden, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, LINK, MAP, OBJECT, RT, RUBY, SELECT, TEXTAREA. Для всех прочих тегов (типа SPAN, DIV...) такого ограничения нет.


Не смотря на свою правильность, MSIE все же глючит? :)

   
 
 автор: CNT   (21.09.2007 в 11:08)   письмо автору
 
   для: Drago   (21.09.2007 в 10:27)
 

Ну, в общем, да... получается, что при ПРАВИЛЬНОМ теоретическом подходе, практическая реализация в MSIE оказывается ГЛЮЧНОЙ.

Если тестовую кнопочку прописать в виде
<input
type="button"
value="test"
onclick="alert (document.forms [0].innerHTML);
               for (var t = document.forms [0].elements, j = 0; j <t.length; j++)
               with (t [j]) alert (type + '-\t-' + name + '-\t-' + value)">
то эта "глючность" особо хорошо видна - в innerHTML атрибута NAME у добавленных кнопок нет, а вот у каждого из elements формы (в том числе и у этих вновь добавленных кнопок) - есть.

Ну что же делать?
MSIE с Windows давно "мастдай", но пока этими системой и браузером пользуются, нам - программистам - приходится эти глюки учитывать.
С другой стороны, при "полном ажуре" (и в теории, и в реализации) было бы и вовсе неинтересно :-)))

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования