#javascript #html
Вопрос:
Я хочу проверить свою форму в HTML с помощью JavaScript, в частности, чтобы проверить, нажимает ли пользователь один из переключателей. Часть моего кода выглядит следующим образом:
HTML:
<fieldset>
<legend>Your unit</legend>
<label for="COS10011"><input type="radio" name="unit" id="COS10011">COS10011</label>
<label for="COS60004"><input type="radio" name="unit" id="COS60004">COS60004</label>
<label for="COS60007"><input type="radio" name="unit" id="COS60007">COS60007</label><BR>
<p><label>Your Tutor: </label>
<select name="tutor" id="tutor">
<option value="tutor1" selected="selected">Tutor 1</option>
<option value="tutor2">Tutor 2</option>
<option value="tutor3">Tutor 3</option>
</select>
</p>
</fieldset>
язык JavaScript:
function isUnitSelected(){
var selected = false;
var isCOS10011 = document.getElementById("COS10011").checked;
var isCOS60004 = document.getElementById("COS60004").checked;
var isCOS60007 = document.getElementById("COS60007").checked;
if (isCOS10011 || isCOS60004 || isCOS60007)
selected = true; //we haven't used {}. BE CAREFUL about adding extra lines
else{
selected = false;
gErrorMsg = gErrorMsg "Select a sex for your catn"
}
return selected;
}
Комментарии:
1. Сначала вы можете проверить одну из переключателей по умолчанию. Таким образом, вам не придется проверять, выбран ли какой-либо из них
2. Можете ли вы уточнить, в чем заключается проблема? Как используется ваш код, как он выходит из строя? Вот как проверить в событии отправки: jsfiddle.net/rm9s0pv4
3. @firatozcevahir а, понятно, могу я узнать, как это сделать?
4. Просто добавьте
checked
атрибут к одной из переключателей. Подобный этому:<input type="radio" name="unit" id="COS10011" checked>
5. @ChrisG отображаемый JavaScript не смог проверить, выбрана ли какая-либо из кнопок, как будто это ничего не делает с формой
Ответ №1:
Вы можете просто добавить required
атрибут к одной из ваших переключателей в группе, это вызовет собственную проверку:
<form action="#">
<fieldset>
<legend>Your unit</legend>
<label for="COS10011"><input type="radio" name="unit" id="COS10011" required>COS10011</label>
<label for="COS60004"><input type="radio" name="unit" id="COS60004">COS60004</label>
<label for="COS60007"><input type="radio" name="unit" id="COS60007">COS60007</label>
<br/>
<p>
<label>Your Tutor: </label>
<select name="tutor" id="tutor">
<option value="tutor1" selected="selected">Tutor 1</option>
<option value="tutor2">Tutor 2</option>
<option value="tutor3">Tutor 3</option>
</select>
</p>
</fieldset>
<button>submit</button>
</form>
Версия JS:
function isUnitSelected() {
const radios = document.querySelectorAll('input[name="unit"]');
const selected = [...radios].some(radio => radio.checked);
if (!selected) {
let gErrorMsg = "Select a sex for your catn";
console.log(gErrorMsg);
}
return selected;
}
<form action="#" onsubmit="return isUnitSelected()">
<fieldset>
<legend>Your unit</legend>
<label for="COS10011"><input type="radio" name="unit" id="COS10011">COS10011</label>
<label for="COS60004"><input type="radio" name="unit" id="COS60004">COS60004</label>
<label for="COS60007"><input type="radio" name="unit" id="COS60007">COS60007</label>
<br/>
<p>
<label>Your Tutor: </label>
<select name="tutor" id="tutor">
<option value="tutor1" selected="selected">Tutor 1</option>
<option value="tutor2">Tutor 2</option>
<option value="tutor3">Tutor 3</option>
</select>
</p>
</fieldset>
<button>submit</button>
</form>
Комментарии:
1. будет ли это означать, что все переключатели должны быть выбраны?
2. @cpw да, вы можете увидеть в приведенной выше демонстрации, если какое-либо радио выбрано из группы, то форма отправляется
3. это будет веб-проверка по умолчанию, верно? но мне нужна другая проверка, та, которая показывает всплывающее окно, если какая-либо часть формы не заполнена
4. в собственной проверке @cpw также есть крючки JavaScript, см. developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/…
5. @cpw проверьте второй фрагмент с помощью проверки custsom JS
Ответ №2:
Работай Потрясающе
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<fieldset>
<legend>Your unit</legend>
<label for="COS10011"><input type="radio" name="unit" id="COS10011" class="radio" value="1">COS10011</label>
<label for="COS60004"><input type="radio" name="unit" id="COS60004" class="radio" value="2">COS60004</label>
<label for="COS60007"><input type="radio" name="unit" id="COS60007" class="radio" value="3">COS60007</label><BR>
<p><label>Your Tutor: </label>
<select name="tutor" id="tutor">
<option value="1" selected="selected">Tutor 1</option>
<option value="2">Tutor 2</option>
<option value="3">Tutor 3</option>
</select>
</p>
</fieldset>
</body>
<script>
$(document).ready(function () {
$('.radio').click(function () {
selectElement('tutor', $(this).val());
});
});
function selectElement(id, valueToSelect) {
let element = document.getElementById(id);
element.value = valueToSelect;
}
</script>
</html>
Ответ №3:
Вы можете использовать document.getElementsByName
это для этого.
function checkIt(){
let unit=document.getElementsByName("unit");
let selected = false;
for (let i=0;i<unit.length;i ){
if (unit[i].checked){
selected = true;
break;
}
}
if (!selected){
gErrorMsg = gErrorMsg "Select a sex for your catn";
alert(gErrorMsg);
}
return selected;
}
<fieldset>
<legend>Your unit</legend>
<label for="COS10011"><input type="radio" name="unit" id="COS10011" >COS10011</label>
<label for="COS60004"><input type="radio" name="unit" id="COS60004">COS60004</label>
<label for="COS60007"><input type="radio" name="unit" id="COS60007">COS60007</label>
<br/>
<p>
<label>Your Tutor: </label>
<select name="tutor" id="tutor">
<option value="tutor1" selected="selected">Tutor 1</option>
<option value="tutor2">Tutor 2</option>
<option value="tutor3">Tutor 3</option>
</select>
</p>
</fieldset>
<button onclick="checkIt()">Go</button>
Комментарии:
1. ах, я понимаю, но есть ли способ поместить все это в файл js, как оно есть в отдельном файле, вместо этого <кнопка onclick=»CheckIt()»>Перейти<кнопка onclick=»CheckIt()»></кнопка>
2. Я изменил
checkIt
функцию, чтобы удовлетворить ваши потребности, вы просто копируете ее содержимое в свою функцию «isUnitSelected», она должна работать.3. и он должен показывать всплывающее сообщение, если выбрано не радио
4. Вы проверили возвращаемое значение?
5. Я обновил сценарий, он должен соответствовать вашим потребностям.