Как создать кнопку которая будет копировать текст с строки ввода и вставлять в много других строк?

Question

[Rostyk Ice]

Подскажите пожалуйста как сделать кнопку в HTML. Чтобы после ее нажатия копировался текст с этой строки ввода

<input type="text" name="product_description[3][name]" size="100" value="">

в эти :
1

<textarea name="product_description[3][meta_keyword]" cols="40" rows="5"></textarea>

2

<input type="text" name="product_tag[3]" value="" size="80">

Как посоветуете решить проблему?

Answer 1

[Алексей Немиро]

С использование jQuery можно вот так: jsfiddle.net/alekseynemiro/a4e522w4

$('#btn').click(function(){
  $('[name="product_description[3][meta_keyword]"],[name="product_tag[3]"]').val($('[name="product_description[3][name]"]').val());
});

[name="имя элемента управления"] в данном случае указано два элемента, через запятую, у которых будет изменено значение:

[name="product_description[3][meta_keyword]"],[name="product_tag[3]"]

$('[name="product_description[3][name]"]').val() - из какого элемента взять значение.

Comments

[Rostyk Ice]

Большое спасибо вам!
У меня есть еще вопрос. Знаете ли вы что такое UserScript в TemperMonkey
Не подскажете как этот ваш код превратить в скрипт для TemperMonkey?

[Rostyk Ice]

Да и как дать координату кнопке ?

[Алексей Немиро]

Rostyk Ice: UserScript - это же обычный JavaScript. Можно прицепить jQuery и использовать представленный код, как есть. Скорее всего оставить только:
$('#btn').click(function(){
$('[name="product_description[3][meta_keyword]"],[name="product_tag[3]"]').val($('[name="product_description[3][name]"]').val());
});

#btn - идентификатор кнопки, в данном случае - btn (см. в html, у кнопки id="btn")

По координатам вопрос не понятен. Если нужно изменить расположение кнопки на странице, то это можно сделать при помощи CSS: jsfiddle.net/alekseynemiro/dky1edzd (см. left и top)

[Rostyk Ice]

Алексей Немиро: как код с CSS: jsfiddle.net/alekseynemiro/dky1edzd (см. left и top) перевести в js, тоесть вставить в код
$('#btn').click(function(){
$('[name="product_description[3][meta_keyword]"],[name="product_tag[3]"]').val($('[name="product_description[3][name]"]').val());
});
создаю скрипт но не видно на странице кнопки.

[Rostyk Ice]

Сделал,кнопку видно но никакой функции не делает.

[Алексей Немиро]

Rostyk Ice: Если требуется программно изменить позицию кнопки, то это можно сделать, например, так:
$('#btn').css({
position: 'absolute',
top: '100px',
left: '50px'
});

jsfiddle.net/alekseynemiro/dky1edzd/1

[Rostyk Ice]

что б кнопку видно стало зделал так :
$("#btn").css("position", "fixed").css("top", 0).css("left", 0);
$( document ).ready(function() {
$('#btn').click(function(){
$('[name="product_description[3][meta_keyword]"],[name="product_tag[3]"]').val($('[name="product_description[3][name]"]').val());
});
});

[Rostyk Ice]

Алексей Немиро: но вот ничего не делает, незнаю почему.
https://pp.vk.me/c623120/v623120742/14782/pk6xZUef...
Вот в последние 3 строки нужно вставить (123) с 1 строки пытался как мог но ничего не делает, как думаете в чем проблема?

[Rostyk Ice]

Алексей Немиро: кое что изменил работает. Спасибо ! еще не подскажите как зделать кнопку что бы она нажимала на галочку или исполняла какието действия?

[Алексей Немиро]

Rostyk Ice: выбор опции: $('[name="galka"]').prop('checked', true);
Пример: jsfiddle.net/alekseynemiro/a4e522w4/1
Вместо galka указать имя элемента, которому следует установить значение.

А действия - зависит от действий. Универсального решения нет.

[Rostyk Ice]

Алексей Немиро: За галочку спасибо! А действие нужно что бы выбирало опцыю из списка.

[Rostyk Ice]

<select name="product_option[0][product_option_value][0][option_value_id]">  <option value="5">Бежевый</option>  <option value="181">Белый</option>  <option value="193">Голубой</option>  <option value="134">Желтый</option>  <option value="26">Зеленый</option>  <option value="205">Коричневый</option>  <option value="135">Красный</option>  <option value="65">Кремовый</option>  <option value="37">Микс</option>  <option value="133">Оранжевый</option>  <option value="258">Розовый</option>  <option value="96">Светлый</option>  <option value="162">Серый</option>  <option value="130">Синий</option>  <option value="131">Сиреневый</option>  <option value="129">Темный</option>  <option value="13">Фиолетовый</option>  <option value="1011">Хром</option>  <option value="307">Черный</option>      </select>

Как правильно писать путь в скрипт ? полный ? или конечый?

[Rostyk Ice]

Алексей Немиро: вот код калки,но почемуто не работает. Не подскажите почему ?

вставил в скрипт так:
$('[name="product_category[]" value="3928"]').prop('checked', true);

[Rostyk Ice]

Алексей Немиро:

<input type="checkbox" name="product_category[]" value="3896">

код галки. все остальные отличаються только value="разные цыфры"

[Алексей Немиро]

Rostyk Ice: $('[name="product_category[]"][value=3896]').prop('checked', true);

jsfiddle.net/alekseynemiro/a4e522w4/2

[Rostyk Ice]

Алексей Немиро: Спасибо ! как выбрать из списка вскрипте ?
select name="product_option[0][product_option_value][0][option_value_id]
нужно полный путь окна указать ?

[Алексей Немиро]

Rostyk Ice: $('[name="product_option[0][product_option_value][0][option_value_id]"]').val('1011');

jsfiddle.net/alekseynemiro/a4e522w4/3

[Rostyk Ice]

Алексей Немиро: Огромное спасибо, возможно дальше сам построю полноценный скрипт,если нет то можно будет вам написать и за оплату ~50 кнопок с разнми действиями сколько будет стоить полноценный скрипт с обработкой дизайна и множества функцый?
И последний вопрос: есть окно код которого не могу найти
https://pp.vk.me/c623120/v623120742/148f8/G9dRAHLu...
в нем Боди нету ни названия ни айди как быть?

[Rostyk Ice]

Алексей Немиро: Как создать раскрывающийся список с елементами выбора от 1 до 10 и когда нажимаешь на выбраный номер н нажимает на галочку? Помогите пожалуйста.