Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   передача текста в textarea в зависимости от выбора radiobutton (https://javascript.ru/forum/misc/16112-peredacha-teksta-v-textarea-v-zavisimosti-ot-vybora-radiobutton.html)

AndreiN 26.03.2011 17:42

передача текста в textarea в зависимости от выбора radiobutton
 
Здравствуйте!
Недавно столкнулся с такой задачей. -

Допустим, имеются 2 формы вида -

<form name = "SetQuery" action = "queries.php" method = "post">
        <textarea rows="6" cols="74" name="query_text"></textarea>
        <input type = "radio" name = "query" value = "query_1">Запрос 1
        <input type = "radio" name = "query" value = "query_2">Запрос 2
        <input type = "radio" name = "query" value = "query_3">Запрос 3
</form>


и

<form name = "SetQuery2" action = "queries.php" method = "post">
        <textarea rows="6" cols="74" name="query_text2"></textarea>
        <input type = "radio" name = "query" value = "query_1">Запрос 1
        <input type = "radio" name = "query" value = "query_2">Запрос 2
        <input type = "radio" name = "query" value = "query_3">Запрос 3
</form>


Подскажите, пожалуйста, как мне реализовать такое -
нажимаем на radiobutton - в первую форму подаётся какое-то слово, например, "Апельсин",
а во вторую форму подаётся слово "Яблоко". (Слова, естественно, заранее заготовлены).
Слова в обеих формах должны меняться в зависимости от выбранного пункта. (несколько radiobutton).

К сожалению, с JavaScript я практически не знаком. :(
В интернете попадалось мне такое решение, но только для одной формы -

<script type="text/javascript">
var TextForR = {
    'query_1' : 'Текст 1',
    'query_2' : 'Текст 2',
    'query_3' : 'Текст 3'
};
function foo(r) {
    if (r && r.value && TextForR[r.value]) document.SetQuery.query_text.value = TextForR[r.value];
};
</script>
<form name = "SetQuery" action = "queries.php" method = "post">
        <textarea rows="24" cols="80" name="query_text"></textarea>
        <input type = "radio" name = "query" value = "query_1" onclick="foo(this)">Запрос 1
        <input type = "radio" name = "query" value = "query_2" onclick="foo(this)">Запрос 2
        <input type = "radio" name = "query" value = "query_3" onclick="foo(this)">Запрос 3
</form>


Помогите, пожалуйста, справиться с задачей.

monolithed 26.03.2011 23:16

<script type="text/javascript">
window.onload = function() {
    var forma = document.forma,
        input = forma.input, i = input.length, 
        array = ['query1', 'query2', 'query3'];
    
    while(i--) {
        input[i].onchange = function(i) {
            return function() {
                forma.text.value = array[i];
            };
        }(i);
    }     
};
</script>

<form name="forma" action="" method="post">
    <input type="radio" name="input" />Запрос 1
    <input type="radio" name="input" />Запрос 2
    <input type="radio" name="input" />Запрос 3<br />
    <textarea rows="6" cols="26" name="text" /></textarea>
</form>

или в такой нотации:
<script type="text/javascript">
window.onload = function() {
    var forma = document.forma,
        input = forma.input,i = input.length, 
        array = {
            value1 : 'query1',
            value2 : 'query2',
            value3 : 'query3'
        };
    
    while(i--) {
        input[i].onchange = function(i) {
            return function() {
                forma.text.value = array[this.value];
            };
        }(i);
    }
};
</script>

<form name="forma" action="" method="post">
    <input type="radio" name="input" value="value1" />Запрос 1
    <input type="radio" name="input" value="value2" />Запрос 2
    <input type="radio" name="input" value="value3" />Запрос 3<br />
    <textarea rows="6" cols="26" name="text"></textarea>
</form>

рони 26.03.2011 23:50

monolithed,
Возможно TC всего лишь дубликат ...
<script type="text/javascript">
var TextForR = {
    'query_1' : 'Текст 1',
    'query_2' : 'Текст 2',
    'query_3' : 'Текст 3'
};
var TextForR2 = {
    'query_1' : 'Текст 11',
    'query_2' : 'Текст 22',
    'query_3' : 'Текст 33'
};
function foo(r) {
    if (r && r.value && TextForR[r.value]) document.SetQuery.query_text.value = TextForR[r.value];
};
function foo2(r) {
    if (r && r.value && TextForR2[r.value]) document.SetQuery2.query_text2.value = TextForR2[r.value];
};
</script>
<form name = "SetQuery" action = "queries.php" method = "post">
        <textarea  name="query_text"></textarea>
        <input type = "radio" name = "query" value = "query_1" onclick="foo(this)">Запрос 1
        <input type = "radio" name = "query" value = "query_2" onclick="foo(this)">Запрос 2
        <input type = "radio" name = "query" value = "query_3" onclick="foo(this)">Запрос 3
</form>
<form name = "SetQuery2" action = "queries.php" method = "post">
        <textarea  name="query_text2"></textarea>
        <input type = "radio" name = "query" value = "query_1" onclick="foo2(this)">Запрос 1
        <input type = "radio" name = "query" value = "query_2" onclick="foo2(this)">Запрос 2
        <input type = "radio" name = "query" value = "query_3" onclick="foo2(this)">Запрос 3
</form>

P.S. onclick надёжнее onchange ...

AndreiN 02.04.2011 16:22

Большое спасибо! :)

Arteist 07.02.2016 23:34

А как сделать, что бы результат выводился не в текстовую область, а просто был написан?


Часовой пояс GMT +3, время: 17:25.