0

我正在使用带有 xmlhttp 的 JavaScript 向我的表单添加另一个行项目。我试图弄清楚如果用户多次按下“添加行项”按钮，如何删除行项，以便表单不会尝试从不必要的行项中发布空值。

这是我添加订单项的 javascript 代码。

<script type="text/javascript">
var counter = 1;
     function addInput(div){
        xmlhttp=new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
          var newdiv = document.createElement(div);
          var splitResponse = xmlhttp.responseText.split( "[BRK]" );
          var firstDropdownContent = splitResponse[0];
          var secondDropdownContent = splitResponse[1];
          newdiv.innerHTML = "<table id='" + (++counter) +"'>
<tr><td><img style='background:#ffffff; float:left; ' src='../../images/spacer_icon.png'>Item " + (counter) + "</td>
<td>Quantity</td>
<td>Description</td>
<td>Amount</td>
<td><img style='background:#ffffff; float:left; ' src='../../images/spacer_icon.png'>Tax Rate</td></tr>
<tr><td width='190'><select name='item[]'><option value='' selected></option>" + (firstDropdownContent) + "</select></td>
<td width='90'><input name='quantity[]' type='text' size='5' /></td>
<td width='440'><input name='description[]' type='text' size='60' /></td>
<td width='120'><input name='amount[]' type='text' size='6' /></td>
<td><select name='taxid[]'><option value='' selected></option>" + (secondDropdownContent) + "</select></td>
<td><button onclick='removeItem('row" + counter + "')'>Remove</button></td></tr></table><br />";

           document.getElementById(div).appendChild(newdiv);
          }
}

xmlhttp.open("GET", "invoicedropdownquery.php", false);
xmlhttp.send();

}
</script>

这是删除该项目的javascript。

<script type="text/javascript">
function removeItem(itemId){
    document.getElementById('dynamicInput').removeChild(document.getElementById(itemId));
}
</script>

这是我的添加按钮

<input type="button" value="Add Line Item" onClick="addInput('dynamicInput');">

这是添加行的地方。

<div id="dynamicInput"></div>

当我单击“删除”按钮时，不仅项目不会被删除，整个表单也会发布。我在想也许不是一个按钮，有人可以告诉我如何创建一个可点击的链接而不是按钮。

4

0 回答 0