Автоматическое отображение div в зависимости от состояния переключателя с JavaScript - PullRequest
Новая
       9

Автоматическое отображение div в зависимости от состояния переключателя с JavaScript

1 голос
/ 05 августа 2009

У меня есть форма, которая отправляет данные на ту же страницу. Основываясь на выборе переключателя пользователя, я вставляю checked = "checked" в элемент формы переключателя, чтобы снова отобразить правильный выбор. Это работает нормально, однако, когда форма отображается повторно (в случае неправильного ввода и т. Д.), Мне нужно раскрыть div (содержащий соответствующие поля формы).

У меня есть событие onclick, которое в первую очередь раскрывает div (до того, как пользователь опубликовал форму), и это работает нормально, но когда я перезапускаю форму, я не хочу, чтобы пользователь вручную отображал снова нажмите кнопку.

Поэтому я пробовал что-то в следующем духе (сильно урезано для целей этого поста) ... 

<link href="styles/style1.css" rel="stylesheet" type="text/css" />
 <script language="JavaScript"> 
  if (document.getElementById('complete_yes').checked) {
   document.getElementById('repair_complete').style.display = 'block';
   } else {
     document.getElementById('repair_complete').style.display = 'none';
  }
 </script>
 <form action="javascript_test.php" method="POST">
  <input id="complete_yes" type="radio" name="complete" checked="checked" value="true"/>Yes
  <input id="complete_no" type="radio" name="complete" value="false"/>No
  <input type="submit" value="Save">
   <div id="repair_complete">
    I'm a div!
   </div>

... но он возвращает Требуемый объект Ошибка JavaScript (как это происходит на «реальной» странице):

Сообщение: требуется объект
Линия: 3
Char: 1
Код: 0
URI: http://localhost/repair_system/javascript_test.php

Почему это? Я не правильно ссылаюсь на элемент формы? Извиняюсь, если я "div" (намеренно плохой каламбур!), Мне еще предстоит узнать о веселье и играх javascript!

Ответы [ 6 ]

1 голос
/ 06 августа 2009

Поскольку ваш javascript не обернут внутри функции, браузер выполняет его, как только он "добирается до него". В этом случае JS выполняется до того, как браузер достиг html, объявляющего вашу форму.

Поэтому самое простое решение - переместить Javascript после вашей формы. Более надежным решением было бы заключить ваш код в функцию, и он каким-то образом сработал - из того, что вы пытаетесь сделать, в этом случае это будет событие onLoad тега body: 

<head>
<script language="JavaScript"> 
  function showHelpDiv() {  
    if (document.getElementById('complete_yes').checked) {
     document.getElementById('repair_complete').style.display = 'block';
    } else {
     document.getElementById('repair_complete').style.display = 'none';
    }
  }
</script>
</head>
<body onload="showHelpDiv()">
 <form action="javascript_test.php" method="POST">
  <input id="complete_yes" type="radio" name="complete" checked="checked" value="true"/>Yes
  <input id="complete_no" type="radio" name="complete" value="false"/>No
  <input type="submit" value="Save">
   <div id="repair_complete">
    I'm a div!
   </div>
1 голос
/ 06 августа 2009

Ваш код выполняется во время загрузки документа, а дерево DOM еще не готово. Поэтому он пытается получить доступ к элементу, который еще не существует.

Вы, вероятно, хотите вместо этого написать обработчик событий, который переключает div при каждой установке флажка.

Я предпочитаю jQuery , который абстрагирует такие вещи, как кросс-браузерная обработка событий, предоставляет множество полезных помощников и, как правило, делает код более чистым (при правильной записи). Примерно так должно работать: 

$(document).ready(function() {
    $('#repair_complete').toggle($('#complete_yes').is(':checked'));
}

Выше можно примерно перевести как:

  • Когда документ загружается, выполните следующее:
  • Добавить обработчик события 'change' к любому элементу типа 'input' с именем 'complete'
  • Когда срабатывает обработчик события, переключите видимость элемента с идентификатором 'repair_complete', где он должен быть видим, если отмечен элемент с идентификатором 'complete_yes'

Обновление: JS выше теперь на самом деле делает то, что вы хотите, изначально у меня это было написано как onclick

0 голосов
/ 06 августа 2009

Похоже, проблема в вашем коде инициализации. Javascript вызывается до завершения рендеринга страницы. Это один раздражающий аспект события «onload», который, на мой взгляд, просто не работает так, как должно быть в каждом браузере.

Существует кросс-браузерная техника для вызова кода инициализации один и только один раз после полной загрузки DOM.

Попробуйте этот код в заголовке вашего HTML: 

function showHelpDiv() {  
  if (document.getElementById('complete_yes').checked) {
   document.getElementById('repair_complete').style.display = 'block';
  } else {
   document.getElementById('repair_complete').style.display = 'none';
  }
}

function InitOnce()
{
    if (arguments.callee.done) return;
    arguments.callee.done = true;

    showHelpDiv();
}

/* for Mozilla */
if (document.addEventListener)
{
    document.addEventListener("DOMContentLoaded", InitOnce, null);
}

/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
        document.write("<script defer src=ie_onload.js><"+"/script>");
/*@end @*/

/* for other browsers */
window.onload = InitOnce;

А затем вам нужно создать файл ie_onload.js , содержащий эту строку для совместимости с IE: 

InitOnce();

Я пробовал другие методы, но ни одна из них не работает так же идеально, как эта. Я считаю, что изначально нашел это решение здесь: http://dean.edwards.name/weblog/2005/09/busted/

Я использую его в онлайн-приложении, которое получает 500 уникальных посещений в день или около того, и это было для нас надежно.

0 голосов
/ 06 августа 2009

Вы должны настроить переключатель, чтобы изменить видимость элемента div (то есть «подтолкнуть» статус к нему), а не «вытягивать» статус div через статус переключателя во время рендеринга. (который, как сказал Андрейс, будет сброшен).

0 голосов
/ 06 августа 2009

Мне кажется, что ваш скрипт запускается до того, как форма нарисована, вы можете захотеть переместить свой блок скрипта после элемента формы. По сути, я думаю, что document.getElementById ('complete_yes'). Checked проверяет null.checked, что приведет к ошибке требуемого объекта.

0 голосов
/ 05 августа 2009

Это потому, что Javascript выполняется непосредственно перед созданием остальных объектов.
Поместите свой код JavaScript в тело функции и добавьте эту функцию в событие onclick для всего, что вам нужно. 

<link href="styles/style1.css" rel="stylesheet" type="text/css" />
<script language="JavaScript"> 
function test() {
  if (document.getElementById('complete_yes').checked) {
   document.getElementById('repair_complete').style.display = 'block';
   } else {
     document.getElementById('repair_complete').style.display = 'none';
  }
}
</script>
<form action="javascript_test.php" method="POST">
<input id="complete_yes" type="radio" name="complete" checked="checked" value="true" onClick="javascript: test();"/>Yes
<input id="complete_no" type="radio" name="complete" value="false" onClick="javascript: test();"/>No
<input type="submit" value="Save">
 <div id="repair_complete">
  I'm a div!
 </div>
</form>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...