onclick没有在JavaScript中复制
我有一些问题需要通过JavaScript解决。
第一个问题是我复制动态菜单时没有复制我的JavaScript onclick方法。此图片可能会帮助您更好地了解我的问题：
第一个问题是我在上图中为原始表单编写的方法 - 第一个表行 - 具有一个工作函数，当勾选复选框时可以顺利执行 - 复制的动态菜单没有该函数在勾选时起作用。基本上，有两个具有不同值的复选框 - “是”和“否” - 当勾选“否”复选框时，“是”复选框变为禁用且不可点击 - 反之亦然 - 但是此选项对我来说不起作用我将表单复制为动态表单。
onclick选项不适用于任何复选框。由于某种原因，onclick方法在复制时似乎适用于“+”按钮。
这是JavaScript代码：
<body>
<form>
<div id="container1">
<table border="1" id="education" name="education[]" cellspacing="0" style="margin-top:12px width="900"">
<colgroup>
<col span="1">
</colgroup>
<tr>
<td valign="top"><label for="name" size="3"> <font size="3">Name of Institution</font></label></td>
<td valign="top"><label for="institution" size="3"><font size="3">Type of Institution </font></label></td>
<td valign="top"><label for="instaddress" size="3"> <font size="3">Address</font></label></td>
<td valign="top"><label><font size="3">From</font></label></td>
<td valign="top"><label><font size="3">To </font> </label></td>
<td valign="top"><label for="graduate" size="3"> Did You <br> Graduate?</label></td>
<td valign="top"><label for="averages" size="3"> Average <br>Grade</label></td>
</tr>
<tr>
<td valign="top"><input type="text" id="name" name="name[]" maxlength="30" size="20"></td>
<td valign="top"><select name="institution[]" id="institution">
<option <?php if(isset($_POST['institution'])) { echo $_POST['institution']; } ?>>Institution</option>
<?php
$sql1a = "SELECT * FROM institution ORDER BY institution asc";
$smt1a = $dbs->prepare($sql1a);
$smt1a -> execute();
while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
{
if($row1a['institution']==$_GET['id3'])
echo("<option selected value=$row1a[institution]>$row1a[institution]</option>");
else
echo("<option value=$row1a[institution]>$row1a[institution]</option>");
}
?>
</select></td>
<td valign="top"><input type="text" id="instaddress" name="instaddress[]" maxlength="50" size="40"></td>
<td valign="top">
<select name="monthto[]" id="monthto">
<option <?php if(isset($_POST['month'])) { echo $_POST['month']; } ?>>Select Month</option>
<?php
$sql1a = "SELECT * FROM month ORDER BY id asc";
$smt1a = $dbs->prepare($sql1a);
$smt1a -> execute();
while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
{
if($row1a['month']==$_GET['id4'])
echo("<option selected value=$row1a[month]>$row1a[month]</option>");
else
echo("<option value=$row1a[month]>$row1a[month]</option>");
}
?>
</select>
<select name="toyear[]" id="toyear">
<option <?php if(isset($_POST['year'])) { echo $_POST['year']; } ?>>Select Year</option>
<?php
$sql1a = "SELECT * FROM year ORDER BY id desc";
$smt1a = $dbs->prepare($sql1a);
$smt1a -> execute();
while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
{
if($row1a['year']==$_GET['id5'])
echo("<option selected value=$row1a[year]>$row1a[year]</option>");
else
echo("<option value=$row1a[year]>$row1a[year]</option>");
}
?>
</select>
</td>
<td valign="top">
<select name="monthto1[]" id="monthto1" onchange="showUser(this.value)">
<option <?php if(isset($_POST['month'])) { echo $_POST['month']; } ?>>Select Month</option>
<?php
$sql1a = "SELECT * FROM month ORDER BY id asc";
$smt1a = $dbs->prepare($sql1a);
$smt1a -> execute();
while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
{
if($row1a['month']==$_GET['id6'])
echo("<option selected value=$row1a[month]>$row1a[month]</option>");
else
echo("<option value=$row1a[month]>$row1a[month]</option>");
}
?>
</select>
<select name="toyear1[]" id="toyear1" onchange="showUser(this.value)">
<option <?php if(isset($_POST['year'])) { echo $_POST['year']; } ?>>Select Year</option>
<?php
$sql1a = "SELECT * FROM year ORDER BY id desc";
$smt1a = $dbs->prepare($sql1a);
$smt1a -> execute();
while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
{
if($row1a['year']==$_GET['id7'])
echo("<option selected value=$row1a[year]>$row1a[year]</option>");
else
echo("<option value=$row1a[year]>$row1a[year]</option>");
}
?>
</select>
</td>
<td valign="top">Yes<input type="checkbox" id="graduate" name="graduate[]" onclick="cleardata2()" value="yes"> No
<input type="checkbox" id="graduate1" name="graduate[]" onclick="cleardata3()" value="no"> </td>
<td valign="top"><input type="text" id="averages" name="averages[]" maxlength="100" size="3"></td>
<td valign="top"><a href="#" id="Add" name="Add" onclick="addFields1()">+</a>
<a href="#" type="hidden" id="Remove" name="Remove" onclick="rFields1(this)"></a>
</td>
</table>
</div>
</form>
</body>
这是JavaScript代码：
<script type="text/javascript">
function cleardata2()
{
if (document.getElementById('graduate').checked == true)
{
document.getElementById('graduate1').setAttribute('disabled','disabled');
}
else {
// document.getElementById("cleaning").onclick = null;
document.getElementById('graduate1').removeAttribute('disabled');
}
}
function cleardata3()
{
if (document.getElementById('graduate1').checked == true)
{
document.getElementById('graduate').setAttribute('disabled','disabled');
}
else {
// document.getElementById("cleaning").onclick = null;
document.getElementById('graduate').removeAttribute('disabled');
}
}
</script>
<script type="text/javascript">
function rFields1(elm){
var tr = elm.parentNode.parentNode;
tr.remove();
}
function addFields1(){
var container = document.getElementById("container1");
var table = document.createElement("table");
table.border=1;
table.cellspacing=0;
table.id ="education";
table.name = "education[]";
container.appendChild(document.createTextNode(""));
var tr = document.createElement("tr");
var td = document.createElement("td");
td.valign = "top";
var name = document.createElement("input");
name.type = "text";
name.id = "name";
name.name = "name[]";
name.size = 20;
name.maxlenth = 30;
container.appendChild(name);
td.appendChild(name);
tr.appendChild(td);
var td1 = document.createElement("td");
td1.valign = "top";
var slct = document.createElement("select"); //? how do I fix this up
slct.id = "institution";
slct.name = "institution[]";
//some php code that is generating js code
<?php
$sql1a = "SELECT * FROM institution ORDER BY institution asc";
$smt1a = $dbs->prepare($sql1a);
$smt1a -> execute();
while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
{
echo("var opt=document.createElement(\"option\");\r\n");
echo("opt.value='$row1a[institution]';\r\n");
echo("opt.text ='$row1a[institution]';\r\n");
echo("slct.appendChild(opt);");
}
?>
slct.value='<?php echo $_GET['id2']; ?>'; //container.add(option);
container.appendChild(slct);//? how do I fix this up
// select1.appendChild(option);
td1.appendChild(slct);
tr.appendChild(td1);
var td2 = document.createElement("td");
td2.valign = "top";
var input = document.createElement("input");
input.type = "text";
input.id = "instaddress";
input.name = "instaddress[]";
input.value = '<?php echo $_GET['id3']; ?>';
input.size = 40;
input.maxlenth = 50;
container.appendChild(input);
container.appendChild(input);//? how do I fix this up
// select1.appendChild(option);
td2.appendChild(input);
tr.appendChild(td2);
var td3 = document.createElement("td");
td3.valign = "top";
var slct1 = document.createElement("select"); //? how do I fix this up
slct1.id = "monthto";
slct1.name = "monthto[]";
//some php code that is generating js code
<?php
$sql1a = "SELECT * FROM month ORDER BY id asc";
$smt1a = $dbs->prepare($sql1a);
$smt1a -> execute();
while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
{
echo("var opt=document.createElement(\"option\");\r\n");
echo("opt.value='$row1a[month]';\r\n");
echo("opt.text ='$row1a[month]';\r\n");
echo("slct1.appendChild(opt);");
}
?>
slct1.value='<?php echo $_GET['id4']; ?>'; //container.add(option);
container.appendChild(slct1);//? how do I fix this up
td3.appendChild(slct1);
tr.appendChild(td3);
var td4 = document.createElement("td");
td4.valign = "top";
var slct2 = document.createElement("select"); //? how do I fix this up
slct2.id = "toyear";
slct2.name = "toyear[]";
//some php code that is generating js code
<?php
$sql1a = "SELECT * FROM year ORDER BY id desc";
$smt1a = $dbs->prepare($sql1a);
$smt1a -> execute();
while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
{
echo("var opt=document.createElement(\"option\");\r\n");
echo("opt.value='$row1a[year]';\r\n");
echo("opt.text ='$row1a[year]';\r\n");
echo("slct2.appendChild(opt);");
}
?>
slct2.value='<?php echo $_GET['id5']; ?>'; //container.add(option);
container.appendChild(slct2);//? how do I fix this up
td4.appendChild(slct2);
tr.appendChild(td4);
var td5 = document.createElement("td");
td5.valign = "top";
var slct3 = document.createElement("select"); //? how do I fix this up
slct3.id = "monthto1";
slct3.name = "monthto1[]";
//some php code that is generating js code
<?php
$sql1a = "SELECT * FROM month ORDER BY id asc";
$smt1a = $dbs->prepare($sql1a);
$smt1a -> execute();
while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
{
echo("var opt=document.createElement(\"option\");\r\n");
echo("opt.value='$row1a[month]';\r\n");
echo("opt.text ='$row1a[month]';\r\n");
echo("slct3.appendChild(opt);");
}
?>
slct3.value='<?php echo $_GET['id6']; ?>'; //container.add(option);
container.appendChild(slct3);//? how do I fix this up
td5.appendChild(slct3);
tr.appendChild(td5);
var td6 = document.createElement("td");
td6.valign = "top";
var slct4 = document.createElement("select"); //? how do I fix this up
slct4.id = "toyear1";
slct4.name = "toyear1[]";
//some php code that is generating js code
<?php
$sql1a = "SELECT * FROM year ORDER BY id desc";
$smt1a = $dbs->prepare($sql1a);
$smt1a -> execute();
while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
{
echo("var opt=document.createElement(\"option\");\r\n");
echo("opt.value='$row1a[year]';\r\n");
echo("opt.text ='$row1a[year]';\r\n");
echo("slct4.appendChild(opt);");
}
?>
slct4.value='<?php echo $_GET['id7']; ?>'; //container.add(option);
container.appendChild(slct4);//? how do I fix this up
td6.appendChild(slct4);
tr.appendChild(td6);
var td7 = document.createElement("td");
td7.valign = "top";
td7.appendChild(document.createTextNode(" Yes")); // checkbox buttons whether someone graduated or not
var grad = document.createElement("input");
grad.type = "checkbox";
grad.id = "graduate";
grad.name = "graduate[]";
grad.value = "yes"; //yes value for checkbox button
var grad1 = document.createElement("input");
grad1.type = "checkbox";
grad1.id = "graduate";
grad.name = "graduate[]";
grad.value = "no"; //no value for checkbox button
container.appendChild(grad);
td7.appendChild(grad);
td7.appendChild(document.createTextNode(" No "));
container.appendChild(grad1);
td7.appendChild(grad1);
tr.appendChild(td7);
var td8 = document.createElement("td");
td8.valign = "top";
var averages = document.createElement("input");
averages.type = "text";
averages.id = "averages";
averages.name = "averages[]";
averages.size = 3;
averages.maxlenth = 100;
container.appendChild(averages);
td8.appendChild(averages);
tr.appendChild(td8);
// var addInstitution = document.getElementById("Add");
// var removeInstitution = document.getElementById("Remove");
// container.removeChild(addInstitution);
var td12 = document.createElement("td");
td12.valign = "top";
var add1 = document.getElementById("Add");
//create and insert input/text
//create and insert button
add1 = document.createElement("a");
add1.id="Add"
add1.name="Add"
add1.href="#";
add1.text="+";
add1.onclick=function(){addFields1();};
td12.appendChild(add1);
tr.appendChild(td12);
var td13 = document.createElement("td");
td13.valign = "top";
var remove1 = document.getElementById("Remove");
remove1 = document.createElement("a");
remove1.id="Remove";
remove1.name="Remove";
remove1.href="#";
remove1.text="-";
remove1.onclick=function(){
rFields1(this);};
td13.appendChild(remove1);
tr.appendChild(td13);
container.appendChild(document.createElement("br"));
table.appendChild(tr);
container.appendChild(table);
}
</script>
另一个问题也是类似的。它也是同样的形式，而是一个不同的任务。
正如您所看到的，原始表单（不是动态创建的复制表单）有一个下拉列表 - 但下拉列表以标题“Institution”开头 - 另一方面 - 动态创建/复制表单不允许我为从服务器检索到的下拉列表有一个正确的标题。
我使用的代码 - 在动态复制的表单中可以看到检索和显示数据的代码如下（基于PHP，但在JavaScript代码片段中）：
var slct = document.createElement("select"); //? how do I fix this up
slct.id = "institution";
slct.name = "institution[]";
//some php code that is generating js code
<?php
$sql1a = "SELECT * FROM institution ORDER BY institution asc";
$smt1a = $dbs->prepare($sql1a);
$smt1a -> execute();
while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
{
echo("var opt=document.createElement(\"option\");\r\n");
echo("opt.value='$row1a[institution]';\r\n");
echo("opt.text ='$row1a[institution]';\r\n");
echo("slct.appendChild(opt);");
}
?>
slct.value='<?php echo $_GET['id2']; ?>'; //container.add(option);
container.appendChild(slct);//? how do I fix this up
// select1.appendChild(option);
td1.appendChild(slct);
tr.appendChild(td1);
我尝试了太多方法解决这个问题，但我无法在下拉列表中找到顶部标题来说“机构”或任何其他标签/标题，而不是直接打印从中检索到的第一类机构在用户点击指向下方的箭头以检索他/她在表单中提交数据的选项之前，数据库（在本例中为“大学”）。
我应该用PHP编写什么来解决下拉菜单中的主标题问题？
2 个答案:
答案 0 :(得分：1)
您为所有复选框提供了相同的ID。这不会起作用，因为ID必须是唯一的。 getElementById('graduate')只返回第一个复选框，而不是与您点击的同一行中的复选框。您需要重写cleardata2和cleardata3，以便将当前复选框作为参数，并找到其他类型的相应复选框：
function cleardata2(self) {
var other_cb = self.nextSibling.nextSibling; // Skip over "yes" text node to next checkbox
disable_other(self, other_cb);
}
function cleardata3(self) {
var other_cb = self.previousSibling.previousSibling; // Skip over "no" text node to previous checkbox
disable_other(self, other_cb);
}
function disable_other(self, other) {
if (self.checked) {
other.setAttribute("disabled", "disabled");
} else {
other.removeAttribute("disabled");
}
}
将您的HTML更改为：
<td valign="top">Yes<input type="checkbox" id="graduate" name="graduate[]" onclick="cleardata2(this)" value="yes"> No
将创建新复选框的代码更改为：
var grad = document.createElement("input");
grad.type = "checkbox";
grad.name = "graduate[]";
grad.value = "yes"; //yes value for checkbox button
grad.addEventListener("click", function() { cleardata2(this); });
var grad1 = document.createElement("input");
grad1.type = "checkbox";
grad1.name = "graduate[]";
grad1.value = "no"; //no value for checkbox button
grad1.addEventListener("click", function() { cleardata3(this); });
答案 1 :(得分：0)
好吧最后我想我发现了你的错误，你在创建一个动态的毕业生输入类型时有一个错字。
var grad = document.createElement("input");
grad.type = "checkbox";
grad.id = "graduate";
grad.name = "graduate[]";
grad.value = "yes"; //yes value for checkbox button
var grad1 = document.createElement("input");
grad1.type = "checkbox";
grad1.id = "graduate1"; //in your code you have graduate
grad1.name = "graduate[]";
grad1.value = "no"; //no value for checkbox button
如果仍然无效，请尝试将onclick属性添加到动态JS：
var grad = document.createElement("input");
grad.type = "checkbox";
grad.id = "graduate";
grad.name = "graduate[]";
grad.value = "yes"; //yes value for checkbox button
grad.onclick = cleardata3;
var grad1 = document.createElement("input");
grad1.type = "checkbox";
grad1.id = "graduate1"; //in your code you have graduate
grad1.name = "graduate[]";
grad1.value = "no"; //no value for checkbox button
grad1.onclick = cleardata3;
对于问题的第二部分，请尝试：
<?php
$sql1a = "SELECT * FROM institution ORDER BY institution asc";
$smt1a = $dbs->prepare($sql1a);
$smt1a -> execute();
while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
{
echo("var opt=document.createElement(\"option\");\r\n");
echo("opt.value='$row1a[institution]';\r\n");
echo("opt.text ='$row1a[institution]';\r\n");
if($row1a['institution']==$_GET['id3']){
echo("opt.setAttribute(\"selected\", true);\r\n");
}
echo("slct.appendChild(opt);");
}
?>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？