Попытка отобразить div по щелчку переключателя

Question

Я надеялся получить некоторую помощь с сокрытием / показом div, когда нажата радиокнопка.

JS у меня есть

function showOptions(id)
{
  document.getElementById(id).style.display="block"; 
}

У меня есть PHP-скрипт, который создает форму с 7-10 вопросов да / нет. Когда я выбираю «нет», я хочу, чтобы div показывался с дополнительными опциями (флажки)

<li>Lorem Ispum?    <br>    
  <input type="radio" name="3" value="yes" onchange="hideOptions(100003)">Yes          
  <input type="radio" name="3" value="no" onchange="showOptions(100003)">No
  <div id="100003" style="border-color: blue; border-style: solid; margin: 2px; display:none">
    <input type="checkbox" name="10004">Bacon ipsum dolor amet filet mignon turkey pork chop rump swine, shank tail beef ribs capicola salami ball tip drumstick pastrami ribeye. Andouille tail bacon ball tip brisket
  </div>
</li>

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

Вот часть PHP, которая создает это:

if($row['question_form_type']=='boolean') {
  echo "<br><input type = 'radio' name = ".$row['question_id']." value = 'yes' onChange = 'hideOptions($option_id)'>Yes ";
  $option_id =$row['question_id']+100000;
  echo "<input type = 'radio'  name  = ".$row['question_id']." value = 'no' onChange = 'showOptions($option_id)'>No
        <div id = $option_id style = 'border-color: blue; border-style: solid; margin: 2px; display:dnone'>";
  $optionSQL = "select option_id, option_suggestion from sandbox_feedback_options where question_id = ".$row['question_id']." and option_type like  '%".$type_array[$x]."%'";
  $oresult = $conn->query($optionSQL);
  if ($oresult->num_rows > 0) {
    while($orow = $oresult->fetch_assoc()) {
      $od = $orow['option_id']+10000;
      echo "<input type = 'checkbox' name = $od>".$orow['option_suggestion']."</input><p>";
  }
  echo "</div>";
}

Спасибо за любую помощь, которую вы можете предоставить.

-IJC

Вот полный скрипт PHP:

  <!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="text/javascript">
      function showDiv(id)

      {

                html = document.getElementById(id).innerHTML;
      document.getElementById('question').innerHTML = html;
                 }

    function showOptions(o_id) {
        document.getElementById(o_id).style.display = "block";
   alert (o_id);
         }

</script>

    </script>

    </head>
    <body>
<form action = 'email_feedback.php'>
<?php
include ("../config/dbConnector.php");
include ("../config/curlWrap.php");
echo '<label>Ticket Id</label>
<input type = "text" name = "ticket_id">
<label>Reviewer</label>
<input type = "text" name = "reviewer">';
$getQSQL = "select distinct question_type from sandbox_feedback where     question_type not like '%All%'";
$type_array = array();
echo "<select onChange = 'showDiv(value)' required>
  <option>Select Question Type</option>";
  $result = $conn->query($getQSQL);
 if ($result->num_rows > 0) {
      while($row = $result->fetch_assoc()) {
      echo "<option>".$row['question_type']."</option>";
      $type_array[] = $row['question_type'];
      }}

echo "</select>";
for($x = 0;$x<sizeof($type_array);$x++)
{
echo "<div id = '".$type_array[$x]."' style = 'display:none'><ol>";
$questionSQL = "select question_id, question, question_form_type from sandbox_feedback where question_type in ('".$type_array[$x]."', 'All')";
 $result = $conn->query($questionSQL);

 if ($result->num_rows > 0) {

 while($row = $result->fetch_assoc()) {
 echo "<li>".$row['question'];

 if($row['question_form_type']=='boolean')
   {
      echo "<br><input type = 'radio' name = ".$row['question_id']." value = 'yes' >Yes ";

      $option_id = $type_array[$x]."_";
      $option_id .=$row['question_id']+100000;

      echo "<input type = 'radio'  name  = ".$row['question_id']." value = 'no' onClick = 'showOptions($option_id)'>No
       <div id =$option_id style = 'border-color: blue; border-style: solid; margin: 2px; display:none'>";
      $optionSQL = "select option_id, option_suggestion from sandbox_feedback_options where question_id = ".$row['question_id']." and option_type like  '%".$type_array[$x]."%'";
      $oresult = $conn->query($optionSQL);
         if ($oresult->num_rows > 0) {
      while($orow = $oresult->fetch_assoc()) {
             $od = $orow['option_id']+10000;
          echo "<input type = 'checkbox' name =     $od>".$orow['option_suggestion']."</input><p>";

}
echo "</div>";}


    }
 echo "</li>";
 }}
echo "</ol></div>";
}


 echo "<div id = 'question'></div>";

 ?>
<input type = "submit" value = "Submit">

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

javascript php

1

itsjustcarlos 17 Дек 2015 в 22:48

Answer 1

Вероятно, ошибка заключается в объеме функций, поместите две функции (показать / скрыть) в HEAD без кода переноса для «загрузки» документа.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

    <script type="text/javascript">
        function showOptions(id) {
            document.getElementById(id).style.display = "block";
        }
        function hideOptions(id) {
            document.getElementById(id).style.display = "none";
        }
    </script>

</head>
<body>
    <li>
        Lorem Ispum?    <br>
        <input type="radio" name="3" value="yes" onchange="hideOptions('100003');">Yes
        <input type="radio" name="3" value="no" onchange="showOptions('100003');">No

        <div id="100003" style="border-color: blue; border-style: solid; margin: 2px; display:none">
            <input type="checkbox" name="10004">Bacon ipsum dolor amet filet mignon turkey pork chop rump swine, shank tail beef ribs capicola salami ball tip drumstick pastrami ribeye. Andouille tail bacon ball tip brisket
        </div>
    </li>
</body>
</html>

Вот рабочий пример: https://jsfiddle.net/hbmsxy7a/

0

Baro 17 Дек 2015 в 20:07

Answer 2

Я закончил тем, что изменил способ, которым это скрыто, основываясь на всех ответах выше.

If ($ result-> num_rows> 0) {

while($row = $result->fetch_assoc()) {
echo "<li>".$row['question'];

if($row['question_form_type']=='boolean')
   {
       $option_id = $type_array[$x];
      $option_id .=$row['question_id']+100000;
      echo "<br><select onChange = 'showOptions(value)' required>><Option value = 'yes_$option_id' >Yes</option> ";



      echo "<option value = $option_id>No</option></select>
      <div id ='$option_id' style = 'border-color: #ccc; border-style: solid; margin: 2px; display:none'>";
      $optionSQL = "select option_id, option_suggestion from sandbox_feedback_options where question_id = ".$row['question_id']." and option_type like  '%".$type_array[$x]."%'";
      $oresult = $conn->query($optionSQL);
         if ($oresult->num_rows > 0) {
      while($orow = $oresult->fetch_assoc()) {
             $od = $orow['option_id']+10000;
          echo "<input type = 'checkbox' name = $od>".$orow['option_suggestion']."</input><p>";

       }
 echo "</div>";}


    }
echo "</li>";
}}
echo "</ol></div>";

}

0

itsjustcarlos 18 Дек 2015 в 01:19

Answer 3

У вас есть конкурирующие onchange свойства, определенные как для «да», так и для «нет». Когда вы нажимаете один, они оба изменяются, поэтому обе функции запускаются: showOptions() и hideOptions(). Конечный результат - ваш div остается скрытым.

Я предлагаю использовать onClick вместо onChange. Кроме того, если ваша страница использует HTML4, целые числа не допускаются в качестве идентификаторов, поэтому вы можете решить проблему, добавив префикс к своим идентификаторам:

echo "<div id=\"prefix" . $option_id . "\" ...";

И ваша функция JS становится:

function showOptions(id)
{
    document.getElementById("prefix" + id).style.display="block"; 
}

0

mopo922 17 Дек 2015 в 20:17

Попытка отобразить div по щелчку переключателя

3 ответа

Похожие вопросы

Новые вопросы

javascript