Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Проблемы с созданием INPUT RADIO


Автор: Ace Wentura 16.8.2005, 13:01
Есть задача - показывать пункты выбора при определённых условиях.
То есть выбираю, скажем, из двух радио-кнопок первую - появляется дополнительный пункт меню у неё. Со второй аналогично.

Создание вроде как осилил, но возникают проблемы:
в IE не происходит чек - то есть нельзя сделать выбор. Просто создаётся и всё
в Мозиле и Опере чек сделать можно, но на события онЧек ругается.

Вот пример:
Код

<html><head><title></title></head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
var radio1, radio2, radio3, radio4;

radio1 = document.createElement("input");
radio1.setAttribute("name","radiobutton1");
radio1.setAttribute("type","radio");
radio1.setAttribute("value","1");

radio2 = document.createElement("input");
radio2.setAttribute("name","radiobutton1");
radio2.setAttribute("type","radio");
radio2.setAttribute("value","2");
radio2.setAttribute("onCheck","Show3();");

radio3 = document.createElement("input");
radio3.setAttribute("name","radiobutton2");
radio3.setAttribute("type","radio");
radio3.setAttribute("value","3");

radio4 = document.createElement("input");
radio4.setAttribute("name","radiobutton2");
radio4.setAttribute("type","radio");
radio4.setAttribute("value","4");

function Show1() {
  document.getElementById("first").appendChild(radio1);
  document.getElementById("first").appendChild(radio2);
}

function Show2() {
  document.getElementById("second").appendChild(radio1);
  document.getElementById("second").appendChild(radio2);
}

function Show3() {
  document.getElementById("first1").appendChild(radio3);
  document.getElementById("first1").appendChild(radio4);
}
<!---->
</script>
<form name="form1" method="post" action="">
<table width="100%"  border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="30%">
      <input name="radiobutton" type="radio" value="first" onClick="Show1()">
      First
    </td>
    <td width="30%" id="first">&nbsp;</td>
    <td id="first1">&nbsp;</td>
  </tr>
  <tr>
    <td>
      <input name="radiobutton" type="radio" value="second" onClick="Show2()">
      Second
    </td>
    <td id="second">&nbsp;</td>
    <td id="second1">&nbsp;</td>
  </tr>
</table>
</form>
</body></html>

Должно происходить:
по выбору первого пункта правее него появляются 2 дополнительных радиобатона. По выбору второго из них должны появляться ещё правее ещё 2 радиобатона.

Автор: Aliance 16.8.2005, 13:09
Проблема в том, что ты передаешь методу appendChild() одну и ту же ноду, так делать нельзя. Если нода вставлена, то ее последующая вставка автоматически ее удаляет и вставляет в нужное место. Таким образом, пользуйся методом cloneNode()
Добавлено @ 13:12
Код

<html><head><title></title></head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
var radio1, radio2, radio3, radio4;

radio1 = document.createElement("input");
radio1.setAttribute("name","radiobutton1");
radio1.setAttribute("type","radio");
radio1.setAttribute("value","1");

radio2 = document.createElement("input");
radio2.setAttribute("name","radiobutton1");
radio2.setAttribute("type","radio");
radio2.setAttribute("value","2");
radio2.setAttribute("onCheck","Show3();");

radio3 = document.createElement("input");
radio3.setAttribute("name","radiobutton2");
radio3.setAttribute("type","radio");
radio3.setAttribute("value","3");

radio4 = document.createElement("input");
radio4.setAttribute("name","radiobutton2");
radio4.setAttribute("type","radio");
radio4.setAttribute("value","4");

function Show1() {
  document.getElementById("first").appendChild(radio1);
  document.getElementById("first").appendChild(radio2);
}

var radio1_clone = radio1.cloneNode(true);
var radio2_clone = radio2.cloneNode(true);

function Show2() {
  document.getElementById("second").appendChild(radio1_clone);
  document.getElementById("second").appendChild(radio2_clone);
}
<!---->
</script>
<form name="form1" method="post" action="">
<table width="100%"  border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="30%">
      <input name="radiobutton" type="radio" value="first" onClick="Show1()">
      First
    </td>
    <td width="30%" id="first">&nbsp;</td>
    <td id="first1">&nbsp;</td>
  </tr>
  <tr>
    <td>
      <input name="radiobutton" type="radio" value="second" onClick="Show2()">
      Second
    </td>
    <td id="second">&nbsp;</td>
    <td id="second1">&nbsp;</td>
  </tr>
</table>
</form>
</body></html>

Автор: Sardar 16.8.2005, 14:37
Цитата(Ace @ 16.8.2005, 12:01)
в IE не происходит чек - то есть нельзя сделать выбор. Просто создаётся и всё

Это возможно если у чекбоска нет имени. В ИЕ нельзя инпутам ставить имя через name/setAttribute, его личное ограничение. Фикситься через:
Код
document.createElement("<input name='imja'>");

Да, не по стандарту... а когда ИЕ за стандартами следил...? smile

Автор: Ace Wentura 16.8.2005, 14:45
Спасибо большое
Буду переделывать и отлаживать smile

Автор: Ace Wentura 16.8.2005, 15:02
Возник ещё несколько вопросов примерно по этой же теме:
1. Можно ли создать так:
Код

document.createElement("<input name='imja' type='radio' value='123'>");

2. Как лучше описать название для пункта? Через label или через текстовое поле? И как лучше сделать такое создание?

Автор: Aliance 16.8.2005, 15:39
1. Зачем? Просто вставляй тогда innerHTML, либо другими методами.
2. Через label, но это не в тот раздел, наверное.

Автор: Ace Wentura 18.8.2005, 12:00
Приходится снова возвращаться к данной тематике:
у меня сейчас создаётся input с именем, как посоветовал Sardar. Это замечательно работает в ИЕ. Но перестало работать в Мозиле и Опере. Что можете порекомедовать:
- создавать определяя тип браузера?
или
- использовать какой-то единый подход для создания, но несколько отличающийся от моего?

Автор: Aliance 18.8.2005, 13:52
Цитата(Ace @ 18.8.2005, 13:00)
использовать какой-то единый подход для создания, но несколько отличающийся от моего?

smile

Может прибегнуть все-таки к innerHTML?

Автор: Ace Wentura 18.8.2005, 15:09
Я попробовал сделать так:
Код

member1=document.createElement("<label class='main'>");
member1.innerHTML="<input name='Members' type='radio' value='user' class='main'>123";

Но в мозиле появляется непонятная вещь - <> перед радиобатоном...
Как поправить - не знаю.

Автор: Sardar 18.8.2005, 15:38
Цитата(Ace @ 18.8.2005, 11:00)
Но перестало работать в Мозиле и Опере. Что можете порекомедовать:

Я же сказал:
Цитата(Sardar @ 16.8.2005, 13:37)
Да, не по стандарту... а когда ИЕ за стандартами следил...? smile

В мозилле и опере работаем согласно спецификации DOM 1, т.е. передаём имя тега, и только в ИЕ лажу. За то что ИЕ плюёт на стандарты, ему даже некоторые бойкот устроили smile
Цитата(Ace @ 18.8.2005, 14:09)
Я попробовал сделать так:

Эта строчка: member1=document.createElement("<label class='main'>");Валидна только в ИЕ, а весь остальной мир плевать на неё хотел, ибо не по стандарту.
Меняем:
Код
var member1=document.createElement("LABEL");
member1.className='main';

Автор: Ace Wentura 18.8.2005, 16:13
АФФИгеть.
В одной строчке поправил - всё заработало так, как было нужно.... Жуть какая-то. smile

Спсибо и Aliance и Sardar. smile Использовал совместный подход:
Код

var member1=document.createElement("LABEL");
member1.className='main';
member1.innerHTML="<input name='Members' type='radio' value='user' class='main'>123";

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)