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

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

<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

24.04.2019 09:40

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

302

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Все такой же :(

— 24.04.2019 09:55

Вы хотите, чтобы отправка была включена, когда все текстовые поля во всех строках заполнены или заполнено только одно текстовое поле в каждой строке?

— 24.04.2019 10:17

24.04.2019 09:51

Ответ принят как подходящий

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

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

я удалил изменение цвета, просто добавьте это

— 24.04.2019 11:09

мы вкладываем время и энергию в это, самое меньшее, что вы могли бы сделать, это сообщить нам, сработало это или нет, и если он принял ответ.

— 25.04.2019 08:33

Работающий! Большое спасибо

— 26.04.2019 03:15

в row.insertCell(0).innerHTML действительно ли имя класса «uname»? Это немного сбивает с толку

— 26.04.2019 05:32

24.04.2019 11:08