如果动态文本框为空，如何禁用按钮答案

【问题标题】：How to disable button if dynamic textbox are empty如果动态文本框为空，如何禁用按钮
【发布时间】：2019-04-24 07:40:00
【问题描述】：

我已禁用我的提交按钮以避免在文本框未填充时提交。我有多个动态文本框，该函数可以正常工作。但是在添加另一行文本框时，提交按钮已经启用。当用户决定添加另一行时，如何仍然禁用文本框？每当填充所有文本框时，在添加另一行之后和之前，我都需要启用提交按钮。

<html> 
<head> 
<script> 
function addRow(){
	var table = document.getElementById("bod");
	var rowCount = table.rows.length;
	var row = table.insertRow(rowCount);

	row.insertCell(0).innerHTML = '<input type="text" name="purpose_dy[]" id="purpose" size="20" onkeyup="success()"/>';
	row.insertCell(1).innerHTML = '<input type="text" name="wafernum_dy[]" id="wafernum" size="20" onkeyup="success()"/>';
	row.insertCell(2).innerHTML = '<input type="text" name="cell_dy[]" id="cell" size="20" onkeyup="success()"/>';
	row.insertCell(3).innerHTML = '<input type="text" name="qty_dy[]" id="qty" size="20" onkeyup="success()"/>';	
	row.insertCell(4).innerHTML = '<input type="text" name="remarks_dy[]" id="remarks" size="20" onkeyup="success()"/>';
	row.insertCell(5).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
}	

function success() {
	 if(document.getElementById("uname").value==="" || document.getElementById("age").value==="" || document.getElementById("purpose").value==="" || document.getElementById("wafernum").value==="" || document.getElementById("cell").value==="" || document.getElementById("qty").value==="" || document.getElementById("remarks").value==="") { 
            document.getElementById('submit_form').disabled = true; 
			
        } else { 
            document.getElementById('submit_form').disabled = false;
			document.getElementById('submit_form').style.backgroundColor="yellow";
        }
    }
</script> 

<style> 

</style></head> 

<body> 
Name: <input type="text" id="uname" />
Age: <input type="text" id="age" />
<input type= "button" id= "add" value="Add" onclick= "Javascript:addRow();" >
<table id= "bod">
    <tr>
		<th>PURPOSE</th>
		<th>WAFERNUM</th>
		<th>CELL</th>
		<th>QTY</th>
		<th>REMARKS</th>
    </tr>
</table>
<input type = "submit" name = "submit" id= "submit_form" value = "Submit" onclick="SaveData()" disabled>
</body> 
</html>

【问题讨论】：

标签： javascript jquery html button textbox

【解决方案1】：

好的，我修复了您的错误，您在启用按钮和禁用时遇到了一些问题，总是更好地迭代并检查循环，而不是检查每个元素是否为空，检查下面的答案和小提琴.让我知道它是否有效。编辑后的脚本部分如下，用你的替换它应该可以工作。

      <script>
function addRow() {
  var table = document.getElementById("bod");
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);

  row.insertCell(0).innerHTML = '<input type="text" name="purpose_dy[]" class = "uname" id="purpose" size="20" onkeyup="success()"/>';
  row.insertCell(1).innerHTML = '<input type="text" name="wafernum_dy[]" class = "wafernum" id="wafernum" size="20" onkeyup="success()"/>';
  row.insertCell(2).innerHTML = '<input type="text" name="cell_dy[]" class = "cell" id="cell" size="20" onkeyup="success()"/>';
  row.insertCell(3).innerHTML = '<input type="text" name="qty_dy[]" class = "qty" id="qty" size="20" onkeyup="success()"/>';
  row.insertCell(4).innerHTML = '<input type="text" name="remarks_dy[]" class = "remarks" id="remarks" size="20" onkeyup="success()"/>';
  row.insertCell(5).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
}

function success() {
// get all the elements present in form
var unameArray = document.getElementsByClassName("uname");
var ageArray = document.getElementsByClassName("age");
var cellArray = document.getElementsByClassName("cell");
var qtyArray = document.getElementsByClassName("qty");
var wafernumArray = document.getElementsByClassName("wafernum");
 var purposeArray = document.getElementsByClassName("purpose");
var remarksArray = document.getElementsByClassName("remarks");
// Check for number of tr
var rowCount = document.getElementById("bod").rows.length;
var bt = document.getElementById('submit_form');
var ele = document.getElementsByTagName('input'); 
for(var i=0;i<ele.length;i++) {


   if (ele[i].type == 'text' && ele[i].value == '') {
            bt.disabled = true;    // Disable the button.
            return false;
        }
        else {
            bt.disabled = false;   // Enable the button.
        }
}

}

</script>

【讨论】：

我删除了颜色变化，只需添加它
我们为此投入了时间和精力，您至少可以让我们知道它是否有效以及它是否接受了答案。
工作！非常感谢
在 row.insertCell(0).innerHTML 中，类名真的是“uname”吗？有点混乱

【解决方案2】：

稍微修改一下你的条件。现在它可以正常工作了

<html>

<head>
  <script>
    function addRow() {
      var table = document.getElementById("bod");
      var rowCount = table.rows.length;
      var row = table.insertRow(rowCount);

      row.insertCell(0).innerHTML = '<input type="text" name="purpose_dy[]" class = "uname" id="purpose" size="20" onkeyup="success()"/>';
      row.insertCell(1).innerHTML = '<input type="text" name="wafernum_dy[]" class = "wafernum" id="wafernum" size="20" onkeyup="success()"/>';
      row.insertCell(2).innerHTML = '<input type="text" name="cell_dy[]" class = "cell" id="cell" size="20" onkeyup="success()"/>';
      row.insertCell(3).innerHTML = '<input type="text" name="qty_dy[]" class = "qty" id="qty" size="20" onkeyup="success()"/>';
      row.insertCell(4).innerHTML = '<input type="text" name="remarks_dy[]" class = "remarks" id="remarks" size="20" onkeyup="success()"/>';
      row.insertCell(5).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
    }

    function success() {
    // get all the elements present in form
    var unameArray = document.getElementsByClassName("uname");
    var ageArray = document.getElementsByClassName("age");
    var cellArray = document.getElementsByClassName("cell");
    var qtyArray = document.getElementsByClassName("qty");
    var wafernumArray = document.getElementsByClassName("wafernum");
     var purposeArray = document.getElementsByClassName("purpose");
    var remarksArray = document.getElementsByClassName("remarks");
    // Check for number of tr
    var rowCount = document.getElementById("bod").rows.length;
    for(var i=0;i<rowCount;i++) {
       var uname = unameArray[i];
       var age = ageArray[i];
       var cell = cellArray[i];
       var qty = qtyArray[i];
       var wafernum = wafernumArray[i];
       var purpose = purposeArray[i];
       var remarks = remarksArray[i];
       if (uname === "" || age === "" || cell === "" || qty === "" || wafernum === "" || purpose === "" ||            remarks === "") {
         document.getElementById('submit_form').disabled = true;
        document.getElementById('submit_form').style.backgroundColor = "initial";
        break;
      } else {
        document.getElementById('submit_form').disabled = false;
        document.getElementById('submit_form').style.backgroundColor = "yellow";
      }
    }
       
    }
      
  </script>

  <style>

  </style>
</head>

<body>
  Name: <input type="text" id="uname" /> Age: <input type="text" id="age" />
  <input type="button" id="add" value="Add" onclick="Javascript:addRow();">
  <table id="bod">
    <tr>
      <th>PURPOSE</th>
      <th>WAFERNUM</th>
      <th>CELL</th>
      <th>QTY</th>
      <th>REMARKS</th>
    </tr>
  </table>
  <input type="submit" name="submit" id="submit_form" value="Submit" onclick="SaveData()" disabled>
</body>

</html>

【讨论】：

还是一样:(
您希望在所有行中的所有文本框都被填满或每行中只有一个文本框被填满时启用提交？