За последние 24 часа нас посетили 16800 программистов и 1679 роботов. Сейчас ищут 852 программиста ...

Передать стили радиокнопок в техтареа

Тема в разделе "JavaScript и AJAX", создана пользователем semenovich, 17 июл 2011.

  1. semenovich

    semenovich Активный пользователь

    С нами с:
    17 июл 2011
    Сообщения:
    16
    Симпатии:
    0
    Каким образом можно передать класс радиокнопки на техтареа, чтобы менять цвета печатаемого текста?
    HTML:
    1. <form action="" method="post" enctype="multipart/form-data" id="form1">
    2.     <label><b>Заголовок</b> <br />
    3.     <input  name="text_1" type="text" id="textfield" size="100" maxlength="100" />
    4.      </label>
    5.     <table width="200">
    6.       <tr>
    7.         <td><label>
    8.           <input  class="zwet" type="radio" name="colors" value="color" id="colors_0" />
    9.           blue</label></td>
    10.       </tr>
    11.       <tr>
    12.         <td><label>
    13.           <input class="zwet_1" type="radio" name="colors" value="color" id="colors_1" />
    14.           orange</label></td>
    15.       </tr>
    16.     </table>
    17.     <label><br />
    18.     <br />
    19.     </label>
    20.     <p>
    21.       <label><b>Основной текст страницы</b><br />
    22.       <textarea name="tex_2" cols="146" rows="20" id="textfield2"></textarea>
    23.       </label>
    24.     </p>
    25.     <p>&nbsp;</p>
    26.     <p>&nbsp;</p>
    27.     <p>
    28.       <input name="files" type="file" id="files" size="40" maxlength="100" />
    29.     </p>
    30.     <p>
    31.           <label></label>
    32.           <br />
    33.           <br />
    34.           <label>
    35.           <input type="submit" name="button" id="button" value=" Отправить " />
    36.           </label>
    37.         </p>
    38.   </form>
     
  2. zebra

    zebra Активный пользователь

    С нами с:
    11 июн 2011
    Сообщения:
    16
    Симпатии:
    0
    [js]
    $('input[name=colors]').click(function()
    {
    $('#textfield2').removeClass().addClass( $(this).attr('class') );
    });
    [/js]
    на jquery
     
  3. Easy

    Easy Активный пользователь

    С нами с:
    15 июл 2011
    Сообщения:
    286
    Симпатии:
    0
    HTML:
    1. function setColor(el) {
    2.     document.getElementById('textfield2').className = el.className
    3. }
    4. <form action="" method="post" enctype="multipart/form-data" id="form1">
    5.      <label><b>Заголовок</b> <br />
    6.      <input  name="text_1" type="text" id="textfield" size="100" maxlength="100" />
    7.      </label>
    8.      <table width="200">
    9.        <tr>
    10.          <td><label>
    11.            <input  class="zwet" type="radio" name="colors" value="color" id="colors_0" onclick="setColor(this)" />
    12.            blue</label></td>
    13.        </tr>
    14.        <tr>
    15.          <td><label>
    16.            <input class="zwet_1" type="radio" name="colors" value="color" id="colors_1" onclick="setColor(this)" />
    17.            orange</label></td>
    18.        </tr>
    19.      </table>
    20.      <label><br />
    21.      <br />
    22.      </label>
    23.      <p>
    24.        <label><b>Основной текст страницы</b><br />
    25.        <textarea name="tex_2" cols="146" rows="20" id="textfield2"></textarea>
    26.        </label>
    27.      </p>
    28.      <p>&nbsp;</p>
    29.      <p>&nbsp;</p>
    30.      <p>
    31.        <input name="files" type="file" id="files" size="40" maxlength="100" />
    32.      </p>
    33.      <p>
    34.            <label></label>
    35.            <br />
    36.            <br />
    37.            <label>
    38.            <input type="submit" name="button" id="button" value=" Отправить " />
    39.            </label>
    40.          </p>
    41.    </form>
    42.  
    так на 100 кб меньше скрипт :)
     
  4. semenovich

    semenovich Активный пользователь

    С нами с:
    17 июл 2011
    Сообщения:
    16
    Симпатии:
    0
    что-то код не работает, весь высвечивается
     
  5. semenovich

    semenovich Активный пользователь

    С нами с:
    17 июл 2011
    Сообщения:
    16
    Симпатии:
    0
     
  6. Easy

    Easy Активный пользователь

    С нами с:
    15 июл 2011
    Сообщения:
    286
    Симпатии:
    0
    да не чего, функция одна, просто добавляете когда новую кнопку
    HTML:
    1. <input  class="zwet" type="radio" name="colors" value="color" id="colors_0" onclick="setColor(this)" />
    не забывайте в неё вписывать вызов функции
    HTML:
    1.  onclick="setColor(this)"
     
  7. semenovich

    semenovich Активный пользователь

    С нами с:
    17 июл 2011
    Сообщения:
    16
    Симпатии:
    0
    благодарю за помощь. И еще один вопрос заголовок как подключить к этому скрипту?
    HTML:
    1. <label><b>Заголовок</b> <br />
    2.      <input  name="text_1" type="text" id="textfield" size="100" maxlength="100" />
     
  8. Easy

    Easy Активный пользователь

    С нами с:
    15 июл 2011
    Сообщения:
    286
    Симпатии:
    0
    то есть что бы инпут тоже менял цвет?

    [js] <script>
    function setColor(el) {
    document.getElementById('textfield').className = document.getElementById('textfield2').className = el.className
    }
    </script>[/js]
     
  9. semenovich

    semenovich Активный пользователь

    С нами с:
    17 июл 2011
    Сообщения:
    16
    Симпатии:
    0
    Все получилось. А я еще хотел сделать размер шрифта с этими кнопками, но они у меня не получились. Я если включаю размер шрифта, выключается цвет и наоборот. Создал еще один скрипт для шрифта и он нормально работает но радиокнопки не делятся на две группы. Как их разделить?