При отметке checkbox заполнение поля input text значением из друого поля на странице
Здравствуйте, хотелось бы спросить как реализовать яваскриптом (я так понял лучше всего им так сделать) следующее:
Есть поле текстовое Input Text За ним следует такое же поле Input Text Вот надо сделать Checkbox, при установке которого значение, введённое в первое поле Input Text копировалось во второе поле Text Input Ну как бы у пользователя спрашивается: Отметьте галочкой если значение во втором поле совпадает с значением в первом поле |
<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> |
Ооо спсибooо!!!)
|
А что если input-источника нет, а есть несколько checkbox-ов и один input, в который необходимо отправлять, например name или value каждого из checkbox-ов по отметке?
|
jkr,
В обработчике onchange использовать в качестве источника this.value или this.name |
Цитата:
![]() |
Цитата:
<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? |
jkr,
Цитата:
|
Цитата:
|
jkr,
Однотипных - по какому признаку? |
Например, по одинаковому 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> |
Цитата:
<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"> |
jkr,
И работает? |
Цитата:
|
jkr,
А пост11 смотрели? |
Цитата:
|
Решил несколько поменять принцип заполнения формы, теперь она выглядит примерно так:
<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-а а по нажатии кнопки |
Не совсем понял ваши принципы суммирования:(
Получилось так: <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 |
jkr,
а что такое "итоговый инпут" и зачем он нужен? |
laimas,
Имхо, только для визуализации полученного артикула - для выбора нужного товара из БД достаточно компонентов артикула (и удобнее) А вообще-то выбирать товар нужно совсем по другим признакам... |
laimas, Dilettante_Pro
В итоговый Input должны собираться элементы итогового названия готового изделия, потом это название просто отправляется на какую-то электронную почту, с БД это никак не связано. В примере итоговый -- <input placeholder="Атикул" id="id_result"></input>, соответственно в него должно собираться название из частей: селект+текстовый инпут+чекбокс |
Цитата:
$val = implode($separator, $_POST); Если кроме флажков передаются и другие элементы, то достаточно передать флажки под одним ключом массива, заменив $_POST, на $_POST['key']. |
Часовой пояс GMT +3, время: 02:06. |