Ввод значение с Радио кнопки.
Добрый день.Вопросик такого плана.
Имеется интерфейс калькулятора с Радио кнопками. Имеется кнопка Сброса. Задача №1, Радио кнопки должны вводить свое значение Value в соответствующее окно ввода (Напряжение, В). Задача №2, при Сбросе, Радио кнопки не должны переключатся по умолчанию, и сохранять свое значение в окне ввода. <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Макет</title> </head><body><center><p>Макет</p> </center> <script> function primer() { form.Number1.value=50 form.Number2.value=400 form.Number3.value=1 }</script> <script type="text/javascript"> function calculat (obj) { var num1= obj.Number1.value.replace(/,/,"."); var num2= obj.Number2.value.replace(/,/,"."); var v = num2/ num1; var result1 = v; obj.res1.value=result1; }</script> <center><form name="form" style="width:300px"> <table class="my_table"><tbody><tr><td colspan="2"> </td></tr><tr align="left"><td align="left"> Сопротивление, Ом</td><td> <input type="text" value="" style="width:50px" maxlenght="5" name="Number1"> </td></tr><tr align="left"><td align="left"> Напряжение, B <input type="radio" value="220" checked name="N">1ф <input type="radio" value="380" name="N">3ф </td> <td><input type="text" style="width:50px" maxlenght="5" name="Number2"></td> </tr> <tr align="left"><td align="left">Резистор № <input type="text" value="" style="width:17px" maxlenght="5" name="Number3"> </td> <td><input type="button" style="width:50px" name="WB" value="Enter" onclick="calculat(form)"></td> </tr> <tr id="my_color" align="left"><td align="left">Ток, А</td> <td> <input type="text1" style="width:50px" id="res1"></td></tr> <tr id="my_color" align="left"><td align="left"> <input type="button" style="width:50px" value="Test" name="B1" onclick="primer()"></td> <td> <input type="button" style="width:50px" onclick="reset(form)" value="Reset"></td> </tr> </tbody></table></form></center> </body></html> |
Задачу №2 решил, заменил кнопку Reset, на типа Test (подписал Сброс), со значением там где надо, form.Number.value=null
|
Упростил вопрос
Радио кнопки должны вводить свое значение value в окно ввода input type="text". Как сделать? <input name="Number" type="radio" value="5" checked>1 <input name="Number" type="radio" value="10" >2 <input type="text" name="Number"> |
Morris,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script> document.addEventListener( "DOMContentLoaded" , function() { function setNum() { var num = document.querySelector("[name='Number']:checked").value; document.querySelector("[name='out']").value = num; } document.querySelector("form").addEventListener("change", setNum) }); </script> </head> <body> <form action="http://"> <input name="Number" type="radio" value="5" checked>1 <input name="Number" type="radio" value="10" >2 <input type="text" name="out" value="5"> </form> </body> </html> |
Цитата:
|
рони,
Эффект достигнут, Радио кнопки выводят свое значение в текстовое поле. Но появились новая проблема. Теперь в текстовое поле не сохраняет данные, вносимые с клавиатуры, уходит снова на значение радио. |
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script> document.addEventListener( "DOMContentLoaded" , function() { function setNum() { var num = document.querySelector("[name='Number']:checked").value; document.querySelector("[name='out']").value = num; } document.querySelectorAll("[name=Number]").forEach( inp => inp.addEventListener("change", setNum) ) }); </script> </head> <body> <form action="http://"> <input name="Number" type="radio" value="5" checked>1 <input name="Number" type="radio" value="10" >2 <input type="text" name="out" value="5"> </form> </body> </html> |
Крутяк, теперь все работает. Всем спасибо за помощь!
|
Решил заменить две радиокнопки на один флажком. Но что то пошло не так. При убирании галочки значения не возвращается на предустановленное в <input type="text" name="out" value="5">
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script> document.addEventListener( "DOMContentLoaded" , function() { function setNum() { var num = document.querySelector("[name='Number']:checked").value; document.querySelector("[name='out']").value = num; } document.querySelectorAll("[name=Number]").forEach( inp => inp.addEventListener("change", setNum) ) }); </script> </head> <body> <form action="http://"> <input type="checkbox" value="10" name="Number" >1 <input type="text" name="out" value="5"> </form> </body> </html> |
Morris,
может учебник, ссылка вверху. <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script> document.addEventListener( "DOMContentLoaded" , function() { function setNum() { var checked = document.querySelector("[name='Number']:checked"); document.querySelector("[name='out']").value = checked ? 10 : 5; } document.querySelectorAll("[name=Number]").forEach( inp => inp.addEventListener("change", setNum) ) }); </script> </head> <body> <form action="http://"> <label><input type="checkbox" value="10" name="Number" >10</label> <input type="text" name="out" value="5"> </form> </body> </html> |
Часовой пояс GMT +3, время: 01:06. |