javascript - 当动态填充输入字段时如何启用提交按钮？

Question

我制作了一个网络表单，用户可以使用下拉框填写输入字段。使用 Jquery 帮助动态填充字段。填写所有输入字段后，用户必须单击“提交”按钮才能进一步使用我的表单权益。我不想让用户在填写所有输入字段之前使用“提交”按钮。为此，我已经在代码中添加了一个函数。仅当所有输入字段都填写了一定金额时，此功能才会启用“提交”按钮。但是当使用下拉框动态填充输入字段时会出现问题。当使用下拉框填写字段时，提交按钮本身不会启用。我必须单击其中一个输入字段才能启用它。

我也尝试用 Google 来解决这个问题，但无法自行解决。有人可以帮我解决这个问题吗？

这是我的代码

let headings = []
function initInputs(headingList) {
  jQuery(".fields").append(createInputsHTML(headingList))
}


function createInputsHTML(headingList) {
  let html = ''
  headingList.forEach(heading => {
    if (heading !== 'Company') {
      html += `<label for="${heading}">${heading}: </label>`
      html += `<input type="number" id="${heading}">`
      html += '<br>'
    }
  })

  return html
}


function getJSON() {
  return new Promise(resolve => {
    jQuery.get("https://cors-anywhere.herokuapp.com/www.coasilat.com/wp-content/uploads/2019/06/data-1.txt", function(data) {
      resolve(JSON.parse(data))
    });
  })
}

// processing raw JSON data
function processRawData(data) {
  return new Promise(resolve => {
    const companyData = []
    // creating data array
    // handling multiple sheets
    Object.values(data).forEach((sheet, index) => {
      sheet.forEach((company, i) => {
        companyData.push({ ...company
        })
        // create headings only once
        if (index === 0 && i === 0) {
          Object.keys(company).forEach(item => {
            headings.push(item.trim())
          })
        }
      })
    })
    resolve(companyData)
  })
}

$(async function() {

  let lists = [];

  function initAutocomplete(list) {
    const thisKey = 'Company'
    $("#company").autocomplete('option', 'source', function(request, response) {
      response(
        list.filter(item => {
          if (item[thisKey].toLowerCase().includes(request.term.toLowerCase())) {
            item.label = item[thisKey]
            return item
          }
        })
      )
    })
  }

  $("#company").autocomplete({
    minLength: 1,
    source: lists,
    focus: function(event, ui) {
      // the "species" is constant - it shouldn't be modified
      $("#company").val(ui.item.Company);
      return false;
    },
    select: function(event, ui) {
      // handling n number of fields / columns
      headings.forEach(heading => {
        $('#' + heading).val(ui.item[heading])
      })
      return false;
    }
  });

  // starting data download, processing and usage
  getJSON()
    .then(json => {
      return processRawData(json)
    })
    .then(data => {
      
      // make the processed data accessible globally
      lists = data
      initAutocomplete(lists)
      initInputs(headings)
    })

});



// code to set default values if user enters zero or negative values




//calculation for Rating value

$(document).ready(function(){ 
$("#Cal").click(function(){

var peVal=0,roceVal=0,sgVal=0,dyVal=0,psVal=0,pbVal=0,npmlqVal=0,roaVal=0,deVal=0,upsVal=0,crVal=0
;

jQuery(".fields input").each(function (){ 
var idHeading=$(this).attr("id");  

if(idHeading=="PE"){ peVal=parseInt($(this).val()); } 
if(idHeading=="ROCE"){ roceVal=parseInt($(this).val()); } 
if(idHeading=="SG"){ sgVal=parseInt($(this).val()); } 
if(idHeading=="DY"){ dyVal=parseFloat($(this).val()); } 
if(idHeading=="PS"){ psVal=parseFloat($(this).val()); }
if(idHeading=="PB"){ pbVal=parseFloat($(this).val()); }
if(idHeading=="NPMLQ"){ npmlqVal=parseFloat($(this).val()); }

if(idHeading=="ROA"){ roaVal=parseFloat($(this).val()); }
if(idHeading=="DE"){ deVal=parseFloat($(this).val()); }
if(idHeading=="UPS"){ upsVal=parseFloat($(this).val()); }
if(idHeading=="CR"){ crVal=parseFloat($(this).val()); }


}); 

var output=peVal+roceVal+sgVal+dyVal+psVal+pbVal+npmlqVal+roaVal+deVal+upsVal+crVal
;

$("output[name='amount']").text(output);
 }); 
 });
 
 
 $(document).on("keyup", "input[type='number']", function() {
  var empty = false;
  $('input[type="number"]').each(function() {
    if (($(this).val() == '')) {
      empty = true;
    }
  });

  if (empty) {
    $('#Cal').attr('disabled', 'disabled');
  } else {
    $('#Cal').removeAttr('disabled');
  }
});
 

<html>
    <head>
        <title>Page Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
    </head>
    <body>
        
<div class="ui-widget">
  <form id="frm1">
    <label for="company">Drop-down box </label>
    <input id="company"><br /><br />
    
    <div class="fields"></div>
    <!-- PLEASE NOTE THAT THE OTHER INPUT FIELDS WILL BE ADDED DYNAMICALLY -->
 <button  type="button" id="Cal" disabled="disabled"  >
 Button
 </button>
<p> <output name="amount" for="calculation">0</output>
</p>
</form>
    </body>
</html>

Answer 1

代码的最后一个 keyup 没问题 ($(document).on("keyup", "input[type='number']", ... );)，但您忘记了它只会在具有属性 type='number' 的 input 中触发事件 keyup 时触发.

当您在自动完成输入中选择某些内容时，此事件不会触发，您需要添加一些代码来检查它。像这样的东西:

let headings = []
function initInputs(headingList) {
	jQuery(".fields").append(createInputsHTML(headingList))
}


function createInputsHTML(headingList) {
	let html = ''
	headingList.forEach(heading => {
		if (heading !== 'Company') {
			html += `<label for="${heading}">${heading}: </label>`
			html += `<input type="number" id="${heading}">`
			html += '<br>'
		}
	})

	return html
}


function getJSON() {
	return new Promise(resolve => {
		jQuery.get("https://cors-anywhere.herokuapp.com/www.coasilat.com/wp-content/uploads/2019/06/data-1.txt", function(data) {
			resolve(JSON.parse(data))
		});
	})
}

// processing raw JSON data
function processRawData(data) {
	return new Promise(resolve => {
		const companyData = []
		// creating data array
		// handling multiple sheets
		Object.values(data).forEach((sheet, index) => {
			sheet.forEach((company, i) => {
				companyData.push({ ...company
				})
				// create headings only once
				if (index === 0 && i === 0) {
					Object.keys(company).forEach(item => {
						headings.push(item.trim())
					})
				}
			})
		})
		resolve(companyData)
	})
}

$(async function() {

	let lists = [];

	function initAutocomplete(list) {
		const thisKey = 'Company'
		$("#company").autocomplete('option', 'source', function(request, response) {
			response(
				list.filter(item => {
					if (item[thisKey].toLowerCase().includes(request.term.toLowerCase())) {
						item.label = item[thisKey]
						return item
					}
				})
			)
		})
	}

	$("#company").autocomplete({
		minLength: 1,
		source: lists,
		focus: function(event, ui) {
			// the "species" is constant - it shouldn't be modified
			$("#company").val(ui.item.Company);
			return false;
		},
		select: function(event, ui) {
      var empty = false;
			// handling n number of fields / columns
			headings.forEach(heading => {
				$('#' + heading).val(ui.item[heading]);
        if ((ui.item[heading] == '')) {
          empty = true;
        }
			});
      checkFill(empty);
			return false;
		}
	});

	// starting data download, processing and usage
	getJSON()
		.then(json => {
			return processRawData(json)
		})
		.then(data => {
			
			// make the processed data accessible globally
			lists = data
			initAutocomplete(lists)
			initInputs(headings)
		})

});



// code to set default values if user enters zero or negative values




//calculation for Rating value

$(document).ready(function(){ 
$("#Cal").click(function(){

var peVal=0,roceVal=0,sgVal=0,dyVal=0,psVal=0,pbVal=0,npmlqVal=0,roaVal=0,deVal=0,upsVal=0,crVal=0
;

jQuery(".fields input").each(function (){ 
var idHeading=$(this).attr("id");  

if(idHeading=="PE"){ peVal=parseInt($(this).val()); } 
if(idHeading=="ROCE"){ roceVal=parseInt($(this).val()); } 
if(idHeading=="SG"){ sgVal=parseInt($(this).val()); } 
if(idHeading=="DY"){ dyVal=parseFloat($(this).val()); } 
if(idHeading=="PS"){ psVal=parseFloat($(this).val()); }
if(idHeading=="PB"){ pbVal=parseFloat($(this).val()); }
if(idHeading=="NPMLQ"){ npmlqVal=parseFloat($(this).val()); }

if(idHeading=="ROA"){ roaVal=parseFloat($(this).val()); }
if(idHeading=="DE"){ deVal=parseFloat($(this).val()); }
if(idHeading=="UPS"){ upsVal=parseFloat($(this).val()); }
if(idHeading=="CR"){ crVal=parseFloat($(this).val()); }


}); 

var output=peVal+roceVal+sgVal+dyVal+psVal+pbVal+npmlqVal+roaVal+deVal+upsVal+crVal
;

$("output[name='amount']").text(output);
 }); 
 });
 
 
 $(document).on("keyup", "input[type='number']", function() {
	var empty = false;
	$('input[type="number"]').each(function() {
		if (($(this).val() == '')) {
			empty = true;
		}
	});
  checkFill(empty);
});

function checkFill(isEmpty){
  if (isEmpty) {
		$('#Cal').attr('disabled', 'disabled');
	} else {
		$('#Cal').removeAttr('disabled');
	}
}

<html>
	<head>
		<title>Page Title</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
	</head>
	<body>
		<div class="ui-widget">
		  <form id="frm1">
			<label for="company">Drop-down box </label>
			<input id="company"><br /><br />
				<div class="fields"></div>
				<!-- PLEASE NOTE THAT THE OTHER INPUT FIELDS WILL BE ADDED DYNAMICALLY -->
 				<button  type="button" id="Cal" disabled="disabled"  >
 				Button
 				</button>
				<p> <output name="amount" for="calculation">0</output>
				</p>
			</form>
		</div>
	</body>
</html>

或者，至少，触发 keyup设置字段值时的函数:

let headings = []
function initInputs(headingList) {
	jQuery(".fields").append(createInputsHTML(headingList))
}


function createInputsHTML(headingList) {
	let html = ''
	headingList.forEach(heading => {
		if (heading !== 'Company') {
			html += `<label for="${heading}">${heading}: </label>`
			html += `<input type="number" id="${heading}">`
			html += '<br>'
		}
	})

	return html
}


function getJSON() {
	return new Promise(resolve => {
		jQuery.get("https://cors-anywhere.herokuapp.com/www.coasilat.com/wp-content/uploads/2019/06/data-1.txt", function(data) {
			resolve(JSON.parse(data))
		});
	})
}

// processing raw JSON data
function processRawData(data) {
	return new Promise(resolve => {
		const companyData = []
		// creating data array
		// handling multiple sheets
		Object.values(data).forEach((sheet, index) => {
			sheet.forEach((company, i) => {
				companyData.push({ ...company
				})
				// create headings only once
				if (index === 0 && i === 0) {
					Object.keys(company).forEach(item => {
						headings.push(item.trim())
					})
				}
			})
		})
		resolve(companyData)
	})
}

$(async function() {

	let lists = [];

	function initAutocomplete(list) {
		const thisKey = 'Company'
		$("#company").autocomplete('option', 'source', function(request, response) {
			response(
				list.filter(item => {
					if (item[thisKey].toLowerCase().includes(request.term.toLowerCase())) {
						item.label = item[thisKey]
						return item
					}
				})
			)
		})
	}

	$("#company").autocomplete({
		minLength: 1,
		source: lists,
		focus: function(event, ui) {
			// the "species" is constant - it shouldn't be modified
			$("#company").val(ui.item.Company);
			return false;
		},
		select: function(event, ui) {
			// handling n number of fields / columns
			headings.forEach(heading => {
				$('#' + heading).val(ui.item[heading]).keyup();
			})
			return false;
		}
	});

	// starting data download, processing and usage
	getJSON()
		.then(json => {
			return processRawData(json)
		})
		.then(data => {
			
			// make the processed data accessible globally
			lists = data
			initAutocomplete(lists)
			initInputs(headings)
		})

});



// code to set default values if user enters zero or negative values




//calculation for Rating value

$(document).ready(function(){ 
$("#Cal").click(function(){

var peVal=0,roceVal=0,sgVal=0,dyVal=0,psVal=0,pbVal=0,npmlqVal=0,roaVal=0,deVal=0,upsVal=0,crVal=0
;

jQuery(".fields input").each(function (){ 
var idHeading=$(this).attr("id");  

if(idHeading=="PE"){ peVal=parseInt($(this).val()); } 
if(idHeading=="ROCE"){ roceVal=parseInt($(this).val()); } 
if(idHeading=="SG"){ sgVal=parseInt($(this).val()); } 
if(idHeading=="DY"){ dyVal=parseFloat($(this).val()); } 
if(idHeading=="PS"){ psVal=parseFloat($(this).val()); }
if(idHeading=="PB"){ pbVal=parseFloat($(this).val()); }
if(idHeading=="NPMLQ"){ npmlqVal=parseFloat($(this).val()); }

if(idHeading=="ROA"){ roaVal=parseFloat($(this).val()); }
if(idHeading=="DE"){ deVal=parseFloat($(this).val()); }
if(idHeading=="UPS"){ upsVal=parseFloat($(this).val()); }
if(idHeading=="CR"){ crVal=parseFloat($(this).val()); }


}); 

var output=peVal+roceVal+sgVal+dyVal+psVal+pbVal+npmlqVal+roaVal+deVal+upsVal+crVal
;

$("output[name='amount']").text(output);
 }); 
 });
 
 
 $(document).on("keyup", "input[type='number']", function() {
	var empty = false;
	$('input[type="number"]').each(function() {
		if (($(this).val() == '')) {
			empty = true;
		}
	});

	if (empty) {
		$('#Cal').attr('disabled', 'disabled');
	} else {
		$('#Cal').removeAttr('disabled');
	}
});

<html>
	<head>
		<title>Page Title</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
	</head>
	<body>
		<div class="ui-widget">
		  <form id="frm1">
			<label for="company">Drop-down box </label>
			<input id="company"><br /><br />
				<div class="fields"></div>
				<!-- PLEASE NOTE THAT THE OTHER INPUT FIELDS WILL BE ADDED DYNAMICALLY -->
 				<button  type="button" id="Cal" disabled="disabled"  >
 				Button
 				</button>
				<p> <output name="amount" for="calculation">0</output>
				</p>
			</form>
		</div>
	</body>
</html>