Сбор данных в переменную и передача в неактивное поле input
Доброго времени суток! Javascript не знаю СОВСЕМ, так что просьба не ругаться если что :) Нужен был скриптик, решил попробовать сделать его на основе примера. В итоге получилось все кроме одного.
Имеется несколько чекбоксов и переменная. Изначально переменная выглядит как abcd. Каждому чекбоксу прикреплена одна буква и необходимо присоединить эту букву к переменной, если он активен. И так с каждым чекбоксом. После этого данная переменная должна отобразиться в неактивном поле input, чтобы далее передать методом post в php скрипт. Если желаете помочь, могу выслать скрипт в личку полностью. Заранее спасибо. |
не надо в личку, показывайте здесь
|
<html>
<head>
<script>
function check() {
var input = '';
var ch = document.getElementsByTagName('input');
for (i = 0; i < ch.length; i++) {
var box = ch[i];
if (box.value == 'on')
input += box.id;
}
document.getElementById('input').value = input;
}
</script>
</head>
<body>
<input type="checkbox" id="a" checked onchange="check();" /> a<br />
<input type="checkbox" id="b" checked onchange="check();" /> b<br />
<input type="checkbox" id="c" checked onchange="check();" /> c<br />
<input type="checkbox" id="d" checked onchange="check();" /> d<br />
<input type="text" id="input" disabled="disabled" value="abcd" />
</body>
</html>
Так что ли надо ? |
Наверное он довольно неуклюжий, но все же..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Калькулятор стоимости админки</title>
<style type="text/css">
<!--
.style1 {
color: #333333;
font-size: 14px;
font-weight:bold;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
div {
color:#CCCCCC;
font-size:11px;
font-family:Georgia, "Times New Roman", Times, serif;
}
a:hover, a{
color:#CCCCCC;
text-decoration: none;
}
-->
</style>
[JS]
<SCRIPT LANGUAGE="JavaScript">
function checkBox()
{
if (document.form.all.checked)
{
document.form.perevod.checked = true;
document.form.teleport.checked = true;
document.form.mapmenu.checked = true;
document.form.weaponmenu.checked = true;
document.form.vote.checked = true;
document.form.clientcommands.checked = true;
document.form.grenades.checked = true;
document.form.chat.checked = true;
document.form.provwh.checked = true;
}
else
{
document.form.perevod.checked = false;
document.form.teleport.checked = false;
document.form.mapmenu.checked = false;
document.form.weaponmenu.checked = false;
document.form.vote.checked = false;
document.form.clientcommands.checked = false;
document.form.grenades.checked = false;
document.form.chat.checked = false;
document.form.provwh.checked = false;
}
}
function price(form) {
if (form.perevod.checked){
var perevod=parseFloat(form.perevod.value);
}
else perevod=0;
if (form.teleport.checked){
var teleport=parseFloat(form.teleport.value);
}
else teleport=0;
if (form.mapmenu.checked){
var mapmenu=parseFloat(form.mapmenu.value);
}
else mapmenu=0;
if (form.weaponmenu.checked){
var weaponmenu=parseFloat(form.weaponmenu.value);
}
else weaponmenu=0;
if (form.vote.checked){
var vote=parseFloat(form.vote.value);
}
else vote=0;
if (form.clientcommands.checked){
var clientcommands=parseFloat(form.clientcommands.value);
}
else clientcommands=0;
if (form.grenades.checked){
var grenades=parseFloat(form.grenades.value);
}
else grenades=0;
if (form.chat.checked){
var chat=parseFloat(form.chat.value);
}
else chat=0;
if (form.provwh.checked){
var provwh=parseFloat(form.provwh.value);
}
else provwh=0;
if (form.vremia[1].checked){
var vremia=2;
}
else if (form.vremia[2].checked){
var vremia=3;
}
else if (form.vremia[3].checked){
var vremia=4;
}
else if (form.vremia[4].checked){
var vremia=5;
}
else if (form.vremia[5].checked){
var vremia=6;
}
else vremia=1;
var total=(50+perevod+teleport+mapmenu+weaponmenu+vote+clientcommands+grenades+chat+provwh)*vremia;
document.getElementById("total_price").innerHTML=total;
}
</SCRIPT>
[/JS]
</head>
<body>
<center>
<div class="style1">Расчет стоимости админки</div><br />
<form name="form" onclick="price(this)">
<table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" align="center"><b>Модули</b></td>
</tr>
<tr>
<td> </td>
<td align="left"><input type="checkbox" value="50" name="adminka" disabled checked />Пустая админка<hr></td>
<td>- 50</td>
</tr>
<tr>
<td> </td>
<td align="left"><input type="checkbox" value="20" name="grenades" /> Бесплатная броня и гранаты</td>
<td>- 20</td>
</tr>
<tr>
<td> </td>
<td align="left"><input type="checkbox" value="20" name="perevod" /> Перевод игрока</td>
<td>- 20</td>
</tr>
<tr>
<td> </td>
<td align="left"><input type="checkbox" value="20" name="teleport" /> Меню телепорта</td>
<td>- 20</td>
</tr>
<tr>
<td> </td>
<td align="left"><input type="checkbox" value="20" name="chat" /> Пакет "Чат"</td>
<td>- 20</td>
</tr>
<tr>
<td> </td>
<td align="left"><input type="checkbox" value="30" name="mapmenu" /> Смена карты</td>
<td>- 30</td>
</tr>
<tr>
<td> </td>
<td align="left"><input type="checkbox" value="30" name="weaponmenu" /> Меню оружия</td>
<td>- 30</td>
</tr>
<tr>
<td> </td>
<td align="left"><input type="checkbox" value="40" name="vote" /> Пакет "Голосование"</td>
<td>- 40</td>
</tr>
<tr>
<td> </td>
<td align="left"><input type="checkbox" value="40" name="clientcommands" /> Пакет "Client Commands"</td>
<td>- 40</td>
</tr>
<tr>
<td> </td>
<td align="left"><input type="checkbox" value="40" name="provwh" /> Дополнительная проверка на Вх<hr></td>
<td>- 40</td>
</tr>
<tr>
<td> </td>
<td align="left"><input type="checkbox" name="all" onclick="checkBox();" /> Подключить все</td>
<td>- 310</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3" align="center"><b>Длительность покупки</b></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="left"><INPUT type="radio" name="vremia" value="1"> 1 месяц</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="left"><INPUT type="radio" name="vremia" value="2"> 2 месяца</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="left"><INPUT type="radio" name="vremia" value="3"> 3 месяца</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="left"><INPUT type="radio" name="vremia" value="4"> 4 месяца</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="left"><INPUT type="radio" name="vremia" value="5"> 5 месяцев</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="left"><INPUT type="radio" name="vremia" value="6"> 6 месяцев</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="center"><input type="submit" value="Проба" /></td>
<td align="center"><input type="button" value="Заказать" onclick="tf1.style.display = 'inline';"/> <b>Итого:</b></td>
<td align="center" id="total_price" style="color: #993300;font-weight:bold; font-size:14px">0</td>
</tr>
</table>
</form>
<form action="sendmail.php" method="post">
<table width="350" border="0" cellspacing="0" cellpadding="0" style="display:none" id="tf1">
<tr>
<td colspan="2" align="left"> <b>Заказ админки</b></td>
</tr>
<tr>
<td width="90" align="left">Ник *</td>
<td width="260" align="left"><input type="text" value="" name="name" style="width:95%;"/></td>
</tr>
<tr>
<td align="left">Skype/ICQ *</td>
<td align="left"><input type="text" value="" name="skype" style="width:95%;"/></td>
</tr>
<tr>
<td align="left">Возраст *</td>
<td align="left"><input type="text" value="" name="age" style="width:95%;"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Отправить уведомление" /> </td>
</tr>
</table>
</form>
</center>
</body>
</html>
|
Цитата:
|
Попробовал. Значения находятся в форме и в активном состоянии чекбокса, и в неактивном. Кроме того задевается работоспособность функции price. Те переменные, которые я меняю в соответствии с вашим примером после включения чекбокса выдают NaN вместо нужного значения.
|
а конкретно в вашем примере что вам надо сделать ?
|
Цитата:
<tr>
<td align="left">Права</td>
<td align="left"><input type="text" value="" name="prava" style="width:95%;" disabled/></td>
</tr>
В котором бы отображались флаги, соответствующие активным чекбоксам модулей. То бишь со 128 по 178 строчку указанного кода. |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Калькулятор стоимости админки</title>
<style type="text/css">
<!--
.style1 {
color: #333333;
font-size: 14px;
font-weight:bold;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
div {
color:#CCCCCC;
font-size:11px;
font-family:Georgia, "Times New Roman", Times, serif;
}
a:hover, a{
color:#CCCCCC;
text-decoration: none;
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript">
function checkBox()
{
if (document.form.all.checked)
{
document.form.perevod.checked = true;
document.form.teleport.checked = true;
document.form.mapmenu.checked = true;
document.form.weaponmenu.checked = true;
document.form.vote.checked = true;
document.form.clientcommands.checked = true;
document.form.grenades.checked = true;
document.form.chat.checked = true;
document.form.provwh.checked = true;
}
else
{
document.form.perevod.checked = false;
document.form.teleport.checked = false;
document.form.mapmenu.checked = false;
document.form.weaponmenu.checked = false;
document.form.vote.checked = false;
document.form.clientcommands.checked = false;
document.form.grenades.checked = false;
document.form.chat.checked = false;
document.form.provwh.checked = false;
}
}
function price(form) {
if (form.perevod.checked){
var perevod=parseFloat(form.perevod.value);
}
else perevod=0;
if (form.teleport.checked){
var teleport=parseFloat(form.teleport.value);
}
else teleport=0;
if (form.mapmenu.checked){
var mapmenu=parseFloat(form.mapmenu.value);
}
else mapmenu=0;
if (form.weaponmenu.checked){
var weaponmenu=parseFloat(form.weaponmenu.value);
}
else weaponmenu=0;
if (form.vote.checked){
var vote=parseFloat(form.vote.value);
}
else vote=0;
if (form.clientcommands.checked){
var clientcommands=parseFloat(form.clientcommands.value);
}
else clientcommands=0;
if (form.grenades.checked){
var grenades=parseFloat(form.grenades.value);
}
else grenades=0;
if (form.chat.checked){
var chat=parseFloat(form.chat.value);
}
else chat=0;
if (form.provwh.checked){
var provwh=parseFloat(form.provwh.value);
}
else provwh=0;
if (form.vremia[1].checked){
var vremia=2;
}
else if (form.vremia[2].checked){
var vremia=3;
}
else if (form.vremia[3].checked){
var vremia=4;
}
else if (form.vremia[4].checked){
var vremia=5;
}
else if (form.vremia[5].checked){
var vremia=6;
}
else vremia=1;
var total=(50+perevod+teleport+mapmenu+weaponmenu+vote+clientcommands+grenades+chat+provwh)*vremia;
document.getElementById("total_price").innerHTML=total;
var ch = getElementsByClass('modules', form);
var prava = '';
for (i = 0; i < ch.length; i++) {
var box = ch[i];
if (box.checked == true) {
prava += box.id;
}
}
document.getElementById('prava').value = prava;
}
// Function getElementsByClass
if(document.getElementsByClassName) {
getElementsByClass = function(classList, node) {
return (node || document).getElementsByClassName(classList)
}
} else {
getElementsByClass = function(classList, node) {
var node = node || document,
list = node.getElementsByTagName('*'),
length = list.length,
classArray = classList.split(/\s+/),
classes = classArray.length,
result = [], i,j
for(i = 0; i < length; i++) {
for(j = 0; j < classes; j++) {
if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {
result.push(list[i])
break
}
}
}
return result
}
}
</SCRIPT>
</head>
<body>
<center>
<div class="style1">Расчет стоимости админки</div><br />
<form name="form" onclick="price(this)">
<table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" align="center"><b>Модули</b></td>
</tr>
<tr>
<td> </td>
<td align="left"><input class="modules" id="a" type="checkbox" value="50" name="adminka" disabled checked />Пустая админка<hr></td>
<td>- 50</td>
</tr>
<tr>
<td> </td>
<td align="left"><input class="modules" id="b" type="checkbox" value="20" name="grenades" /> Бесплатная броня и гранаты</td>
<td>- 20</td>
</tr>
<tr>
<td> </td>
<td align="left"><input class="modules" id="c" type="checkbox" value="20" name="perevod" /> Перевод игрока</td>
<td>- 20</td>
</tr>
<tr>
<td> </td>
<td align="left"><input class="modules" id="d" type="checkbox" value="20" name="teleport" /> Меню телепорта</td>
<td>- 20</td>
</tr>
<tr>
<td> </td>
<td align="left"><input class="modules" id="e" type="checkbox" value="20" name="chat" /> Пакет "Чат"</td>
<td>- 20</td>
</tr>
<tr>
<td> </td>
<td align="left"><input class="modules" id="f" type="checkbox" value="30" name="mapmenu" /> Смена карты</td>
<td>- 30</td>
</tr>
<tr>
<td> </td>
<td align="left"><input class="modules" id="g" type="checkbox" value="30" name="weaponmenu" /> Меню оружия</td>
<td>- 30</td>
</tr>
<tr>
<td> </td>
<td align="left"><input class="modules" id="h" type="checkbox" value="40" name="vote" /> Пакет "Голосование"</td>
<td>- 40</td>
</tr>
<tr>
<td> </td>
<td align="left"><input class="modules" id="i" type="checkbox" value="40" name="clientcommands" /> Пакет "Client Commands"</td>
<td>- 40</td>
</tr>
<tr>
<td> </td>
<td align="left"><input class="modules" id="j" type="checkbox" value="40" name="provwh" /> Дополнительная проверка на Вх<hr></td>
<td>- 40</td>
</tr>
<tr>
<td> </td>
<td align="left"><input type="checkbox" name="all" onclick="checkBox();" /> Подключить все</td>
<td>- 310</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3" align="center"><b>Длительность покупки</b></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="left"><INPUT type="radio" name="vremia" value="1"> 1 месяц</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="left"><INPUT type="radio" name="vremia" value="2"> 2 месяца</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="left"><INPUT type="radio" name="vremia" value="3"> 3 месяца</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="left"><INPUT type="radio" name="vremia" value="4"> 4 месяца</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="left"><INPUT type="radio" name="vremia" value="5"> 5 месяцев</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="left"><INPUT type="radio" name="vremia" value="6"> 6 месяцев</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="center"><input type="submit" value="Проба" /></td>
<td align="center"><input type="button" value="Заказать" onclick="tf1.style.display = 'inline';"/> <b>Итого:</b></td>
<td align="center" id="total_price" style="color: #993300;font-weight:bold; font-size:14px">0</td>
</tr>
</table>
</form>
<form action="sendmail.php" method="post">
<table width="350" border="0" cellspacing="0" cellpadding="0" style="display:none" id="tf1">
<tr>
<td colspan="2" align="left"> <b>Заказ админки</b></td>
</tr>
<tr>
<td width="90" align="left">Ник *</td>
<td width="260" align="left"><input type="text" value="" name="name" style="width:95%;"/></td>
</tr>
<tr>
<td align="left">Skype/ICQ *</td>
<td align="left"><input type="text" value="" name="skype" style="width:95%;"/></td>
</tr>
<tr>
<td align="left">Возраст *</td>
<td align="left"><input type="text" value="" name="age" style="width:95%;"/></td>
</tr>
<tr>
<td align="left">Права</td>
<td align="left"><input type="text" id="prava" value="a" name="prava" style="width:95%;" disabled/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Отправить уведомление" /> </td>
</tr>
</table>
</form>
</center>
</body>
</html>
Так ? |
Да, то что я и хотел. Спасибо огромное! Вы мне очень помогли!
P.S. Поставил + в репу. |
| Часовой пояс GMT +3, время: 10:13. |