Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.02.2020, 19:12
Кандидат Javascript-наук
Отправить личное сообщение для Katy93 Посмотреть профиль Найти все сообщения от Katy93
 
Регистрация: 28.12.2018
Сообщений: 138

Как сделать выбор из радиокнопок?
Создала форму сделала обработчик и при выборе городов ничего не происходит (так и должно быть), если нажать другой город то создастся поле, где предложат пользователю назвать свой город. Я сделала форму, и несколько дополнительных полей только вот при щелчке на форму и полям срабатывает обработчик onclick. Как сделать обработчик только, для radio кнопок?
Вот весь код:
<!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" xml:lang="ru" lang="ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script type="text/javascript">
       $(document).ready(function(e){
           
            document.mainForm.onclick = function(){
                  var radVal = document.mainForm.city.value;
                  var text = "";
                  if(radVal == "-1")
                  {
                      text = "Другой город";
                      alert(text);
                      document.getElementById("pole").innerHTML = '<input type="text" name="other_city">';
                  }
                  else
                  {
                     text = "Город из списка";
                     alert(text);
                     document.getElementById("pole").innerHTML = "";
                     
                  }
                  
              }     

       });
  </script>
</head>
<body>
<p>
<form id="mainForm" name="mainForm">

<input type="text" name="test" value=""><br>
                       <input type="radio" checked="checked" name="city" value="1">
                       <label>
                         Москва
                       </label>
                       <input type="radio" name="city" value="2">
                       <label>
                         Воронеж
                       </label>
                       <input type="radio" name="city" value="3">
                       <label>
                         Новгород
                       </label>
                     
                       <input type="radio" name="city" value="4">
                       <label>
                         Волгоград
                       </label>
                        <input type="radio" name="city" value="-1">
                            <label>
                                Другой
                            </label>
                   <div id="pole"></div>
            </p>
</form>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 16.02.2020, 19:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

Katy93,
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <script type="text/javascript">
  document.addEventListener( "DOMContentLoaded" , function() {
  const on = (parent, event, selector, fn) => parent.addEventListener(event, ({target}) => {
      if(target = target.closest(selector)) fn(target)
  })
  const fn = ({value}) => {
     const html = value == -1 ? '<input type="text" name="other_city">' : '';
     const text = value == -1 ? 'Другой город' : 'Город из списка';
     document.getElementById("pole").innerHTML = html;
     alert(text);
  };
  on(document.querySelector("#mainForm"), "click", '[name="city"]', fn);
   });
  </script>
</head>
<body>
  <form id="mainForm" name="mainForm">
    <input type="text" name="test" value=""><br>
    <label><input type="radio" checked="checked" class="city_check" name="city" id="city1" value="1"> Москва</label>
    <label><input type="radio" class="city_check" name="city" id="city2" value="2"> Воронеж</label>
    <label><input type="radio" class="city_check" name="city" id="city3" value="3"> Новгород</label>
    <label><input type="radio" class="city_check" name="city" id="city4" value="4"> Волгоград</label>
    <label><input type="radio" class="city_check" name="city" id="city_1" value="-1"> Другой</label>
    <div id="pole"></div>
  </form>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 16.02.2020, 19:54
Кандидат Javascript-наук
Отправить личное сообщение для Katy93 Посмотреть профиль Найти все сообщения от Katy93
 
Регистрация: 28.12.2018
Сообщений: 138

Мне нужно обязательно в
$(document).ready(function(e){
           

       });

Именно там я храню весь код. Но там почему-то он не работает.
Ответить с цитированием
  #4 (permalink)  
Старый 16.02.2020, 20:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

Katy93,
возьмите строки 10 и 19.
Ответить с цитированием
  #5 (permalink)  
Старый 16.02.2020, 20:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

Katy93,
это document.addEventListener( "DOMContentLoaded" , function() {
и это $(document).ready(function(e){
одно и тоже
Ответить с цитированием
  #6 (permalink)  
Старый 16.02.2020, 20:13
Кандидат Javascript-наук
Отправить личное сообщение для Katy93 Посмотреть профиль Найти все сообщения от Katy93
 
Регистрация: 28.12.2018
Сообщений: 138

Теперь всё нормально работает, спасибо. Я не знала, что это одно и тоже. Честно говоря я вообще про "DOMContentLoaded" до сегодняшнего дня не слышала.
Ответить с цитированием
  #7 (permalink)  
Старый 16.02.2020, 20:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

Сообщение от Katy93
DOMContentLoaded
https://learn.javascript.ru/onload-ondomcontentloaded
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать обработку динамически созданной формы через ajax? Wimko AJAX и COMET 4 08.10.2019 16:37
как сделать проверку на display: block; ufaclub jQuery 3 22.12.2013 19:21
Как сделать калькулятор и с чего начать? A.P. Yellowman Общие вопросы Javascript 3 15.11.2013 21:32
Вопрос как сделать эту панельку Определённых размеров и свойств. jei jQuery 3 09.06.2009 19:14
Как сделать, чтобы 2 ссылки отображались как hover при наведении мышкой на любую? Ava Элементы интерфейса 5 19.05.2009 23:24