Как отключить кнопку, если динамическое текстовое поле пусто - PullRequest
Новая
       2

Как отключить кнопку, если динамическое текстовое поле пусто

0 голосов
/ 24 апреля 2019

Я отключил кнопку отправки, чтобы избежать отправки, когда текстовое поле не заполнено.У меня есть несколько динамических текстовых полей, где функция работает правильно.Но после добавления еще одного ряда текстовых полей кнопка отправки уже включена.Как я могу все еще отключить текстовые поля, когда пользователь решает добавить еще одну строку?Мне нужно, чтобы кнопка отправки была включена всякий раз, когда все текстовые поля заполнены, после и до добавления другой строки.

<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>

Ответы [ 2 ]

0 голосов
/ 24 апреля 2019

Хорошо, я исправил вашу ошибку, у вас были некоторые проблемы, когда вы вводили кнопку и отключали ее, всегда лучше прокачать ее и проверить через цикл, чем идти и проверять, является ли каждый элемент пустым, проверить нижеприведенный ответ и скрипку , дайте мне знать, если это работает. Отредактированная часть скрипта ниже, замените ее на вашу, она должна работать. 

      <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 голосов
/ 24 апреля 2019

Измените ваши условия немного. Теперь он работает как нужно 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...