Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   При отметке checkbox заполнение поля input text значением из друого поля на странице (https://javascript.ru/forum/dom-window/58451-pri-otmetke-checkbox-zapolnenie-polya-input-text-znacheniem-iz-druogo-polya-na-stranice.html)

mxup 22.09.2015 18:49

При отметке checkbox заполнение поля input text значением из друого поля на странице
 
Здравствуйте, хотелось бы спросить как реализовать яваскриптом (я так понял лучше всего им так сделать) следующее:
Есть поле текстовое Input Text
За ним следует такое же поле Input Text
Вот надо сделать Checkbox, при установке которого значение, введённое в первое поле Input Text копировалось во второе поле Text Input
Ну как бы у пользователя спрашивается: Отметьте галочкой если значение во втором поле совпадает с значением в первом поле

Lemme 22.09.2015 19:04

<input type="text" id="first" value="some value">
<input type="text" id="second">
<input type="checkbox" id="copy">

<script>
	document.getElementById('copy').onchange = function() {
		var f = document.getElementById('first'),
			s = document.getElementById('second');

		s.value = this.checked ? f.value : '';
	}
</script>

mxup 22.09.2015 19:09

Ооо спсибooо!!!)

jkr 11.12.2017 10:56

А что если input-источника нет, а есть несколько checkbox-ов и один input, в который необходимо отправлять, например name или value каждого из checkbox-ов по отметке?

Dilettante_Pro 11.12.2017 13:59

jkr,
В обработчике onchange использовать в качестве источника this.value или this.name

jkr 11.12.2017 15:12

Цитата:

Сообщение от Dilettante_Pro (Сообщение 472589)
jkr,
В обработчике onchange использовать в качестве источника this.value или this.name

Спасибо, надо будет прикупить себе простенькую книжку для начала:

jkr 11.12.2017 15:45

Цитата:

Сообщение от Dilettante_Pro (Сообщение 472589)
jkr,
В обработчике onchange использовать в качестве источника this.value или this.name

Сработало ровно до тех пор, пока не добавил ещё один Checkbox с тем же ID, но другим Value. Выглядит это сейчас у меня так:
<input type="checkbox" id="protection" value="value1">
<input type="checkbox" id="protection" value="value2">
<script>
	document.getElementById('protection').onchange = function submitprotection() {
		var artikul = document.getElementById('artikul');

		artikul.value += this.checked ? protection.value : '';
	}
</script>
<input type="text" id="artikul">

кроме того, добавил value +=, так как необходимо, чтобы Input дополнялся из нескольких Checkbox-ов. В связи с эти ещё один вопрос, как сделать так, чтобы Input не заполнялся бесконечно от "тыканья" в один Checkbox?

Dilettante_Pro 11.12.2017 15:59

jkr,
Цитата:

Сообщение от jkr
ещё один Checkbox с тем же ID

Прописные истины - полистайте тот учебник. ID должен быть уникальным.

jkr 11.12.2017 16:27

Цитата:

Сообщение от Dilettante_Pro (Сообщение 472616)
jkr,

Прописные истины - полистайте тот учебник. ID должен быть уникальным.

Ok, но можно ли доработать скрипт, чтобы он отправлял значения из нескольких однотипных Checkbox-ов в один текстовый Input?

Dilettante_Pro 11.12.2017 16:45

jkr,
Однотипных - по какому признаку?

Dilettante_Pro 11.12.2017 17:17

Например, по одинаковому class
<input type="checkbox" class="protection" value="value1">
<input type="checkbox" class="noprotection" value="value2">
<input type="checkbox" class="protection" value="value3">
<input type="text" id="artikul">
<script>
    var chex = document.querySelectorAll(".protection"),
         artikul = document.getElementById('artikul');
    for(var i = 0; i<chex.length;i++) {
        chex[i].onchange = function () {
             this.checked ? artikul.value += this.value : artikul.value = artikul.value.replace(this.value,"") ;
        }
    }
</script>

jkr 12.12.2017 09:28

Цитата:

Сообщение от Dilettante_Pro (Сообщение 472628)
jkr,
Однотипных - по какому признаку?

Как-то так:
<input type="checkbox" id="protection1" value="value1">
<input type="checkbox" id="protection2" value="value2">
<input type="checkbox" id="protection3" value="value3">
<input type="checkbox" id="protection4" value="value4">
<input type="checkbox" id="protection5" value="value5">
	<script>
	document.getElementById('protection').onchange = function submitprotection() {
		var artikul = document.getElementById('artikul');

		artikul.value += this.checked ? protection.value : '';
	}
</script>
<input type="text" id="artikul">

Dilettante_Pro 12.12.2017 11:16

jkr,
И работает?

jkr 12.12.2017 11:23

Цитата:

Сообщение от Dilettante_Pro (Сообщение 472689)
jkr,
И работает?

Нет, конечно, а вот это сработало

Dilettante_Pro 12.12.2017 12:31

jkr,
А пост11 смотрели?

jkr 12.12.2017 14:56

Цитата:

Сообщение от Dilettante_Pro (Сообщение 472703)
jkr,
А пост11 смотрели?

Действительно, как-то просмотрел. Ваш вариант однозначно лаконичнее, благодарю!

jkr 26.12.2017 16:15

Решил несколько поменять принцип заполнения формы, теперь она выглядит примерно так:
<select id="id_1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br><br>
<input id="id_2"></input><br><br>
<input class="class" type="checkbox" value="3"></input><br>
<input class="class" type="checkbox" value="4"></input><br><br>
<button onclick="f()">Сформировать</button>
<input placeholder="Атикул" id="id_result"></input>

Соответственно есть скрипт, который должен собирать данные из Select-а, текстового Input-а и Checkbox-ов:
function f() {
var a = document.getElementById("id_1").value;
var b = document.getElementById("id_2").value;
document.getElementById("id_result").value = a+'.'+b;
    }

Не знаю, как прикрутить подсказанный товарищем выше скрипт, который отправляет значения Checkbox-ов в итоговый Input, теперь это должно происходить не по отметке Checkbox-а а по нажатии кнопки

Dilettante_Pro 27.12.2017 10:43

Не совсем понял ваши принципы суммирования:(
Получилось так:
<select id="id_1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br><br>
<input id="id_2"></input><br><br>
<input class="class" type="checkbox" value="3">3</input><br>
<input class="class" type="checkbox" value="4">4</input><br><br>
<button onclick="f()">Сформировать</button>
<input placeholder="Атикул" id="id_result"></input>
<script>
function f() {
   var a = document.getElementById("id_1").value,
   b = document.getElementById("id_2").value,
   c = "",    
   chex = document.querySelectorAll(".class");
   for(var i = 0; i<chex.length;i++) {
       if(chex[i].checked) { c += (c=="") ? chex[i].value : "." + chex[i].value; }
   }
   document.getElementById("id_result").value = a + '.' + b + '.' + c;
}
</script>

если из чекбоксов вам нужно только одно значение, используйте radio или еще один select

laimas 27.12.2017 10:49

jkr,
а что такое "итоговый инпут" и зачем он нужен?

Dilettante_Pro 27.12.2017 11:26

laimas,
Имхо, только для визуализации полученного артикула - для выбора нужного товара из БД достаточно компонентов артикула (и удобнее)
А вообще-то выбирать товар нужно совсем по другим признакам...

jkr 27.12.2017 11:52

laimas, Dilettante_Pro
В итоговый Input должны собираться элементы итогового названия готового изделия, потом это название просто отправляется на какую-то электронную почту, с БД это никак не связано.
В примере итоговый -- <input placeholder="Атикул" id="id_result"></input>, соответственно в него должно собираться название из частей: селект+текстовый инпут+чекбокс

laimas 27.12.2017 13:43

Цитата:

Сообщение от jkr
В итоговый Input должны собираться элементы итогового названия готового изделия, потом это название просто отправляется на какую-то электронную почту, с БД это никак не связано.

Имена ваших флажков в конечном итоге будут переданы на сервер. Если кроме них ничего в форме нет, а "итоговый" серверу и нафик не нужен, ему важно проверить не туфту ли ему клиент прислал, и после этого

$val = implode($separator, $_POST);


Если кроме флажков передаются и другие элементы, то достаточно передать флажки под одним ключом массива, заменив $_POST, на $_POST['key'].


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