Подскажите, пожалуйста, по JavaScript

regta
На сайте с 15.04.2006
Offline
316
771

Допустим имеем такую форму:

http://test-form.narod.ru/

(как пример, чтобы на пальцах не разъяснять)

Как сделать так, чтобы при установке галочки, содержимое поля справа от этой галочки скопировалось бы в нижний textarea?

Буду крайне признателен за качественный ответ. Спасибо.

P.S. Заранее спасибо за вариации типа "слышал, что это делается через id" - но так увы вы мне не поможете :(

Цитируйте, плиз, историю переписки в личке. Спасибо.
DC
На сайте с 08.09.2007
Offline
17
#1

вот вариант решения задачи с использованием библиотеки jquery

<form>

<table width="300" border="1" cellspacing="0" cellpadding="2" align="center">
<tr>
<td><input type="checkbox" name="checkbox" id="1" class="check" value="checkbox"></td>
<td>
<input name="textfield[]" type="text" id="text1" value="Тру ля ля"> </td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox[]" id="2" class="check" value="checkbox"></td>
<td><input name="textfield[]" type="text" id="text2" value="Дин дин дон"></td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox[]" id="3" class="check" value="checkbox"></td>
<td><input name="textfield[]" type="text" id="text3" value="Аз БукиВеди"></td>
</tr>
<tr>
<td colspan="2"><label>
<textarea name="textarea" id="textarea" cols="40" rows="10"></textarea>
</label></td>
</tr>
</table>
</form>
<script type="text/javascript" src="/jquery-1.2.3.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".check").change(function(){
if( ($(this).attr('checked')==true) || (($(this).attr('checked')=='checked'))){
var id = $(this).attr('id');
var text = $("#text"+id).attr('value');
$("#textarea").val($("#textarea").val()+text);
}
else{
//здесь можно попробовать удалять текст при выключении чекбокса
}
});
});
</script>

для полей формы добавил атрибуты id и class дабы было удобнее работать с селекторами

Чудеса случаются... это вам любой программист скажет... Скрипты (php, mysql, javascript и т.д.) любой сложности и вёрстка на заказ т.: +38(099)0569716, icq: 296874736
viКing
На сайте с 20.03.2008
Offline
124
#2

ну вот пока писал, уже опередили :)

ну если без jquery, то можно так:


<form>
<table width="300" border="1" cellspacing="0" cellpadding="2" align="center">
<tr>
<td><input id="check1" type="checkbox" name="checkbox" value="checkbox" onclick="GetValue('check1', 'text1')"> </td>
<td>
<input id="text1" name="textfield" type="text" value="Тру ля ля"> </td>

</tr>
<tr>
<td><input id="check2" type="checkbox" name="checkbox" value="checkbox" onclick="GetValue('check2', 'text2')"></td>
<td><input id="text2" name="textfield" type="text" value="Дин дин дон"></td>
</tr>
<tr>
<td><input id="check3" type="checkbox" name="checkbox" value="checkbox" onclick="GetValue('check3', 'text3')"></td>
<td><input id="text3" name="textfield" type="text" value="Аз БукиВеди"></td>
</tr>

<tr>
<td colspan="2"><label>
<textarea id="textarea1" name="textarea" cols="40" rows="10"></textarea>
</label></td>
</tr>
</table>
</form>
<script type="text/javascript">
function GetValue(box, id) {
var check = document.getElementById(box);
var textvalue = document.getElementById(id);
var textarea1 = document.getElementById('textarea1');
if(check.checked)
textarea1.value = textarea1.value +' '+ textvalue.value;
}
LoaderRu
На сайте с 26.07.2006
Offline
78
#3

Ну, и мой...


<script language=JavaScript>
function Insert(Text) {
element = document.getElementById("texts");
element.focus();
if (document.selection) {
SelectedText = element.document.selection.createRange();
SelectedText.text = Text;
}
}
</script>
<form>
<table width="300" border="1" cellspacing="0" cellpadding="2" align="center">
<tr>
<td><input id="first_checkbox1" name="first_checkbox1" type="checkbox" value="checkbox" onClick="Insert(first_input1.value)"></td>
<td><input name="first_input1" id="first_input1" type="text" value="Тру ля ля"></td>
</tr>
<tr>
<td><input id="first_checkbox2" name="first_checkbox2" type="checkbox" value="checkbox" onClick="Insert(first_input2.value)"></td>
<td><input name="first_input2" id="first_input2" type="text" value="Дин дин дон"></td>
</tr>
<tr>
<td><input id="first_checkbox3" name="first_checkbox3" type="checkbox" value="checkbox" onClick="Insert(first_input3.value)"></td>
<td><input name="first_input3" id="first_input3" type="text" value="Аз БукиВеди"></td>
</tr>
<tr>
<td colspan="2"><textarea id="texts" name="texts" cols="40" rows="10"></textarea></td>
</tr>
</table>
</form>
Мыслей много - и ни одной верной
regta
На сайте с 15.04.2006
Offline
316
#4

Огромный респект за помощь! Проблема теперь решена.

Kolyaj
На сайте с 28.03.2006
Offline
69
#5

regta, очень большая ошибка в юзабилити: чекбокс не должен запускать никакого действия. Для этого кнопки есть.

DyaDya
На сайте с 11.04.2007
Offline
147
#6
Kolyaj:
regta, очень большая ошибка в юзабилити: чекбокс не должен запускать никакого действия. Для этого кнопки есть.

В каждом правиле бывают оправданные исключения)...

Выбирайте качественный хостинг (http://vashmaster.ru/informaciya/o_poleznyh_programmah/news83.php) и продвигайте сайты в СЕОПУЛЬТ (http://seopult.ru/ref.php?ref=72b5ed9561fe66a1). А на «SAPE» я в обиде :) Не упрекайте за очепятки, пишу вслепую (http://ergosolo.ru/) и также делаю сайты (http://www.vashmaster.ru/) ;)
GtSwan
На сайте с 08.04.2008
Offline
156
#7
Kolyaj:
regta, очень большая ошибка в юзабилити: чекбокс не должен запускать никакого действия. Для этого кнопки есть.

Это точно!

Из личного опыта рекомендую качественный хостинг (http://timeweb.com/ru/?i=1889), который не разочарует.
Kolyaj
На сайте с 28.03.2006
Offline
69
#8
DyaDya:
В каждом правиле бывают оправданные исключения)...

Нет тут никаких исключений. Если я отмечаю чекбокс, я надеюсь, что в данный момент не запустится никакое действие. Хотя, зная о таких вот мнениях про исключения, я иногда боюсь их отмечать.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий