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

问题描述 投票：0回答：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[]" 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
2个回答
0
投票

好吧我修复了你的错误，你有一些问题，你在按钮和禁用，它总是更好地通过循环检查而不是去检查每个元素是否为空，检查下面的答案和小提琴。让我知道它是否有效。编辑过的脚本部分如下所示，将其替换为您应该使用的脚本部分。

      <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>
0
投票

稍微修改你的条件。现在它正在按预期工作

<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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.