Вывести массив с checkbox
Добрый вечер, помогите написать скрипт. Имеются пару групп чекбоксо
<form method=get action="#" name="chekcms"> <input type=checkbox name="wordpress">wordpress<br> <input type=checkbox name="ucoz">ucoz<br> <input type=checkbox name="dle">dle<br> </form> <form method=get action="#" name="tagform"> <input type=checkbox name="tag1">tag1<br> <input type=checkbox name="tag2">tag2<br> <input type=checkbox name="tag3">tag3<br> <input type=checkbox name="tag4">tag4<br> </form> Помогите вывести резултат выбранных чекбоксов в массив и подставить вот сюда window.location = 'http://site.ru/tag/' + energy + '&orderby=title&order=asc/'; |
Что именно вывести и в какой форме представить не совсем понятно.
<form method=get action="#" name="chekcms">
<input type=checkbox name="wordpress">wordpress<br>
<input type=checkbox name="ucoz">ucoz<br>
<input type=checkbox name="dle">dle<br>
</form>
<button id="myBut">click</button>
<script>
myBut.onclick = function () {
var inp = document.getElementsByTagName('input');
var length = inp.length;
var mas = [];
for (var i = 0; i < length; i++) {
mas.push(inp[i].checked);
}
alert(mas);
}
</script>
|
Скажите, как вывести результат в строку через запятую? Не true или false, а значения выбранных боксов.
|
join
|
Вы можете представить готовый код? В ява-скрипт совсем не разбираюсь.
|
<form method=get action="#" name="chekcms">
<input type=checkbox name="wordpress">wordpress<br>
<input type=checkbox name="ucoz">ucoz<br>
<input type=checkbox name="dle">dle<br>
</form>
<button id="myBut">click</button>
<script>
myBut.onclick = function () {
var inp = document.getElementsByTagName('input');
var length = inp.length;
var mas = [];
for (var i = 0; i < length; i++) {
mas.push(inp[i].nextSibling.textContent);//nodeValue, data
}
alert(mas.join(','));
}
</script>
|
Выводятся не выбранные значения, а все...:(
|
так и тут не экстрасенсы ;)
<form method=get action="#" name="chekcms">
<input type=checkbox name="wordpress">wordpress<br>
<input type=checkbox name="ucoz">ucoz<br>
<input type=checkbox name="dle">dle<br>
</form>
<button id="myBut">click</button>
<script>
myBut.onclick = function () {
var inp = document.getElementsByTagName('input');
var length = inp.length;
var mas = [];
for (var i = 0; i < length; i++) {
if (inp[i].checked) {
mas.push(inp[i].nextSibling.nodeValue);
}
}
alert(mas.join(','));
}
</script>
|
Svetlana_,
<form method=get action="#" name="chekcms">
<input type=checkbox name="wordpress">wordpress<br>
<input type=checkbox name="ucoz">ucoz<br>
<input type=checkbox name="dle">dle<br>
</form>
<button id="myBut">click</button>
<script>
myBut.onclick = function () {
var inp = document.getElementsByTagName('input');
var length = inp.length;
var mas = [];
for (var i = 0; i < length; i++) {
if (inp[i].checked) {
mas.push(inp[i].nextSibling.textContent);//nodeValue, data
}
}
alert(mas.join(','));
}
</script>
|
Спасибо, парни. То, что нужно. :)
Использовать 'input' удобно ли? В форме могут оказаться другие поля, не чекбокс. "так и тут не экстрасенсы" - "вы не знаете? так я вам объясню" Русский язык не имеет ничего общего с производным от языка - проггерским русским. Кроме букв. Нонсенс. Но так есть. Не всегда найдёшься в какой такой форме задать вопрос, чтобы он был понятен не только русскому, который суть ухватит "влёт", но и русскому проггеру. Что поделать. Изменение сознания налицо :) Ещё раз. Большое спасибо. Очень помогли. :) |
Цитата:
document.querySelectorAll('input[type=checkbox]'); Цитата:
Цитата:
|
bes, ES5 ;)
<form method=get action="#" name="chekcms">
<input type=checkbox name="wordpress">wordpress<br>
<input type=checkbox name="ucoz">ucoz<br>
<input type=checkbox name="dle">dle<br>
</form>
<button id="myBut">click</button>
<script>
myBut.onclick = function () {
alert(
Array.prototype.slice.call( document.getElementsByTagName( 'input' ) )
.map( function( input ) {
return input.checked;
})
);
}
</script>
|
Вот, что в результате получилось. Не самая плохая форма выбора/добавления тегов.
Используется, например, для добавления и выбора существующих тегов для новой темы блога, журнала.
<form method="post">
<input type="text" id="tags" style=" width:300px" /> <a href="javascript:invWin()"> Selected Tags</a>
<div id="theWin" style=" background:#f4f4f4; border:1px solid #ccc; margin-left: 300px; padding: 4px; visibility:hidden; position:absolute;">
<input type="checkbox" name="wordpress" />wordpress<br>
<input type="checkbox" name="ucoz" />ucoz<br>
<input type="checkbox" name="dle" />dle<br>
</div>
</form>
<button id="myBut">click</button>
<script>
function invWin(){
if (document.getElementById("theWin").style.visibility =="visible") {
document.getElementById("theWin").style.visibility="hidden";
} else {
document.getElementById("theWin").style.visibility="visible";
}
}
myBut.onclick = function () {
var inp = document.querySelectorAll('input[type=checkbox]');
var length = inp.length;
var mas = [];
for (var i = 0; i < length; i++) {
if (inp[i].checked) {
mas.push(inp[i].nextSibling.nodeValue);
}
}
document.getElementById("tags").value = mas.join(',');
}
</script>
|
а кнопочку запустить [html run]
|
Что такое: "значения выбранных боксов"?
Вот, вот... и не знаешь, о чём спросили :) 1. "Значение"... Это, например - "Wordpress", оно же - false или true, оно же - чёрт его знает. 2. "Выбранных"... Это - выбранный список полей(извиняюсь за слово "список"), это - отмеченные чекбоксы, это - неизвестно кто, что выбрал. 3. "Боксы"... ну, это я уж не знаю зачем уж так-то уж. 4. Модератор попрёт за флуд. |
И ещё... Баловство, конечно, но для пользователя будет удобно, если уже введённое слово(новый тег) или слова с запятыми не удалялись из поля "tags" при добавлении существующих тегов.
В принципе, можно обойтись и без этого - в хелпе прописала маленькую инструкцию, мол, сначала выбери, а затем уж добавляй новое. Однако, вроде как-то несовременно. Если найдёте время, уважаемые профессора, создайте решение, плз (не сочтите за наголовуусаживание - код пригодится оччень многим новичкам). |
Цитата:
|
Svetlana_,
if (document.getElementById("tags").length > 0) {
document.getElementById("tags").value += document.getElementById("tags").value.charAt(document.getElementById("tags").length-1) != "," ? ","+mas.join(',') : mas.join(",");
} else {
document.getElementById("tags").value = mas.join(",");
}
|
Зачем вообще кнопка
<form method="post">
<input type="text" id="tags" style=" width:300px"/>
<a href="#"> Selected Tags</a>
<div id="theWin" style=" background:#f4f4f4; border:1px solid #ccc; margin-left: 300px; padding: 4px; visibility:hidden; position:absolute;">
<input type="checkbox" name="wordpress" />wordpress<br>
<input type="checkbox" name="ucoz" />ucoz<br>
<input type="checkbox" name="dle" />dle<br>
</div>
</form>
<script>
window.onload = function () {
var form = document.forms[0];
var inp = form.children[0];
var st = form.children[2].style;
form.onclick = function (e) {
e = e || event;
var target = e.target || e.srcElement;
if (target.tagName == 'A') {
(st.visibility != 'visible') ? st.visibility = 'visible': st.visibility = 'hidden';
} else
if (target.checked) {
inp.value += target.nextSibling.nodeValue + ', ';
} else {
inp.value = inp.value.replace(target.nextSibling.nodeValue + ', ', '');
}
}
}
</script>
|
lord2kim,
if (document.getElementById("tags").length > 0)
, - это условие не работает. Сработало так:
if (document.getElementById("tags").length != '')
Отличная штука :) Для полного счастья не хватает условий: - удалить при нажатии на кнопку введённые в поле "tags" слова, короче n-символов (допустим - 3), - удалить повторные тэги. Повторные теги образуются, когда в поле вручную введён тег, который далее ошибочно ещё и выбирается из имеющихся. |
bes,
"Зачем вообще кнопка". В смысле? |
Цитата:
|
bes,
это как вариант. Организация всей формы может быть разной. В вашем варианте желательно обойтись вообще без checkbox-ов. Логичным будет список ссылок (либо списки ol, li или т.п.), при нажатии на которые в поле "вбрасываются" слова. |
Нда... В общем, ошалев за последние сутки от избыточного синтаксиса ява-скрипт и попыток понять извратный мозг создателя этого "языка", так и не смогла изобразить что-либо путное из ваших кодов непосредственно на сайте. Буду делать на рнр, где всё чётко, чисто и понятно. Через JsHttpRequest. Но, конечно, уже не таким удобным способом для пользователей.
Хотела вам плюсиков добавить за отзывчивость, но тут запрещено подряд плюсовать. Спасибо большое, парни. Редко на каком форуме проггеры помогают быстро, без суеты и оскорблений. Респект. |
Цитата:
|
Цитата:
|
Добрый день. Еще про выборку тегов: вот есть выпадающие списки в которых прописаны теги и нужно чтоб поиск суммировался по этим трем выбранным тегам.
Код то я нашел в инете :) но чуть-чуть не работает:
<form action="" method="get" name="vyborka">
Ширина профиля
<select size="1" id="shirina">
<option value="0" selected> </option>
<option value="145">145</option>
<option value="155">155</option>
<option value="165">165</option>
</select>
Высота профиля
<select size="1" id="vysota">
<option value="0" selected> </option>
<option value="40">40</option>
<option value="45">45</option>
</select>
Диаметр
<select size="1" id="diametr">
<option value="0" selected> </option>
<option value="R12">12</option>
<option value="R13">13</option>
<option value="R14">14</option>
</select>
<button id="knopka1">Подобрать</button>
<!--<input type="button" value="Подобрать" onclick="сюда пишем обработчик формы"> я сделал как bes написал на 1-й стр. -->
</form>
</td></tr></table>
</div>
<script>
knopka1.onclick = function () {
var flag=0;
var shirina='';
if (document.getElementById('shirina').value!='0') {
shirina = document.getElementById('shirina').value;
flag=1;
} else {shirina='';}
var vysota='';
if (document.getElementById('vysota').value!='0') {
if (flag!=0) { vysota='+'; }
vysota += document.getElementById('vysota').value;
flag=1;
} else {vysota='';}
var diametr='';
if (document.getElementById('diametr').value!='0') {
if (flag!=0) { diametr='+';}
diametr += document.getElementById('diametr').value;
} else {diametr='';}
top.location.href='#/?tag='+shirina+vysota+diametr;
}
</script>
Этот код выдает в командной строке: сайт.ru/stranitsa?#/?tag=тэг1+тэг2+тэг3 то есть, не хочет писать как надо: сайт.ru/?tag=тэг1+тэг2+тэг3 Пробовал добавлять "window" перед top, знак + вместо "=", index.php и еще кучу вариантов... пробовал в action= писать "vyborka.php" и в него переносить код джавы - вообще пустую страницу выдает. Подскажите, плиз, как добиться такой выдачи: сайт.ru/?tag=тэг1+тэг2+тэг3 |
| Часовой пояс GMT +3, время: 16:10. |