Активность кнопки отправления при выделении некоторых элементов
<input type='radio' name='top1' value='top1'>top1</input><br /> <input type='radio' name='top2' value='top2'>top2</input><br /> <input type='radio' name='bottom1' value='bottom1'>bottom1</input><br /> <input type='radio' name='bottom2' value='bottom2'>bottom2</input><br /> <input type='submit' value='Отправить' /> Вопрос такой. Как сделать так, чтобы кнопка отправления была неактивна до тех пор, пока не выделен элемент top1 или top2 и (одновременно) bottom1 или bottom2? |
По моему лучше использовать чек боксы (по крайней мере в данном примере)
При смене состояния кнопок, проверяете:
<input type='checkbox' name='top1' value='top1' onchange="check();"/> top 1<br />
<input type='checkbox' name='top2' value='top1' onchange="check();" /> top 2<br />
<input type='checkbox' name='bottom1' value='top1' onchange="check();" /> bottom 1<br />
<input type='checkbox' name='bottom2' value='top1' onchange="check();" /> bottom 2<br />
<input type='submit' value='Отправить' name="submit" disabled="disabled"/>
<script>
function check() {
var top1 = document.getElementsByName('top1')[0],
top2 = document.getElementsByName('top2')[0],
bottom1 = document.getElementsByName('bottom1')[0],
bottom2 = document.getElementsByName('bottom2')[0],
submit = document.getElementsByName('submit')[0];
if ((top1.checked || top2.checked) && (bottom1.checked || bottom2.checked))
submit.disabled = '';
else
submit.disabled = 'disabled';
}
</script>
|
Нет, нужен именно radio, ибо у меня не должно быть возможности выбрать одновременно top1 и top2. Я так понимаю, что top1.checked -это только для input с типом checkbox?
А в конструкции if-else в JavaScript фигурные скобки не являются обязательными? А если в форме будет несколько input с типом text, то как можно дополнить код, чтобы если хотя бы одно текстовое поле пустое, то кнопка отправления также была неактивна? |
Цитата:
Цитата:
Дайте им одинаковые имена. Цитата:
Цитата:
|
<input type='radio' name='top' value='top1' onchange="check();"/> top 1<br />
<input type='radio' name='top' value='top1' onchange="check();" /> top 2<br />
<input type='radio' name='bottom' value='top1' onchange="check();" /> bottom 1<br />
<input type='radio' name='bottom' value='top1' onchange="check();" /> bottom 2<br />
<input type='submit' value='Отправить' name="submit" disabled="disabled"/>
<script>
function check() {
var top = document.getElementsByName('top')[0],
bottom = document.getElementsByName('bottom')[0],
submit = document.getElementsByName('submit')[0];
if (top.checked && bottom.checked)
submit.disabled = '';
else
submit.disabled = 'disabled';
}
</script>
Не работает... Кнопка не становится активной... |
<input type='radio' name='top' value='top1' onchange="check();"/> top 1<br />
<input type='radio' name='top' value='top2' onchange="check();" /> top 2<br />
<input type='radio' name='bottom' value='bottom1' onchange="check();" /> bottom 1<br />
<input type='radio' name='bottom' value='bottom2' onchange="check();" /> bottom 2<br />
<input type='submit' value='Отправить' name="submit" disabled="disabled"/>
<script>
function check() {
var top1 = document.getElementsByName('top')[0],
top2 = document.getElementsByName('top')[1],
bottom1 = document.getElementsByName('bottom')[0],
bottom2 = document.getElementsByName('bottom')[1],
submit = document.getElementsByName('submit')[0];
if ((top1.checked || top2.checked) && (bottom1.checked || bottom2.checked))
submit.disabled = '';
else
submit.disabled = 'disabled';
}
</script>
|
Точно. Так вот зачем нужны эти коварные цифры в скобках
|
Ты получаешь массив элементов. И с помощью этих цифр мы получаем конкретный элемент. Отсчет начинается с нуля.
К примеру: document.getElementsByName('top')[0] - Первый элемент с именем top document.getElementsByName('top')[1] - Второй элемент с именем top |
Теперь вопрос по input.
<script>
function check() {
var top1 = document.getElementsByName('top')[0],
top2 = document.getElementsByName('top')[1],
bottom1 = document.getElementsByName('bottom')[0],
bottom2 = document.getElementsByName('bottom')[1],
input = document.getElementsByName('middle')[0],
submit = document.getElementsByName('submit')[0];
if ((top1.checked || top2.checked) && (bottom1.checked || bottom2.checked) && input.value !== '')
submit.disabled = '';
else
submit.disabled = 'disabled';
}
</script>
<input type='radio' name='top' value='top1' onchange="check();"/> top 1<br />
<input type='radio' name='top' value='top1' onchange="check();" /> top 2<br />
<input type='text' name='middle' value='Текст' onchange="check();" /><br />
<input type='radio' name='bottom' value='top1' onchange="check();" /> bottom 1<br />
<input type='radio' name='bottom' value='top1' onchange="check();" /> bottom 2<br />
<input type='submit' value='Отправить' name="submit" disabled="disabled"/>
Работает, но состояние кнопки изменяется только после того, как фокус будет убран с input. Возможно ли сделать так, чтобы состояние кнопки срабатывало без убирания фокуса с input? |
Да, используй событие onkeydown или onkeyup вместо onchange
|
| Часовой пояс GMT +3, время: 10:08. |