html код в зависимости от выбора radio
Есть онлайн калькулятор, мне нужно что бы в зависимости от выбора пользователем опции radio в конечной форме выдавалось сообщение, типа вы выбрали "Тип R1" или другой в зависимости от выбора пользователя...
Как это реализовать? |
<!DOCTYPE html>
<form id="calculator">
<label><input type="radio" name="type" value="R1" /> R1</label>
<label><input type="radio" name="type" value="R2" /> R2</label>
<button type="submit">Заслать</button>
<script>
(function(){
function getCheckedRadio(radios) {
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
return radios[i];
}
}
return null;
}
var form = document.forms.calculator;
form.onsubmit = function(){
var type = getCheckedRadio(form.type);
if (type) {
alert('Вы выбрали тип: ' + type.value);
}
return false;
}
})();
</script>
</form>
|
В современных браузерах можно на чистом css:
<style>
form > span {
display: none;
}
#R1:checked ~ .R1, #R2:checked ~ .R2 {
display: inline;
}
</style>
<form id="calculator">
<input type="radio" name="type" id="R1" value="R1" checked/><label for="R1"> R1</label>
<input type="radio" name="type" id="R2" value="R2" /><label for="R2"> R2</label>
<br />
Вы выбрали тип: <span class="R2">R2</span><span class="R1">R1</span>
</form>
|
Вот мой скрипт:
<SCRIPT LANGUAGE="JavaScript">
function price(form) {
var iadro = 0;
if(document.getElementById('R1').checked) {
iadro=parseFloat(form.R1.value);
}
if(document.getElementById('R4').checked) {
iadro=parseFloat(form.R4.value);
}
if(document.getElementById('R5').checked) {
iadro=parseFloat(form.R5.value);
}
if(document.getElementById('R7').checked) {
iadro=parseFloat(form.R7.value);
}
var nachalo = 0;
if(document.getElementById('Da').checked) {
nachalo=parseFloat(form.Da.value);
}
if(document.getElementById('Net').checked) {
nachalo=parseFloat(form.Net.value);
}
var result = 0;
if(document.getElementById("result")){
result=parseFloat(form.result.value);
result*=0.001;
}
if (form.stat.checked){
var stat=parseFloat(form.stat.value);
}
else stat=0;
if (form.podpiska.checked){
var podpiska=parseFloat(form.podpiska.value);
}
else podpiska=0;
if(document.getElementById("number")){
number=parseFloat(form.number.value);
}
var total=44+(result*iadro+nachalo+stat+podpiska)*number;
document.getElementById("total_price").innerHTML=total;
}
Вот кнопка для выполнения функции <input value="Посчитать" type="button" onclick="price(this.form)"> как сделать что бы по нажатию этой же кнопки ниже писался текст, что вы выбрали тип R1 или R4... |
Findail однозначно китаец.
<!DOCTYPE html>
<form id="calculator">
<label><input type="radio" name="type" value="R1" /> R1</label>
<label><input type="radio" name="type" value="R2" /> R2</label>
<button type="button" id="calculate">Посчитать</button>
<output id="message"></output>
<script>
(function(){
var texts = {
message: 'вы выбрали тип '
}
function getCheckedRadio(radios) {
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
return radios[i];
}
}
return null;
}
var form = document.forms.calculator;
var button = document.getElementById('calculate');
var message = document.getElementById('message');
button.onclick = price;
function price() {
var type = getCheckedRadio(form.type).value;
message.innerHTML = texts.message + type;
}
})();
</script>
</form>
Чуть подпилить - и готово. |
Я новичек,много не понимаю, уже как только не крутил не могу заставить работать(
|
Цитата:
|
| Часовой пояс GMT +3, время: 17:26. |