Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.09.2012, 20:27
Новичок на форуме
Отправить личное сообщение для Дуб-Дубом Посмотреть профиль Найти все сообщения от Дуб-Дубом
 
Регистрация: 23.09.2012
Сообщений: 7

Добавление уникального id в input, для radiobutton
Добрый день.

Пожалуйста, напишите пользовательский скрипт для браузера Opera 12.02. Нужно подрихтовать скриптом одни кнопки на странице и добавить свои кнопки, чтобы ими можно было управлять "подрихтованными" кнопками. Вот как-то так, в кратце. Подробнее ниже.

Нужно сгенерировать уникальный id и добавить оный в тег input.
Данные для генерирования нужно брать из того-же тега input в который добавляется сгенерированный id.

Подробнее:
На странице нужно найти тег
<span class="nodecontrols">
внутри которого есть разные теги, среди которых есть пять штук input-ов (радиокнопки), для каждой из который нужно добавить уникальный id, предварительно сгенерированный скриптом из того что есть в найденных тегах input.
Вот пример кнопок.
<SPAN class="nodecontrols" >
<SPAN class="date" >1</SPAN>
<input class="my_input" name="reno_dva_4447778" type="radio" value="0"  onclick="Change(4447778,0);"/>
<SPAN class="date" >2</SPAN>
<input class="my_input" name="reno_dva_4447778" type="radio" value="1.0"  onclick="Change(4447778,1.0);"/>
<SPAN class="date" >3</SPAN>
<input class="my_input" name="reno_dva_4447778" type="radio" value="2.0"  onclick="Change(4447778,2.0);"/>
<SPAN class="date" >4</SPAN>
<input class="my_input" name="reno_dva_4447778" type="radio" value="3.0" onclick="Change(4447778,3.0);"/>
<SPAN class="date" >5</SPAN>
<input class="my_input" name="reno_dva_4447778" type="radio" value="4.0" checked="" onclick="Change(4447778,4.0);"/>


Нужно к шаблону в виде слова "reno"(это первые 4 символа в name и они не меняются) добавить к ним через "_" символы взятые из value и еще, тоже через "_" добавить цифры из onclick, те что в скобках до запятой (функция Change называется немного иначе, если это важно).

Чтобы получились вот такие id для каждого тега input.
id="reno_0_4447778"
id="reno_1.0_4447778"
id="reno_2.0_4447778"
id="reno_3.0_4447778"
id="reno_4.0_4447778"

и добавить их в соответствующие теги, чтобы разметка приняла такой вид.
<SPAN class="date" >1</SPAN>
<input class="my_input" name="reno_dva_4447778" id="reno_0_4447778" type="radio" value="0" onclick="Change(4447778,0);"/>
<SPAN class="date" >2</SPAN>
<input class="my_input" name="reno_dva_4447778" id="reno_1.0_4447778" type="radio" value="1.0" onclick="Change(4447778,1.0);"/>
<SPAN class="date" >3</SPAN>
<input class="my_input" name="reno_dva_4447778" id="reno_2.0_4447778" type="radio" value="2.0" onclick="Change(4447778,2.0);"/>
<SPAN class="date" >4</SPAN>
<input class="my_input" name="reno_dva_4447778" id="reno_3.0_4447778" type="radio" value="3.0" onclick="Change(4447778,3.0);"/>
<SPAN class="date" >5</SPAN>
<input class="my_input" name="reno_dva_4447778" id="reno_4.0_4447778" type="radio" value="4.0" checked="" onclick="Change(4447778,4.0);"/>

Таких блоков с кнопками, по пять штук, на странице может быть от 10 до 200 штук. Нужно поочередно пройтись по всем и сгенерировать уникальный id для каждой кнопки. Каждый блок из пяти кнопок в отдельном блоке
<span class="nodecontrols">


---


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

Для вставки кода дополнительных кнопок, на странице нужно найти тег (в id и class на самом деле другие названия, их я пропишу сам, но они одинаковы.)
<div id="a_pl" class="a_pl">

и сразу после него, внедрить на страницу блок кнопок. Код как есть, нужно просто взять из скрипта и встроить после найденного тега на странице.

<DIV id="controls_abc"  style="text-align:right;" >
  <b>Мои кнопки добавленные на страницу</b>
  <SPAN class="date" >1</SPAN>
  <INPUT class="postimod"  type="radio"  name="reno_select_all"  onclick="ChangeAll(0);" >
  <SPAN class="date" >2</SPAN>
  <INPUT class="postimod"  type="radio"  name="reno_select_all"  onclick="ChangeAll(1.0);" >
  <SPAN class="date" >3</SPAN>
  <INPUT class="postimod"  type="radio"  name="reno_select_all"  onclick="ChangeAll(2.0);" >
  <SPAN class="date" >4</SPAN>
  <INPUT class="postimod"  type="radio"  name="reno_select_all"  onclick="ChangeAll(3.0);" >
  <SPAN class="date" >5</SPAN>
  <INPUT class="postimod"  type="radio"  name="reno_select_all"  onclick="ChangeAll(4.0);" >
</DIV>

Последний раз редактировалось Дуб-Дубом, 28.09.2012 в 23:50. Причина: Исправил некоторые опечатки ((
Ответить с цитированием
  #2 (permalink)  
Старый 28.09.2012, 20:54
Новичок на форуме
Отправить личное сообщение для Дуб-Дубом Посмотреть профиль Найти все сообщения от Дуб-Дубом
 
Регистрация: 23.09.2012
Сообщений: 7

Сообщение от Дуб-Дубом Посмотреть сообщение
символы взятые из value и еще, тоже через "_" добавить цифры из onclick, те что в скобках до запятой
Задача немного упрощается, так сказать... данные для генерирования id можно брать из onclick, подробнее в п.3

Вот в кратце, что нужно выполнить скриптом, пошагово. Если не трудно, подскажите ссылками, в какую сторону рыть по каждому пункту.
1. Найти на странице строку <span class="nodecontrols"> или первый найденный тег span с классом nodecontrols
2. найти input который нужно подрихтовать
3. в input найти onclick и взять цифры из скобок "Change(4447778,4.0)", разделенные запятой.
4. Взять из переменной строку с словом reno и добавить к строке сначала те цифры что справа от зяпятой, затем те что слева, разделяя цифры подчеркиванием. Чтобы получилась такая строка reno_4.0_4447778
5. добавить в input id с этим значением. id="reno_4.0_4447778"
6. пройтись также по остальным 4-м input-ам в теге <span class="nodecontrols">
7. найти следующий тег <span class="nodecontrols"> в нем input-ы и подрихтовать их так-же. И так до конца страницы.

Вопросы по пунктам...
1. Как найти нужный тег на странице?
Достаточно ли прописать так
if (document.querySelector('#nodecontrols')){
// Тут какой-то код
    }

или нужно искать сначала тег span?
или нужно искать точное соответствие тега и класса?
2. Найти input можно функцией document.querySelectorAll()?
3. Как вытащить в отдельные переменные данные, содержащиеся в скобках функции Change(4447778,4.0)?
4. Допустим, это я смогу сделать самостоятельно.
5. Как создать новый id в input и добавить туда свое значение из строковой переменной? Или нужно считывать все данные из input, затем удалять этот тег и создавать input заново, но уже с добавленным id?
6 и 7. Все это нужно прописать в цикле или скрипт сам пройдется по странице, подрихтовывая по пути все найденные теги?

P.S.
Подскажите дубу, где скачать справочник по JavaScript в chm-формате?

---

Сейчас заметил опечатку в коде, в первом сообщении...
Там у всех input-ов был атрибут checked="", на самом деле он у одного из пяти штук, это же радиокнопки ))

Дык вот что еще понадобилось по ходу...
Нужно пропускать все пять input-ов, не рихтовать их, если в первом есть атрибут checked="". Нулевые не нужно будет переключать, поэтому и код рихтовать нет необходимости.

Последний раз редактировалось Дуб-Дубом, 28.09.2012 в 23:56.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 20:48
Модуль для работы с модулями JSprog Ваши сайты и скрипты 29 02.09.2009 13:31
Разным элементам input - разное форматирование. Как? eclipse (X)HTML/CSS 1 25.10.2007 13:55
Позиция курсора в input type="text" (ie) Кирпич Общие вопросы Javascript 2 21.10.2007 06:44