при выборе input[radio] заполнять input[text]
Всем, доброе время суток.
Просьба помочь. Есть html код: <form class="webform4" id="webform-4"> <input required="required" type="radio" id="edit-submitted-2-1" name="submitted[2]" value="a" class="form-radio"> <input required="required" type="radio" id="edit-submitted-2-2" name="submitted[2]" value="ab" class="form-radio"> <input required="required" type="radio" id="edit-submitted-2-3" name="submitted[2]" value="ba" class="form-radio"> <input required="required" type="radio" id="edit-submitted-2-4" name="submitted[2]" value="b" class="form-radio"> <input class="form-control form-text" type="text" id="edit-submitted-2a" name="submitted[2a]" value="" size="60" maxlength="128"> <input class="form-control form-text" type="text" id="edit-submitted-2b" name="submitted[2b]" value="" size="60" maxlength="128"> <input required="required" type="radio" id="edit-submitted-3-1" name="submitted[3]" value="a" class="form-radio"> <input required="required" type="radio" id="edit-submitted-3-2" name="submitted[3]" value="ab" class="form-radio"> <input required="required" type="radio" id="edit-submitted-3-3" name="submitted[3]" value="ba" class="form-radio"> <input required="required" type="radio" id="edit-submitted-3-4" name="submitted[3]" value="b" class="form-radio"> <input class="form-control form-text" type="text" id="edit-submitted-3a" name="submitted[3a]" value="" size="60" maxlength="128"> <input class="form-control form-text" type="text" id="edit-submitted-3b" name="submitted[3b]" value="" size="60" maxlength="128"> ..... <input required="required" type="radio" id="edit-submitted-n-1" name="submitted[n]" value="a" class="form-radio"> <input required="required" type="radio" id="edit-submitted-n-2" name="submitted[n]" value="ab" class="form-radio"> <input required="required" type="radio" id="edit-submitted-n-3" name="submitted[n]" value="ba" class="form-radio"> <input required="required" type="radio" id="edit-submitted-n-4" name="submitted[n]" value="b" class="form-radio"> <input class="form-control form-text" type="text" id="edit-submitted-na" name="submitted[na]" value="" size="60" maxlength="128"> <input class="form-control form-text" type="text" id="edit-submitted-nb" name="submitted[nb]" value="" size="60" maxlength="128"> </form> Нужно, чтоб при выборе, к примеру (name="submitted[2]" value="a") в (name="submitted[2a]") заполнялось 10 а в (name="submitted[2b]") заполнялось 40. Если выбран (name="submitted[2]" value="ab") то в (submitted[2a] и submitted[2b]) 20 и 30 соответственно. Если выбран (name="submitted[2]" value="ba") то в (submitted[2a] и submitted[2b]) 50 и 80 соответственно. Если выбран (name="submitted[2]" value="b") то в (submitted[2a] и submitted[2b]) 70 и 60 соответственно. И так со всеми радиокнопками, при выборе name=submitted[1...до n] заполнялись поля name=submitted[1a...до na] и name=submitted[1b...до nb] |
mikhael,
а если Цитата:
Цитата:
|
Судя по комментариям, ни кто не сталкивался с таким и это не возможно.
|
mikhael,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> </head> <body> <form class="webform4" id="webform-4"> <input required="required" type="radio" id="edit-submitted-2-1" name="submitted[2]" value="a" class="form-radio"> <input required="required" type="radio" id="edit-submitted-2-2" name="submitted[2]" value="ab" class="form-radio"> <input required="required" type="radio" id="edit-submitted-2-3" name="submitted[2]" value="ba" class="form-radio"> <input required="required" type="radio" id="edit-submitted-2-4" name="submitted[2]" value="b" class="form-radio"> <input class="form-control form-text" type="text" id="edit-submitted-2a" name="submitted[2a]" value="" size="60" maxlength="128"> <input class="form-control form-text" type="text" id="edit-submitted-2b" name="submitted[2b]" value="" size="60" maxlength="128"> <input required="required" type="radio" id="edit-submitted-3-1" name="submitted[3]" value="a" class="form-radio"> <input required="required" type="radio" id="edit-submitted-3-2" name="submitted[3]" value="ab" class="form-radio"> <input required="required" type="radio" id="edit-submitted-3-3" name="submitted[3]" value="ba" class="form-radio"> <input required="required" type="radio" id="edit-submitted-3-4" name="submitted[3]" value="b" class="form-radio"> <input class="form-control form-text" type="text" id="edit-submitted-3a" name="submitted[3a]" value="" size="60" maxlength="128"> <input class="form-control form-text" type="text" id="edit-submitted-3b" name="submitted[3b]" value="" size="60" maxlength="128"> ..... <input required="required" type="radio" id="edit-submitted-n-1" name="submitted[n]" value="a" class="form-radio"> <input required="required" type="radio" id="edit-submitted-n-2" name="submitted[n]" value="ab" class="form-radio"> <input required="required" type="radio" id="edit-submitted-n-3" name="submitted[n]" value="ba" class="form-radio"> <input required="required" type="radio" id="edit-submitted-n-4" name="submitted[n]" value="b" class="form-radio"> <input class="form-control form-text" type="text" id="edit-submitted-na" name="submitted[na]" value="" size="60" maxlength="128"> <input class="form-control form-text" type="text" id="edit-submitted-nb" name="submitted[nb]" value="" size="60" maxlength="128"> </form> <script> window.addEventListener('DOMContentLoaded', function() { var form = document.querySelector('#webform-4'), obj = {a : [10,40], ab : [20,30], ba : [50,80], b :[70,60]}; form.addEventListener('change', function(event) { var el = event.target, val = el.value; if(val = obj[val]) { while (el) { el = el.nextElementSibling; if(el && el.classList.contains("form-control")) break } el.value = val[0]; el.nextElementSibling.value = val[1] } }); }); </script> </body> </html> |
Благодарю, но в этой строке «f(el.classList.contains('form-control')) break» вываливается такая ошибка «Uncaught TypeError: Cannot read property 'classList' of null» класс вроде есть, и что не так не понятно )))
|
mikhael,
строка 42 изменена пробуйте |
Теперь, в строке «el.value = val[0];» вываливается такая ошибка «Uncaught TypeError: Cannot set property 'value' of null»
|
mikhael,
значит ваше html отличается от того что вы предоставили |
Понял, проблема в "nextElementSibling", все <input> обернуты <label> и еще <div>, т.е. они не рядомстоящие.
Что посоветуете использовать, вместо "nextElementSibling"? |
Цитата:
|
<div class="form-item webform-component webform-component-radios webform-component--1 form-group"> <label class="control-label" for="edit-submitted-1">1. что важнее: <span class="form-required" title="Это поле обязательно для заполнения.">*</span></label> <div id="edit-submitted-1" class="form-radios"><div class="form-item form-item-submitted-1 form-type-radio radio"> <label class="control-label" for="edit-submitted-1-1"><input required="required" type="radio" id="edit-submitted-1-1" name="submitted[1]" value="a" class="form-radio">А </label> </div><div class="form-item form-item-submitted-1 form-type-radio radio"> <label class="control-label" for="edit-submitted-1-2"><input required="required" type="radio" id="edit-submitted-1-2" name="submitted[1]" value="ab" class="form-radio">скорее А чем Б </label> </div><div class="form-item form-item-submitted-1 form-type-radio radio"> <label class="control-label" for="edit-submitted-1-3"><input required="required" type="radio" id="edit-submitted-1-3" name="submitted[1]" value="ba" class="form-radio">скорее Б чем А </label> </div><div class="form-item form-item-submitted-1 form-type-radio radio"> <label class="control-label" for="edit-submitted-1-4"><input required="required" type="radio" id="edit-submitted-1-4" name="submitted[1]" value="b" class="form-radio">Б </label> </div></div> </div> <div class="form-item webform-component webform-component-textfield webform-component--1a webform-container-inline form-group"> <label class="control-label" for="edit-submitted-1a">а) знать? </label> <input class="form-control form-text" type="text" id="edit-submitted-1a" name="submitted[1a]" value="" size="60" maxlength="128"> </div> <div class="form-item webform-component webform-component-textfield webform-component--1b webform-container-inline form-group"> <label class="control-label" for="edit-submitted-1b">б) создавать? </label> <input class="form-control form-text" type="text" id="edit-submitted-1b" name="submitted[1b]" value="" size="60" maxlength="128"> </div> Надеюсь - это то, что вы хотели увидеть? |
mikhael,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> </head> <body> <form class="webform4" id="webform-4"> <div class="form-item webform-component webform-component-radios webform-component--1 form-group"> <label class="control-label" for="edit-submitted-1">1. что важнее: <span class="form-required" title="Это поле обязательно для заполнения.">*</span></label> <div id="edit-submitted-1" class="form-radios"><div class="form-item form-item-submitted-1 form-type-radio radio"> <label class="control-label" for="edit-submitted-1-1"><input required="required" type="radio" id="edit-submitted-1-1" name="submitted[1]" value="a" class="form-radio">А </label> </div><div class="form-item form-item-submitted-1 form-type-radio radio"> <label class="control-label" for="edit-submitted-1-2"><input required="required" type="radio" id="edit-submitted-1-2" name="submitted[1]" value="ab" class="form-radio">скорее А чем Б </label> </div><div class="form-item form-item-submitted-1 form-type-radio radio"> <label class="control-label" for="edit-submitted-1-3"><input required="required" type="radio" id="edit-submitted-1-3" name="submitted[1]" value="ba" class="form-radio">скорее Б чем А </label> </div><div class="form-item form-item-submitted-1 form-type-radio radio"> <label class="control-label" for="edit-submitted-1-4"><input required="required" type="radio" id="edit-submitted-1-4" name="submitted[1]" value="b" class="form-radio">Б </label> </div></div> </div> <div class="form-item webform-component webform-component-textfield webform-component--1a webform-container-inline form-group"> <label class="control-label" for="edit-submitted-1a">а) знать? </label> <input class="form-control form-text" type="text" id="edit-submitted-1a" name="submitted[1a]" value="" size="60" maxlength="128"> </div> <div class="form-item webform-component webform-component-textfield webform-component--1b webform-container-inline form-group"> <label class="control-label" for="edit-submitted-1b">б) создавать? </label> <input class="form-control form-text" type="text" id="edit-submitted-1b" name="submitted[1b]" value="" size="60" maxlength="128"> </div> </form> <script> window.addEventListener("DOMContentLoaded", function() { var form = document.querySelector("#webform-4"), obj = { a: [10, 40], ab: [20, 30], ba: [50, 80], b: [70, 60] }; form.addEventListener("click", function(event) { var el = event.target; if (el.classList && el.classList.contains("form-radio")) { var val = obj[el.value], i = 0; while (el != form) { el = el.parentNode; if (el && el.classList.contains("form-group")) { el = el.nextElementSibling; el.querySelector(".form-control").value = val[i++]; el = el.nextElementSibling; el.querySelector(".form-control").value = val[i++]; break } } } }) }); </script> </body> </html> |
Часовой пояс GMT +3, время: 20:20. |