Я надеялся получить некоторую помощь с сокрытием / показом 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, которые имеют одинаковые идентификаторы, может быть причиной проблемы.
3 ответа
Вероятно, ошибка заключается в объеме функций, поместите две функции (показать / скрыть) в 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/
Я закончил тем, что изменил способ, которым это скрыто, основываясь на всех ответах выше.
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>";
}
У вас есть конкурирующие onchange
свойства, определенные как для «да», так и для «нет». Когда вы нажимаете один, они оба изменяются, поэтому обе функции запускаются: showOptions()
и hideOptions()
. Конечный результат - ваш div остается скрытым.
Я предлагаю использовать onClick
вместо onChange
. Кроме того, если ваша страница использует HTML4, целые числа не допускаются в качестве идентификаторов, поэтому вы можете решить проблему, добавив префикс к своим идентификаторам:
echo "<div id=\"prefix" . $option_id . "\" ...";
И ваша функция JS становится:
function showOptions(id)
{
document.getElementById("prefix" + id).style.display="block";
}
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.