1. 首頁
  2. 問答
  3. onclick不能在JavaScript中複製

onclick不能在JavaScript中複製

2015-02-09 30 views
0

我有幾個問題需要用JavaScript解決。onclick不能在JavaScript中複製

第一個問題是我的JavaScript onclick方法在複製動態菜單時未被複制。該圖像可能會低於幫助您更好地理解我的問題：

enter image description here

的第一個問題是，我已經對上述圖像中的原始形式編寫的方法 - 第一個錶行 - 有一個工作功能在勾選複選框時可以順利執行 - 複製的動態菜單在打勾時沒有該功能。基本上，有兩個複選框具有不同的值 - 「是」和「否」 - 當勾選「否」複選框時，「是」複選框被禁用且不可點擊 - 反之亦然 - 但是，此選項對我無效我將表單複製爲動態表單。

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編寫什麼來解決下拉菜單中的主要問題？

來源

2015-02-09 Ben Stein

+0

爲什麼你使用複選框而不是單選按鈕是/否？ – Barmar 2015-02-09 22:42:03

+0

你永遠不會添加'grad.onclick'或'grad1.onclick'。當你點擊它們時，你爲什麼期望運行任何東西？ – Barmar 2015-02-09 22:44:01

+0

複選框對我來說更容易 - 而且我使用的是數組，因此它在使用單選按鈕時使其複雜化......我應該在哪裏插入grad.onclick和grad1.onclick行？ – 2015-02-09 22:53:01

回答

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);"); 
    } 
?>

來源

2015-02-09 23:20:14

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); });

來源

2015-02-09 23:20:27 Barmar

+0

我正在嘗試這一個...希望這個作品... – 2015-02-09 23:21:54

+0

yippy ...它的作品！你能幫我解決問題的第二部分嗎？磨坊！ – 2015-02-09 23:26:31

相關問題

 相關問題