Совеместить скрипт и html форму
Здравствуйте!
Не могу совместить скрипт с формой. Скрипт рабочий, ниже в форме пытаюсь этот скрипт применить,в том ли я направлении?
var courses = [0, 100, 200, 250, 300]; //цены за академический час для 0,1,..,4 курсов.
var otch = 30000; //цена за отчётность.
var en = 1.2; //коэффициент увеличения цены за курс на английском языке
var course = prompt("Введите номер выбранного вами курса (1-4)");
var time = prompt("Введите продолжительность курса (в академич. часах)");
var lan = prompt("Введите язык курса (ru или en)");
var otchet = confirm("Нужна ли отчётность? (ОК - да; Отмена - нет)");
var price = time * courses[course] + (otchet ? otch : 0);
if (lan = "en") price *= en;
document.write("Цена курса будет равна " + price +" рублей");
<HTML>
<HEAD>
<script language="JavaScript">
/*
var en = 1.2; //коэффициент увеличения цены за курс на английском языке
function getCours(){
var c1 = document.getElementById("c1").value;
var c2 = document.getElementById("c2").value;
var c3 = document.getElementById("c3").value;
var c4 = document.getElementById("c4").value;
//---------------------------//
var t1 = document.getElementById("t1").value;
var t2 = document.getElementById("t2").value;
var t3 = document.getElementById("t3").value;
var t4 = document.getElementById("t4").value;
//---------------------------//
var l1 = document.getElementById("l1").value;
var l2 = document.getElementById("l2").value;
//---------------------------//
var ot1 = document.getElementById("ot1").value;
var ot2 = document.getElementById("ot2").value;
//---------------------------//
var price = time * courses[course] + (otchet ? otch : 0);*/
</script>
</HEAD>
<BODY>
<FORM name="form1">
<div>Выберите курс: </div>
<br>
<input type="checkbox" name="course" id="c1" value="300" onClick="getCours();">pyccкий<br>
<input type="checkbox" name="course" id="c2" value="200" onClick="getCours();">английский<br>
<input type="checkbox" name="course" id="c3" value="100" onClick="getCours();">французский<br>
<input type="checkbox" name="course" id="c4" value="150" onClick="getCours();">немецкий<br>
<hr>
<div>Выберите продолжительность курса (в академ.часах) : </div>
<input type="checkbox" name="time" id="t1" value="10">10<br>
<input type="checkbox" name="time" id="t2" value="20">20<br>
<input type="checkbox" name="time" id="t3" value="30">30<br>
<input type="checkbox" name="time" id="t4" value="50">50<br>
<hr>
<div>Выберите язык преподавания курса : </div>
<input type="checkbox" name="lan" id="l1">Русский<br>
<input type="checkbox" name="lan" id="l2">Английский<br>
<hr>
<div>Нужна ли отчетность? : </div>
<input type="checkbox" name="otchet" id="ot1" value="3000">Да<br>
<input type="checkbox" name="otchet" id="ot2" value="0">Нет<br>
<hr>
<input type="button" id="rezult" value="Рассчитать" onClick=""><br>
<hr>
<br>
<br>
<div>Стоимость : </div>
<input type="text" size="15" >
</FORM><hr>
</BODY>
</HTML>
|
попробуйте поместить ваш скрипт перед закрывающимся тегом body
|
EmperioAf,
так скрипт рабочий,я ломаю голову над тем как его к форме привязать |
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
</head>
<body>
<script>
alert(document.querySelector('#gg'));
</script>
<div id="gg">ГГ</div>
<script>
alert(document.querySelector('#gg'));
</script>
</body>
</html>
|
EmperioAf,
хм,не понимаю вас,что вы пытаетесь мне показать,про вывод результата я понял, а как это к моему коду относиться? |
Цитата:
document.getElementById не работает, т.к. ваш скрипт прописан внутри head |
EmperioAf,
понял, как это:
var courses = [0, 100, 200, 250, 300]; //цены за академический час для 0,1,..,4 курсов.
var otch = 30000; //цена за отчётность.
var en = 1.2; //коэффициент увеличения цены за курс на английском языке
var course = prompt("Введите номер выбранного вами курса (1-4)");
var time = prompt("Введите продолжительность курса (в академич. часах)");
var lan = prompt("Введите язык курса (ru или en)");
var otchet = confirm("Нужна ли отчётность? (ОК - да; Отмена - нет)");
var price = time * courses[course] + (otchet ? otch : 0);
if (lan = "en") price *= en;
document.write("Цена курса будет равна " + price +" рублей");
в мою форму прилепить? |
Прост вставил скрипты перед закрывающимся тегом body и вроде работает. Вы этого хотели? :)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
* {
margin:0;
padding: 0;
outline: none;
}
</style>
</head>
<body>
<FORM name="form1">
<div>Выберите курс: </div>
<br>
<input type="checkbox" name="course" id="c1" value="300" onClick="getCours();">pyccкий<br>
<input type="checkbox" name="course" id="c2" value="200" onClick="getCours();">английский<br>
<input type="checkbox" name="course" id="c3" value="100" onClick="getCours();">французский<br>
<input type="checkbox" name="course" id="c4" value="150" onClick="getCours();">немецкий<br>
<hr>
<div>Выберите продолжительность курса (в академ.часах) : </div>
<input type="checkbox" name="time" id="t1" value="10">10<br>
<input type="checkbox" name="time" id="t2" value="20">20<br>
<input type="checkbox" name="time" id="t3" value="30">30<br>
<input type="checkbox" name="time" id="t4" value="50">50<br>
<hr>
<div>Выберите язык преподавания курса : </div>
<input type="checkbox" name="lan" id="l1">Русский<br>
<input type="checkbox" name="lan" id="l2">Английский<br>
<hr>
<div>Нужна ли отчетность? : </div>
<input type="checkbox" name="otchet" id="ot1" value="3000">Да<br>
<input type="checkbox" name="otchet" id="ot2" value="0">Нет<br>
<hr>
<input type="button" id="rezult" value="Рассчитать" onClick=""><br>
<hr>
<br>
<br>
<div>Стоимость : </div>
<input type="text" size="15" >
</FORM><hr>
<script language="JavaScript">
var courses = [0, 100, 200, 250, 300]; //цены за академический час для 0,1,..,4 курсов.
var otch = 30000; //цена за отчётность.
var en = 1.2; //коэффициент увеличения цены за курс на английском языке
var course = prompt("Введите номер выбранного вами курса (1-4)");
var time = prompt("Введите продолжительность курса (в академич. часах)");
var lan = prompt("Введите язык курса (ru или en)");
var otchet = confirm("Нужна ли отчётность? (ОК - да; Отмена - нет)");
var price = time * courses[course] + (otchet ? otch : 0);
if (lan = "en") price *= en;
document.write("Цена курса будет равна " + price +" рублей");
var en = 1.2; //коэффициент увеличения цены за курс на английском языке
function getCours(){
var c1 = document.getElementById("c1").value;
var c2 = document.getElementById("c2").value;
var c3 = document.getElementById("c3").value;
var c4 = document.getElementById("c4").value;
//---------------------------//
var t1 = document.getElementById("t1").value;
var t2 = document.getElementById("t2").value;
var t3 = document.getElementById("t3").value;
var t4 = document.getElementById("t4").value;
//---------------------------//
var l1 = document.getElementById("l1").value;
var l2 = document.getElementById("l2").value;
//---------------------------//
var ot1 = document.getElementById("ot1").value;
var ot2 = document.getElementById("ot2").value;
//---------------------------//
var price = time * courses[course] + (otchet ? otch : 0);
}
</script>
</body>
</html>
|
EmperioAf,
почти)результат нужен исходя из выбранных чекбоксов) |
Цитата:
Цитата:
|
Подскажите:
пользователь выбирает к примеру чекбокс: <input type="checkbox" name="course" id="c1" value="300" onClick="getCours();">pyccкий<br> Тут я получаю id всех чекбоксов,А ак узнать какой был выбран?
var c1 = document.getElementById("c1").value;
var c2 = document.getElementById("c2").value;
var c3 = document.getElementById("c3").value;
var c4 = document.getElementById("c4").value;
свойство cheked мне знакомо, проверять все через if?-пробовал...что-то не получается |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
* {
margin:0;
padding: 0;
outline: none;
}
</style>
</head>
<body>
<input type="checkbox" id="checkbox">
<input type="text" id="text">
<script>
var checkbox = document.querySelector('#checkbox')
checkbox.onclick = function(){
document.querySelector('#text').value = checkbox.checked;
}
</script>
</body>
</html>
|
var checkbox = document.querySelector('#checkbox')
этой строкой я получаю все checkbox,верно? если да, то как узнать,что я выбрал допустим это: <input type="checkbox" name="course" id="c1" value="300" onClick="getCours();">pyccкий<br> |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
* {
margin:0;
padding: 0;
outline: none;
}
input[type="text"] {
width: 700px;
}
</style>
</head>
<body>
<input type="checkbox" id="check1">
<input type="checkbox" id="check2">
<input type="checkbox" id="check3">
<input type="checkbox" id="check4">
<input type="checkbox" id="check5">
<input type="checkbox" id="check6">
<input type="checkbox" id="check7">
<input type="checkbox" id="check8">
<input type="checkbox" id="check9">
<input type="checkbox" id="check10">
<input type="text" id="text">
<script>
var checkboxs = document.querySelectorAll('input[type="checkbox"]');
[].forEach.call(checkboxs, function(item){
item.onclick = function(){
document.querySelector('#text').value = "Выбранные чекбоксы: ";
for (var i = 0; i < checkboxs.length; i++){
if (checkboxs[i].checked)
document.querySelector('#text').value += checkboxs[i].id+" ";
}
}
});
</script>
</body>
</html>
|
Цитата:
|
EmperioAf,
var checkboxs = document.querySelectorAll('input[type="checkbox"]');
[].forEach.call(checkboxs, function(item){
item.onclick = function(){
/*document.querySelector('#text').value = "Выбранные чекбоксы: ";*/
for (var i = 0; i < checkboxs.length; i++){
if (checkboxs[i].checked)
//document.querySelector('#text').value += checkboxs[i].id+" ";
var course=checkboxs[i].value;//в переменную я сохранил допустим первое значение из чекбокса
}
}
});
<input type="checkbox" name="course" id="c1" value="300" onClick="getCours();">pyccкий<br>300 у меня в переменной var course тогда как получить следующий выбранный: <input type="checkbox" name="time" id="t1" value="10">10<br> и так далее |
все,нашел выход,повторно использовал цикл for
|
Что-то торможу: а как в поле
<input type="text" size="15" > вывести var price
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
* {
margin:10;
padding: 0;
outline: none;
}
</style>
</head>
<body>
<FORM name="form1">
<div>Выберите курс: </div>
<br>
<input type="checkbox" name="course" id="c1" value="300" onClick="getCours();">pyccкий<br>
<input type="checkbox" name="course" id="c2" value="200" onClick="getCours();">английский<br>
<input type="checkbox" name="course" id="c3" value="100" onClick="getCours();">французский<br>
<input type="checkbox" name="course" id="c4" value="150" onClick="getCours();">немецкий<br>
<hr>
<div>Выберите продолжительность курса (в академ.часах) : </div>
<input type="checkbox" name="time" id="t1" value="10">10<br>
<input type="checkbox" name="time" id="t2" value="20">20<br>
<input type="checkbox" name="time" id="t3" value="30">30<br>
<input type="checkbox" name="time" id="t4" value="50">50<br>
<hr>
<div>Выберите язык преподавания курса : </div>
<input type="checkbox" name="lan" id="l1">Русский<br>
<input type="checkbox" name="lan" id="l2">Английский<br>
<hr>
<div>Нужна ли отчетность? : </div>
<input type="checkbox" name="otchet" id="ot1" value="3000">Да<br>
<input type="checkbox" name="otchet" id="ot2" value="0">Нет<br>
<hr>
<hr>
<br>
<br>
<div>Стоимость : </div>
<input type="text" size="15" >
</FORM><hr>
<script language="JavaScript">
var checkboxs = document.querySelectorAll('input[type="checkbox"]');
[].forEach.call(checkboxs, function(item){
item.onclick = function(){
for (var i = 0; i < checkboxs.length; i++){
if (checkboxs[i].checked)
var course=checkboxs[i].value;
}
for (var i = 0; i < checkboxs.length; i++){
if (checkboxs[i].checked)
var time=checkboxs[i].value;
}
for (var i = 0; i < checkboxs.length; i++){
if (checkboxs[i].checked)
var lan=checkboxs[i].value;
}
for (var i = 0; i < checkboxs.length; i++){
if (checkboxs[i].checked)
var otchet=checkboxs[i].value;
}
var price = ((time * course) + otchet);
}
});
</script>
</body>
</html>
|
Интересно, а можно ли прослушать курс одновременно на русском и английском, заказать одновременно несколько продолжительностей его, а отчетность и нужна, и нет, ну и остальное в том же духе?
Вряд-ли такое можно назвать разумным, так почему тогда type="checkbox"? |
laimas,
это лучше спросить у тех кто придумывал это задание в лабр. работах) |
пробовал так:
document.querySelector('#text').value += ((time * course) + otchet);
|
Что не так делаю,подскажите пожалуйста:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
* {
margin:10;
padding: 0;
outline: none;
}
</style>
</head>
<body>
<FORM name="form1">
<div>Выберите курс: </div>
<br>
<input type="checkbox" name="course" id="c1" value="300" onClick="getCours();">pyccкий<br>
<input type="checkbox" name="course" id="c2" value="200" onClick="getCours();">английский<br>
<input type="checkbox" name="course" id="c3" value="100" onClick="getCours();">французский<br>
<input type="checkbox" name="course" id="c4" value="150" onClick="getCours();">немецкий<br>
<hr>
<div>Выберите продолжительность курса (в академ.часах) : </div>
<input type="checkbox" name="time" id="t1" value="10">10<br>
<input type="checkbox" name="time" id="t2" value="20">20<br>
<input type="checkbox" name="time" id="t3" value="30">30<br>
<input type="checkbox" name="time" id="t4" value="50">50<br>
<hr>
<div>Выберите язык преподавания курса : </div>
<input type="checkbox" name="lan" value="50" id="l1">Русский<br>
<input type="checkbox" name="lan" value="100" id="l2">Английский<br>
<hr>
<div>Нужна ли отчетность? : </div>
<input type="checkbox" name="otchet" id="ot1" value="3000">Да<br>
<input type="checkbox" name="otchet" id="ot2" value="0">Нет<br>
<hr>
<hr>
<br>
<br>
<div>Стоимость : </div>
<input type="text" size="15" onfocus="rezult(this);" >
</FORM><hr>
<script language="JavaScript">
var checkboxs = document.querySelectorAll('input[type="checkbox"]');
[].forEach.call(checkboxs, function(item){
item.onclick = function(){
for (var i = 0; i < checkboxs.length; i++){
if (checkboxs[i].checked)
var course=checkboxs[i].value;
}
for (var i = 0; i < checkboxs.length; i++){
if (checkboxs[i].checked)
var time=checkboxs[i].value;
}
for (var i = 0; i < checkboxs.length; i++){
if (checkboxs[i].checked)
var lan=checkboxs[i].value;
}
for (var i = 0; i < checkboxs.length; i++){
if (checkboxs[i].checked)
var otchet=checkboxs[i].value;
}
var price = (((time * course)*lan) + otchet);
//ДО ЭТОГО КОДА ВСЕ РАБОТАЕТ, Т.Е ALERT-ОМ Я ПРОВЕРЯЛ ,
//если выводить тут результат, то после первого выбранного чекбокса сразу отрабатывает alert ,а мне нужно в самом конце,после выбоар всех чекбоксов
function rezult(course,time,lan,otchet){
alert(price);
rezult();
}
}
});
</script>
</body>
</html>
|
Зачем четырежды for (var i = 0; i < checkboxs.length; i++) ?
И не надо кивать на кураторов, сколь бы не именовать checkbox одним именем они все равно не станут группой зависимых переключателей. Меняйте тип кнопки. И id кнопкам совсем не нужны. |
laimas,
так я получаю каждый нажатый чекбокс из группы,а их шт |
Цитата:
|
laimas,
может гавно**код)но через alert я получаю свои нажатые чекбоксы)однако вывести результат не могу... |
Дело не в том какому сорту Г код принадлежит, а в том, что в этом нет смысла. Сама форма содержит коллекцию элементов, которую можно получить через ее свойство elements, обойдя которую ОДНИМ циклом можно получить отмеченные кнопки. А так как группы кнопок имеют разные имена, то и не сложно получить отмеченное в группе.
А вот checkbox, это точно дурость, и если кураторы ваши ею маются, то это еще не значит, что и вы должны этим заниматься, наоборот, разъясните им разницу между checkbox и radio, пора бы это уяснить. |
laimas,
понял,спасибо,буду добивать свой вариант. НО от помощи не отказался бы)) |
Пересмотрел код,решил пойти таким путем и опять тупик, уважаемые, разъясните,нуждаюсь в помощи:
Выводится только последнее число,а точнее его перемножение ,А потом сложение: хотя, я проверял через alert(a); alert(b); alert(c); alert(d);выводится первое выбранное число.Что не так
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
* {
margin:10;
padding: 0;
outline: none;
}
</style>
</head>
<body>
<FORM name="form1">
<div>Выберите курс: </div>
<br>
<input type="checkbox" id="c1" value="100" >pyccкий<br>
<input type="checkbox" id="c2" value="200" >английский<br>
<input type="checkbox" id="c3" value="300">французский<br>
<input type="checkbox" id="c4" value="400" >немецкий<br>
<hr>
<div>Выберите продолжительность курса (в академ.часах) : </div>
<input type="checkbox" id="t1" value="200" >10<br>
<input type="checkbox" id="t2" value="300" >20<br>
<input type="checkbox" id="t3" value="400">30<br>
<input type="checkbox" id="t4" value="350" >50<br>
<hr>
<div>Выберите язык преподавания курса : </div>
<input type="checkbox" value="200" id="l1">Русский<br>
<input type="checkbox" value="400" id="l2">Английский<br>
<hr>
<div>Нужна ли отчетность? : </div>
<input type="checkbox" value="4000" id="ot1" >Да<br>
<input type="checkbox" value="0" id="ot2 ">Нет<br>
<hr>
<hr>
<br>
<br>
<div>Стоимость : </div>
<input type="text" size="50" id="1" value="" onClick="grant()" ><br>
</FORM>
<script language="JavaScript">
function grant()
{ var d= document;
var a;
var b;
var c;
var d;
for(i=0;i<=11;i++){
if ((d.form1.elements[i]).checked){
a=(d.form1.elements[i].value);
}
if ((d.form1.elements[i]).checked){
b=(d.form1.elements[i].value);
}
if ((d.form1.elements[i]).checked){
c=(d.form1.elements[i].value);
}
if ((d.form1.elements[i]).checked){
d=(d.form1.elements[i].value);
}
document.getElementById("1").value=(a*b*c)+d;
}
}
</script>
</body>
</html>
|
попробуйте заменить это:
document.getElementById("1").value=(a*b*c)+d;
на это:
document.getElementById("1").value=+(a*b*c)+d;
И ещё id не должен начинаться с цифры |
EmperioAf,
спасибо,учту замечание. Изменил, только опять происходит действия на последним выбранным элементом.. ![]() |
Цитата:
|
EmperioAf,
в комментариях указал то,что как бы должно делаться,т.е я так подозреваю
function grant()
{ var d= document;
var a;
var b;
var c;
var d;
for(i=0;i<=11;i++){
if ((d.form1.elements[i]).checked){ //прошел циклом,нашел элемент
a=(d.form1.elements[i].value);//сохранил
}
if ((d.form1.elements[i]).checked){//тут аналогично
b=(d.form1.elements[i].value);
}
if ((d.form1.elements[i]).checked){
c=(d.form1.elements[i].value);
}
if ((d.form1.elements[i]).checked){
d=(d.form1.elements[i].value);
}
document.getElementById("pole").value=+(a*b*c)+d;
}
}
Где-то видел,что можно делать так: цикл for if (что-то){ d=(что-то)i++; //можно ли так?? } |
Цитата:
Правда из цикла можно легко сделать оператор условия, но иначе можно сделать только с помощью меток. В javascript можно использовать метки, чтобы прыгать между уровнями цикла. Метки действуют только для циклов и switch, т.е организовать полноценный goto через них нельзя http://javascript.ru/basic/syntax-switch-for#metki Т.е. через оператор if сделать полноценный цикл у вас не получится Цитата:
данные только если checked |
if ((d.form1.elements[i]).checked){ //прошел циклом,нашел элемент
a=(d.form1.elements[i].value);//сохранил
}
if ((d.form1.elements[i]).checked){//тут аналогично
Не получится так. |
EmperioAf,
laimas,
function grant()
{ var d= document;
var arr=(12);
var a;
var b;
var c;
var d;
for(i=0;i<=12;i++){
if ((d.form1.elements[i]).checked){
arr[i]=(d.form1.elements[i].value);
заношу элементы в массив,
alert(arr[i]);//показывает выбранные элементы,однако arr[0] не получается так обратиться и достать от туда выбранное число
}
}
}
|
Вам уже неоднократно говорилось, что checkbox в вашей задаче, это ... не охота говорить, после не раз сказанного напрашивается грубость.
Все развалится к чертовой матери стоит только пользователю случайно выбрать две и более кнопки в группе. Вы вообще думаете над этим или похер все? |
laimas,
тогда вопрос,вообще не обрабатывать js chekbox? |
Да ити вашу мать, вы знаете разность между chekbox и radio кнопками?
|
laimas,
множественный и один выбор поменял,а дальше то что??
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
* {
margin:10;
padding: 0;
outline: none;
}
</style>
</head>
<body>
<FORM name="form1">
<div>Выберите курс: </div>
<br>
<input type="radio" name="group1" value="100" >pyccкий<br>
<input type="radio" name="group1" value="200" >английский<br>
<input type="radio" name="group1" value="300">французский<br>
<input type="radio" name="group1" value="400" >немецкий<br>
<hr>
<div>Выберите продолжительность курса (в академ.часах) : </div>
<input type="radio" name="group2" value="200" >10<br>
<input type="radio" name="group2" value="300" >20<br>
<input type="radio" name="group2" value="400">30<br>
<input type="radio" name="group2" value="350" >50<br>
<hr>
<div>Выберите язык преподавания курса : </div>
<input type="radio" value="200" name="group3">Русский<br>
<input type="radio" value="400" name="group3">Английский<br>
<hr>
<div>Нужна ли отчетность? : </div>
<input type="radio" value="4000" name="group4" >Да<br>
<input type="radio" value="0" name="group4">Нет<br>
<hr>
<hr>
<br>
<br>
<div>Стоимость : </div>
<input type="text" size="50" id="pole" value="" onClick="grant()" ><br>
</FORM>
<script language="JavaScript">
function grant()
{ var d= document;
var arr=(12);
var a;
var b;
var c;
var d;
for(i=0;i<=12;i++){
if ((d.form1.elements[i]).checked){
arr[i]=(d.form1.elements[i].value);
alert(arr[i]);
}
|
| Часовой пояс GMT +3, время: 22:01. |