我正在尝试创建一个webapp,根据提供的参数找到所选形状的区域。
所以我被困了一半。
单击单选按钮时,参数文本框应加载值div。我尝试使用jquery来实现此功能,但是当选中单选按钮时,文本框不会加载到div中。
请帮忙。我无法找到我错的地方。
JQuery的
$(document).ready(function(){
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="circle")
{
$('.values').innerHTML="<table class='table table-default'><tbody><tr><td>
<label for='circlerad'>Radius:</label></td><td><input type='text'
class='form-control' name='circlerad' maxlength='10'></td></tr></tbody>
</table>";
}
if($(this).attr("value")=="square")
{
$('.values').innerHTML="<table class='table table-default'><tbody><tr><td>
<label for='sqside'>Side-length</label></td><td><input type='text'
class='form-control' name='sqside' maxlength='10'></td></tr></tbody>
</table>";
}
if($(this).attr("value")=="rectangle")
{
$('.values').innerHTML="<table class='table table-default'><tbody><tr><td>
<label for='reclen'>Length:</label></td><td><input type='text'
class='form-control' name='reclen' maxlength='10'></td></tr>
<tr><td>
<label for='recbr'>Breadth:</label></td><td><input type='text'
class='form-control' name='recbr' maxlength='10'></td></tr>
</tbody>
</table>";
}
});
});
HTML / PHP的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Area Finder</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<?php
echo("<center><h1>Area Finder!</h1></center><div class='conatiner'><div class='row'><form role='form' action='./arearesult.php' method='POST'><div class='form-group'><div class='panel panel-primary col-xs-3'><div class='panel-heading'>Select a shape</div><div class=' panel-body'>");
echo("<table class='table table-default'><tbody>");
echo("<tr><td>Circle</td><td><input type='radio' name=shape value='circle'></td></tr>
<tr><td>Square</td><td><input type='radio' name=shape value='square'></td></tr>
<tr><td>Rectangle</td><td><input type='radio' name=shape value='rectangle'></td></tr></tbody></table></div></div></div>");
echo("<div class='col-xs-1'></div><div class='panel panel-primary col-xs-5'><div class='panel-heading'>Enter values</div>");
echo("<div class='values panel-body'><table class='table table-default'><tbody>");
echo("</form></div></div>");
?>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src='js/parameters.js'></script>
</body>
</html>
答案 0 :(得分:1)
问题出在$('.values').innerHTML
分配上。
应该是这样的。
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if ($(this).attr("value") == "circle") {
$('.values').html("<table class='table table-default'><tbody><tr><td>" +
"<label for='circlerad'>Radius:</label></td><td><input type='text' " +
"class='form-control' name='circlerad' maxlength='10'></td></tr></tbody>" +
"</table>");
}
if ($(this).attr("value") == "square") {
$('.values').html("<table class='table table-default'><tbody><tr><td>" +
"<label for='sqside'>Side-length</label></td><td><input type='text'" +
"class='form-control' name='sqside' maxlength='10'></td></tr></tbody>" +
"</table>");
}
if ($(this).attr("value") == "rectangle") {
$('.values').html("<table class='table table-default'><tbody><tr><td>" +
"<label for='reclen'>Length:</label></td><td><input type='text'" +
"class='form-control' name='reclen' maxlength='10'></td></tr>" +
"<tr><td>" +
"<label for='recbr'>Breadth:</label></td><td><input type='text'" +
"class='form-control' name='recbr' maxlength='10'></td></tr>" +
"</tbody>" +
"</table>");
}
});
});
更新:已更改为$('.values').html()
,请参阅工作人员https://jsfiddle.net/u0hd5Lmq/
答案 1 :(得分:0)
您将代码更改为此格式可以使用
$('.values').html("<table class='table table-default'><tbody><tr><td>
<label for='circlerad'>Radius:</label></td><td><input type='text'
class='form-control' name='circlerad' maxlength='10'></td></tr></tbody>
</table>");