vevovip
@vevovip
Web developer

Как блокировать submit если не выбрана кнопка radio на javascript?

Мой код который работает, проблема в том что если ответить на первый вопрос, и дальше нажимать ответить не выбирая вариант он покажет 4 из 4, а как сделать либо чтобы нельзя было отвечать пока не будет выбран radio либо заблокировать submit или спрятать кнопку с помощью css? вообщем такая суть...

<!DOCTYPE html>
<html>
    <head>
        <title>Тест 1</title>
        <meta charset="windows-1251" />
		<style type="text/css">
		body {margin: 150px 0px 0px 0px; padding: 0px;}
a.knopka {
  color: #fff; /* цвет текста */
  text-decoration: none; /* убирать подчёркивание у ссылок */
  user-select: none; /* убирать выделение текста */
  background: #1E90FF; /* фон кнопки */
  padding: .7em 1.5em; /* отступ от текста */
  outline: none; /* убирать контур в Mozilla */
  z-index:1;
  position:relative;
  left:328px;
  bottom:45px;
  
} 
a.knopka:hover { background: rgb(232,95,76); } /* при наведении курсора мышки */
a.knopka:active { background: rgb(152,15,0); } /* при нажатии */
}



div.container{
position:absolute;
top:-90px;

}
.content{
position:relative;
margin:0px auto;
width:980px;
height:566px;
z-index:1;
top:-88px;

}


 div.questionBlock {
     display: none;
			 }
.questionBlock{
	width: 710px;
	height: 577px;
	position: absolute;
	top: 65%;
	left: 40%;
	margin-left: -250px;
	margin-top: -300px;

			}
			
div#imgtest1{
z-index:0;
position:absolute !important;
width:200px;
height:100px;
margin-left:460px !important;
margin-top:-190px !important;
}

input{
font-size: 22px;
color:#000000;
margin-top: 0.1em; /* Отступ сверху */
margin-bottom: 0.2em; /* Отступ снизу */
line-height:1;
text-align:left;
z-index:2;
}

label{
font-size:22px;
color:#000000;
margin-top: 0.1em; /* Отступ сверху */
margin-bottom: 0.2em; /* Отступ снизу */
line-height:1;
text-align:justify;
z-index:2;
}

.vopros{
font-size: 32px;
text-align:justify;
color:#000000;
}
.vopros22{
font-size: 32px;
text-align:justify;
color:#000000;

}

sq{
font-size:32pt;
color:#000000;
text-align:center;
position: absolute;
top: 45%;
left: 50%;
margin-left: -370px;
margin-top: -100px;
}

#w{
	position: relative;
	bottom: 100px;
	left: 385px;
	margin-left: -200px;
	margin-top: -189px;
	z-index:1;
	text-align:center;
  color: #000000; /* цвет текста */
  text-decoration: none; /* убирать подчёркивание у ссылок */
  user-select: none; /* убирать выделение текста */
  background: #FCC200; /* фон кнопки */
  padding: .7em 1.5em; /* отступ от текста */
  outline: none; /* убирать контур в Mozilla */
#w:hover { background: rgb(232,95,76); } /* при наведении курсора мышки */
#w:active { background: rgb(152,15,0); } /* при нажатии */
	}
	.knopp{
	text-align:center;
	}
		</style> 
		<script type = "text/javascript">
            var answer;
        </script>
    </head>
	

    <body text="#000000" style="background-color:#FFFFCE;background-image:url(../wpimages/oglaviepravgos.jpg);background-repeat:no-repeat;background-position:center center;background-attachment:scroll;height:655px;">
      
	   <div class="container">
            <div class="content">
                      <div class = "questionBlock">
           <p class="vopros">1.	Когда был принят Конституционный закон «О Государственных символах Республики Казахстан»? </p><br>
            <input type = "radio" name=q1 id="radio1"onclick="qa.nowRight = 1"><label for="radio1">4 июня 2007 года </label><br><br>
            <input type = "radio" name=q1 id="radio2"onclick="qa.nowRight = 0"><label for="radio2">7 июля 2008 года </label><br><br>
            <input type = "radio" name=q1 id="radio3"onclick="qa.nowRight = 0"><label for="radio3">6 мая 2009 года </label><br><br>
			
			
        </div>
        <div class = "questionBlock">
            <p class="vopros">2. Кто является автором флага Республики Казахстан? </p><br><br>
            <input type = "radio" name=q2 id="radio4"onclick="qa.nowRight = 0"><label for="radio4">Нурсултан Назарбаев</label><br><br>
            <input type = "radio" name=q2 id="radio5"onclick="qa.nowRight = 0"><label for="radio5">Шамшы Калдаяков </label><br><br>
            <input type = "radio" name=q2 id="radio6"onclick="qa.nowRight = 1"><label for="radio6">Шакен Ниязбеков </label><br><br>
			
         </div>
        <div class = "questionBlock">
            <p class="vopros">3. Вексиллология – это историческая дисциплина, которая занимается изучением: </p><br><br>
            <input type = "radio" name=q3 id="radio7"onclick="qa.nowRight = 0"><label for="radio7">гербов</label><br><br>
            <input type = "radio" name=q3 id="radio8"onclick="qa.nowRight = 1"><label for="radio8">флагов</label><br><br>
            <input type = "radio" name=q3 id="radio9"onclick="qa.nowRight = 0"><label for="radio9">гимнов</label><br><br>
			
			
        </div>
        <div class = "questionBlock">
            <p class="vopros">4. Какого цвета флаг Республики Казахстан?</p><br><br>
            <input type = "radio" name=q4 id="radio10"onclick="qa.nowRight = 0"><label for="radio10">Синий </label><br><br>
            <input type = "radio" name=q4 id="radio11"onclick="qa.nowRight = 1"><label for="radio11">Голубой </label><br><br>
            <input type = "radio" name=q4 id="radio12"onclick="qa.nowRight = 0"><label for="radio12">Бирюзовый</label><br><br>
			
        </div>
		
        
            </div>
        </div>
	


<div class="knopp">
	<a href="vibortestsimvol.html" class="knopka">ВЫЙТИ</a></a>
	   
	  <input type="button" id="w" value="Ответить"  onclick="qa.nextOrResult()"> 
      <div id="result"></div>
	  </div>
	   
	           <script type = "text/javascript" class="javastill">
            var qa = new QuestAnalizer();
			  function QuestAnalizer() {
                var now = 0, printed = false, rightCount = 0;
				var questionBlocks = document.querySelectorAll("div.questionBlock");
                var allQCount = questionBlocks.length;
                this.nowRight = 0;
                questionBlocks[now].style.display = "block";
				
				this.nextOrResult = function () {
				    if (now >= allQCount-1) {
                        now++;
                        if (!printed) {				         
						rightCount += this.nowRight;//проверка послед.вопроса
                            questionBlocks[now - 1].style.display = "none"
							
                            var sq = document.createElement("sq");
                            sq.innerHTML = "Верных ответов " + rightCount + " из " + (allQCount).toFixed(0);
                            document.getElementById('result').appendChild(sq);
                            printed = true;
							if (rightCount == 4){
							sq.innerHTML = ("Молодец!<br>Ты правильно ответил на все вопросы!<br>20 из 20!");
							}
                        } else {
                            alert("Ваш результат на экране.");
                        }
                    } else {
                        questionBlocks[now].style.display = "none";
                        now++;
                        rightCount += this.nowRight;
                        questionBlocks[now].style.display = "block";
                    }
					

				}
				
            }
			
          </script>
    </body>
</html>
  • Вопрос задан
  • 1424 просмотра
Пригласить эксперта
Ответы на вопрос 2
DeadCowsDontMoo
@DeadCowsDontMoo
web
Если я не ошибаюсь, то даже средствами html5 можно... Где-то вроде бы находил мимолетом... А джикверя 100% может =)
Ответ написан
Комментировать
AlexXYZ
@AlexXYZ
O Keep Clear O
Я бы посоветовал решить вопрос в принципе и познакомитья с ангуляром. Советую посидеть недельку со справочниками, потом он сам за вас будет кнопки блокировать/разблокировать. Вы только переменные в контексте будете выставлять и программированием зависимостей в интерфейсе больше заниматься не придётся. Для вашего случая будете писать в ангуляровском атрибуте выставление условия, когда кнопка enabled/disabled и вероятно вашего кода не потребуется.

P.S.
angular не панацея, но я на нём недавно программировал форму с зависимостью больше чем от 50 полей ввода. Он офигенно упростил мне жизнь.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
05 нояб. 2024, в 17:38
150000 руб./за проект
05 нояб. 2024, в 16:31
500 руб./за проект
05 нояб. 2024, в 16:24
5000 руб./за проект