javascript - PHP-JavaScript 多按钮添加新文本字段

Question

所以自从我完成 PHP 以来已经有一段时间了，我正在尝试使用 javascript/php 表单。我的全部目标是当我单击左侧的项目时，它会在右侧添加一个新的文本字段。值被发送到右侧。

问题是，现在无论我点击哪个按钮，它都发送相同的值。

Screenshot

// Create Items
 $itemRow =  $itemRow."<div align=\"left\" id=\"$category[NAME]\" class=\"tabcontent\">";
 $query2 = "SELECT * FROM items where CATEGORY='$category[NAME]' order by ITEM_NAME ASC";
 $result2 = (mysqli_query($connect, $query2));                                            
 while ($item = mysqli_fetch_array($result2)) {

 $closeRow = $closeRow . "
     <button class=\"orderMenu\" id=\"$item[ID]\" value=\"$item[ID]\">$item[ID] - $item[ITEM_NAME]</button>";   

?>

<script>
document.onclick = function () { 

    //first div
    var newDivCol = document.createElement("div");
    newDivCol.setAttribute("class","col-md-4");
    //second div
    var newDivForm = document.createElement("div");
    newDivForm.setAttribute("class","form-group label-floating");
    newDivCol.appendChild(newDivForm);
    //label
    var newlabel = document.createElement("label");
    newlabel.setAttribute("class","control-label");
    newlabel.innerHTML = <?php echo $item[ID] ?>;
    newDivForm.appendChild(newlabel);
    //input
    var newInput = document.createElement("input");
    newInput.setAttribute("type","text");
    newInput.setAttribute("class","form-control");
    newInput.setAttribute("v-model","act");
    newDivForm.appendChild(newInput);
    var element = document.getElementById("addRowsHere");
    element.appendChild(newDivCol);

};

</script>   

<?php


 }

     $itemRow = $itemRow.$closeRow."</div>";
     $closeRow = "";

} // End Cat/Item Selection
print "</div>";
print $itemRow;

?>

</div>
<div class="divTableCell" style="width: 50%;">



<div class="row" id="addRowsHere">


</div>

Answer 1

看来您的问题与脚本的 php 部分无关。相反，您应该通过以某种方式定义函数来利用您的 document.onclick 函数的第一个参数(事件对象):

document.onclick=function(ev){ // ev is an object containing information about the click event
  var clickedDOMElement = ev.target;
  // .. build the new element based on data from clickedDOMElement
}

为了在页面上添加更多可点击元素，最好不要将点击事件处理程序绑定(bind)到整个文档，而是绑定(bind)到 div #categoryName。您会在下面找到一个小演示，其中包含由您的 PHP 创建的类似数据 - 我希望如此。在那里你可以看到，如何构建点击事件处理程序，以便它检测被点击的元素并对其采取行动:

var rowsTarget=document.getElementById('addRowsHere');
document.getElementById('categoryName').onclick=function(ev){
  var clicked = ev.target;
  let d=document.createElement("div");d.setAttribute("class","col-md-4");
  d.innerHTML='<div class="form-group label-floating">'
   +'<label class="control-label">'+clicked.textContent
   +'<input type="text" class="form-control" v-model="act" value="'
   +clicked.value+'"></label></div>';
  rowsTarget.appendChild(d);
}

.tabcontent {width: 50%}

<div align="left" id="categoryName" class="tabcontent">
  <button class="orderMenu" id="i1" value="1">1 - first item</button>
  <button class="orderMenu" id="i2" value="2">2 - second item</button>
  <button class="orderMenu" id="i3" value="3">3 - third item</button>
  <button class="orderMenu" id="i4" value="4">4 - fourth item</button>
  <button class="orderMenu" id="i5" value="5">5 - fifth item</button>
  <button class="orderMenu" id="i6" value="6">6 - sixth item</button>
  <button class="orderMenu" id="i7" value="7">7 - seventh item</button>
  <button class="orderMenu" id="i8" value="8">8 - eighth item</button>
  <button class="orderMenu" id="i9" value="9">9 - ninth item</button>
  <button class="orderMenu" id="i10" value="10">10 - tenth item</button>
</div>
<p>Rows will appear here:</p>
<div class="row" id="addRowsHere">